Page 1 of 1

need template...

Posted: Fri Mar 31, 2006 4:52 pm
by mustis
Does anyone know howto make a template and css files for this page??

http://www.webdezign.no/eulven/TEMPLATE.JPG

Thanks

Re: need template...

Posted: Fri Mar 31, 2006 5:06 pm
by calguy1000
That looks like a really simple layout, except for the rotating banners, haven't figured out how to do that, but shouldn't be that hard.

Anybody know how to do that?  I'd really like to know.

Re: need template...

Posted: Sat Apr 01, 2006 9:09 am
by mustis
some help??

Newbie to templates and css... could need som tips.

Re: need template...

Posted: Sat Apr 01, 2006 10:29 am
by katon
That looks like a request for consulting services, eh?  ;D  Would you be willing to pay a nominal fee for the template you need?  ;)

Re: need template...

Posted: Sat Apr 01, 2006 10:54 am
by mustis
hehe, my point is that I need some help, this way I also can learn something of this... But I actually dont know where to start...  :-\

Re: need template...

Posted: Sat Apr 01, 2006 11:05 am
by katon

Re: need template...

Posted: Sat Apr 01, 2006 11:55 am
by mustis
I'v got a bit further... but I dont know why the left column is pushing the main content down....  ::-\

http://www.webdezign.no/0121_1/index.php?sider=agadfg

Re: need template...

Posted: Sat Apr 01, 2006 1:20 pm
by Nogga
It's not that hard to do this as a CSS Layout - its quite simple:

A overall div-container containing all elements - this one has a certain width and is centered.

Then put in an div-container for the left column, floating left. This one contains each advertising container als one div.

Then next create another div not floating, for the real content, which has an margin greater than the width of the left column. This container on his own contains the above advertising container und below the navigation and content.

That's it.

I see, if I could do a rough layout for you. Stay tuned.

Re: need template...

Posted: Sat Apr 01, 2006 1:35 pm
by Nogga
Here's a rough layout I just did:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<__html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <style>
    
      * {
        /* setting for all elements */
        margin: 0;
        padding: 0;
      }
    
      #body {
        text-align: center; /* just aligning for IE - margin: auto does not work */
      }
    
      #overall {
        background-color: blue;
        width: 700px;
        margin: 0 auto;
      }
      
      #header {
        margin: 10px 0 0 0;
        text-align: right;
        width: 700px;
        clear: both;
        background-color: red;
      }
      
      #page {
        width: 700px;
        background-color: green;
      }
      
      #left_col {
        float: left;
        width: 200px;
        background-color: pink;
      }
      
      .left_advert {
        margin: 0 0 10px 0;
        background-color: yellow;
      }
      
      #main {
        margin-left: 210px; 
        background-color: green;
      }
      
      #top_advert {
        margin-bottom: 10px; 
        background-color: lime;
      }
      
      #navigation {
        background-color: maroon;
        margin-bottom: 10px;
      }
      
      #content {
        background-color: teal;
      }
      
    
    </style>
  </head>
  </__body>
  
    <div id="overall">
      
      <div id="header">
        company
      </div>
      
     <div id="page">
      
        <div id="left_col">
          
          <div class="left_advert">
            advert
          </div>
          
          <div class="left_advert">
            advert
          </div>          
          
        </div>
        
        <div id="main">
        
          <div id="top_advert">
            top advert
          </div>
          
          <div id="navigation">
            navigation
          </div>
          
          <div id="content">
            content
          </div>
        
        </div>
      
     </div>
     
    </div>
    
  <__body>
</__html>

Re: need template...

Posted: Sat Apr 01, 2006 1:54 pm
by tsw
Nogga wrote: A overall div-container containing all elements - this one has a certain width and is centered.
Most of the time you dont even need the overall container (I myself try to get away fith as few div's as possible)

you can use body as the overall container (as it already is one) like this

Code: Select all

body {
width:50em;
margin:0 auto;
}

Re: need template...

Posted: Sat Apr 01, 2006 1:56 pm
by Nogga
thx - I didn't know that, but I think its more consistent to use a separated overall container. In my view the body container is the viewport of the browser's window and resizing this... I don't know.

Re: need template...

Posted: Sat Apr 01, 2006 2:07 pm
by tsw
Nogga wrote: thx - I didn't know that, but I think its more consistent to use a separated overall container. In my view the body container is the viewport of the browser's window and resizing this... I don't know.
yep, and actually there is html tag before body :)

I think that html styling isnt that well supported on browsers though

Re: need template...

Posted: Sun Apr 02, 2006 5:21 am
by Dr.CSS
you might want to watch how you box things,,

 

  1     
   
2     
        company
2           
   
  3   
   
  4       
       
5         
            advert
5         
       
6         
            advert
6                 
       
  4       
     
  7       
     
8         
            top advert
8         
       
9         
            navigation
9         
       
10         
            content
10         
     
    7       
   
    3     
   
  1   
 
 


that is what you posted,,  this is what you have,,








3    this should be? ? to close "container_left"
4   
       
       
        Skip to navigation
        Skip to content
         
         
       
       
5     
       
5     
     
     
     
6     
        Navigation
7       
7             
6       
4     
       
     
8     
       
8     
       
       
9   
         
10       
       
11  
11   
12 
12 
13       
13         
         
         
10     
     
9     
       
     
14     
14     
     
4   
nope it's container_left
no      needs an end which would be container_left if you put it here
no    should be the end of pagewrapper





not quite the same,, like i say you got to watch your boxes, i always find it helps to go thru and count my  to lines to see if i missed something, this screenshot is showing what you can see if you use Firefox with the Web Developer extension it lets you outline Block Level Elements and also edit your CSS in real time,, notice the button that says CSS,

HTH
  mark

[attachment deleted by admin]

Re: need template...

Posted: Sun Apr 02, 2006 12:18 pm
by mustis
Thanks for the help everuone

Nogga I would apriciate that.

Thanks