PDA

Click to See Complete Forum and Search --> : css help needed - creating a webpage template

buckfu
11-06-2006, 10:49 AM
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.

Banner
61px high, by 100% width
contains just a small logo image

Left Column
205 px wide, 100% height
will just contain static text and various links

Disclaimer
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.

content area
This would fill the remaining space to the right of the left column, both in width and in height.
KDLA
11-06-2006, 02:05 PM
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
</style>
</head>
<body>
<div style="width: 100%; height: 61px; margin: 0; padding: 0;">
<img src="name.jpg" alt="description" />
</div>
<div style="float: left; width: 205px; margin: 0; padding: 0; height: 100%;">
left column content
<div style="position: absolute; bottom: 5px;">
disclaimer
</div>
</div>
<div style="margin-left: 205px; padding: 0; height: 100%;">
main content
</div>
</body>
</html>

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
buckfu
11-06-2006, 09:53 PM
thanks very much for pointing me in the right direction. It has definitely helped a lot.

much appreciated!
Albatross
11-08-2006, 01:38 AM
I wouldn't do that, actually. Give me a minute to pull up one of my CSS templates for you.
Albatross
11-08-2006, 02:03 AM
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.

<!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>

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.