css help needed – creating a webpage template

@buckfuNov 06.2006

hey folks,

I’m pretty new to using CSS, and I’m having some trouble creating a basic webpage layout template. I’m trying to generate a basic banner, left column, content area layout using just css (no tables) to position the content.

I’ve been trying to use absolute and relative positioning, but I’m just confused and feel like I belong on the short bus. If somebody can help show me how to write this code, I’d really appreciate it.

~~[B]~~Banner[/B]
61px high, by 100% width
contains just a small logo image

~~[B]~~Left Column[/B]
205 px wide, 100% height
will just contain static text and various links

~~[B]~~Disclaimer[/B]
205px wide
the usual ‘all rights reserved’ stuff that is in-line with the left column, but positioned at the bottom of the left column.

~~[B]~~content area[/B]
This would fill the remaining space to the right of the left column, both in width and in height.

to post a comment

CSS

4 Comments(s) _↴

@KDLANov 06.2006 — #

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;style type="text/css"&gt;
 html, body {height: 100%;}
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div style="width: 100%; height: 61px; margin: 0; padding: 0;"&gt;
 &lt;img src="name.jpg" alt="description" /&gt;
 &lt;/div&gt;
 &lt;div style="float: left; width: 205px; margin: 0; padding: 0; height: 100%;"&gt;
 left column content
 &lt;div style="position: absolute; bottom: 5px;"&gt;
 disclaimer
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;div style="margin-left: 205px; padding: 0; height: 100%;"&gt;
 main content
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

You'll want to assign those div's ids and apply to a stylesheet, and also add the DOCTYPE you'd like to use. This is to just get you started, and see how the layout works.

KDLA

@buckfuauthorNov 07.2006 — #thanks very much for pointing me in the right direction. It has definitely helped a lot.

much appreciated!

@AlbatrossNov 08.2006 — #I wouldn't do that, actually. Give me a minute to pull up one of my CSS templates for you.

@AlbatrossNov 08.2006 — #Ok, here we go. You're going to have to create your own header image (just make sure you adjust the width in the stylesheet to match it), but this will work cross-browser without any hacks. I've also included a background image to achieve a "faux column" effect that you can use on your left column.

Any questions, feel free to ask me.

[code=html]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 <!--
 /*
 Stylesheet written by Dan Schulz for buckfu at webdeveloper.com/forum/
 This example, HTML and all, is hereby released to the public domain.
 */
 
 
 * {
 margin: 0;
 padding: 0;
 }
 
 body {
 background: #FFF;
 color: #000;
 }
 
 .skipLink {
 position: absolute;
 left: -999em;
 }
 
  #header {
   background: #00F;
   color: #FFF;
  } 
   h1, h1 span {
   background: url('images/header.gif') no-repeat;
   height: 61px;
   width: 618px;
   }
   h1 span {
   display: block;
   margin-bottom: -61px;
   position: relative;
   z-index: 1;
   }
 
  #main {
   background: url('images/left_bg.gif') repeat-y;
  }
   #leftColumn {
   background: #F00;
   color: inherit;
   float: left;
   width: 205px;
   }
   #menu {
   list-style: none;
   width: 205px;
   }
   #menu li {
   display: inline;
   }
 
   #menu a {
   background: #F00;
   color: #FFF;
   display: block;
   text-decoration: none;
   width: 100%;
   }
 
   #menu a:hover {
   background: #FF0;
   color: #000
   }
 
   #content {
   margin-left: 205px;
   }
   #content h2 {
   text-align: center;
   }
 
   #content h3 {
   padding-left: 0.5em;
   }
 
   #content .section {
   padding: 0.5em 0;
   }
 
   #content p {
   padding: 0.25em 0.5em;
   }
 
 #footer {
 background: #F0F;
 clear: both;
 color: #FFF;
 padding: 1em 0;
 width: 205px;
 }
 #footer p {
 text-align: center;
 }
 
 -->
 </style>
 </head>
 <body>
 <div id="header">
 <h1><span></span>Level 1 Header</h1>
 <!-- you can add additional content here, just be careful -->
 </div>
 <div class="skipLink">
 <strong>Main Menu <a href="#content">(Skip to Content)</a></strong>
 </div>
 <div id="main">
 <div id="leftColumn">
 <ul id="menu">
 <li><a href="#">Menu Item</a></li>
 <li><a href="#">Menu Item</a></li>
 <li><a href="#">Menu Item</a></li>
 <li><a href="#">Menu Item</a></li>
 <li><a href="#">Menu Item</a></li>
 <li><a href="#">Menu Item</a></li>
 </ul>
 <p>Just an example of additional content.</p>
 </div>
 <div id="content">
 <h2>Page Title</h2>
 <div class="section">
 <h3>Section Header</h3>
 <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
 </div>
 <div class="section">
 <h3>Section Header</h3>
 <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
 </div>
 </div>
 </div>
 <div id="footer">
 <!-- if you have a footer menu, you can add it here -->
 <p>
 Copyright &copy; 2006, Fiasco Labs. All Wrongs Reserved.
 </p>
 </div>
 </body>
 </html>
 [/code]

If you want the page to have a 100% height, so the footer rests at the bottom if there isn't enough content to push it "over the fold" don't hesitate to ask me. I'll gladly add it for you.

[upl-file uuid=df866173-bc3f-45bf-a275-8b0151e78acc size=45B]left_bg.gif[/upl-file]

Also in #CSS _↴

floats and clears Word's outside of the permitted area :S creating columns

Success!

Help @buckfu spread the word by sharing this article on Twitter...

Tweet This

css help needed – creating a webpage template

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

css help needed – creating a webpage template

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴