Valid XHTML + Valid CSS: How to make a simple one column layout.
The most basic of all layouts is the one column layout. It has a small navigation above the header, a header, a navigation below the header, the content and the footer. This is a perfect design for a small organization or church, or a site where you don’t need a sidebar, or you have a lot of static content. I use a one-column layout on my personal site http://www.gorgefamily.com/alec and it works great!
We will make a fixed width version for this but you can make it fluid if you want.
Okay, let’s start with the basic tags.
<div id="wrapper">
<div id="top-nav"></div>
<div id="head"><h1>This is the header</h1></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
The wrapper allows us to center the content and get some separation from the top with the following CSS.
#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}
What this does is it makes with entire website 790px wide and it centers it on the screen. This allows the page to be viewed at all popular resolutions. What the margin:auto part does is the browser renders a object with a margin that is the same on each side, thus centering it. Now let’s fill in some sample content:
<div id="wrapper">
<div id="top-nav">
<a href="#">Test Link 1</a><a href="#">Test Link 2</a>
</div>
<div id="head"><h1>The <span>header</span></h1></div>
<div id="nav"><a href="#">Test Link 1</a><a href="#">Test Link 2</a></div>
<div id="content">
Lorem ipsum dolor sit amet...
</div>
<div id="footer">Copyright blah blah blah</div>
</div>
The post gets really long after this so here is a break.
Now let’s add the corresponding CSS:
* {
margin:0;
padding:0;
}
body {
font:0.8em "Trebuchet MS", Arial;
padding:0;
margin:0;
line-height:1.75em;
}
#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}
#top-nav {
height:3em;
background:black;
color:white;
padding:0 5px;
}
#top-nav a {
display:block;
float:right;
padding:0.65em;
color:white;
text-decoration:none;
}
#top-nav a:hover {
color:white;
text-decoration:underline;
}
#head {
height:100px;
padding:3em 0;
border:5px black solid;
border-width:0 5px;
valign:bottom;
}
#head h1 {
font-size:3em;
padding:0;
margin:1em 0 0;
text-align:center;
color:gray;
}
#head h1 span {
color:black;
}
#nav {
padding:0px 5px;
height:3em;
background:black;
}
#nav a {
padding:0.65em;
color:white;
display:block;
float:left;
text-decoration:none;
}
#nav a:hover {
background:white;
color:black;
}
#content {
padding:5px;
clear:both;
border:5px black solid;
border-width:0 5px;
}
#footer {
text-align:center;
padding:5px;
margin-bottom:15px;
border:6px black solid;
border-width:0 5px 5px;
}
Here is the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font:0.8em "Trebuchet MS", Arial;
padding:0;
margin:0;
line-height:1.75em;
}
#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}
#top-nav {
height:3em;
background:black;
color:white;
padding:0 5px;
}
#top-nav a {
display:block;
float:right;
padding:0.65em;
color:white;
text-decoration:none;
}
#top-nav a:hover {
color:white;
text-decoration:underline;
}
#head {
height:100px;
padding:3em 0;
border:5px black solid;
border-width:0 5px;
valign:bottom;
}
#head h1 {
font-size:3em;
padding:0;
margin:1em 0 0;
text-align:center;
color:gray;
}
#head h1 span {
color:black;
}
#nav {
padding:0px 5px;
height:3em;
background:black;
}
#nav a {
padding:0.65em;
color:white;
display:block;
float:left;
text-decoration:none;
}
#nav a:hover {
background:white;
color:black;
}
#content {
padding:5px;
clear:both;
border:5px black solid;
border-width:0 5px;
}
#footer {
text-align:center;
padding:5px;
margin-bottom:15px;
border:6px black solid;
border-width:0 5px 5px;
}
</style>
</head>
<div id="wrapper">
<div id="top-nav">
<a href="#">Test Link 1</a><a href="#">Test Link 2</a>
</div>
<div id="head"><h1>The <span>header</span></h1></div>
<div id="nav"><a href="#">Test Link 1</a><a href="#">Test Link 2</a></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis congue, ipsum ut molestie suscipit, turpis velit nonummy erat, ut accumsan dui magna nec ligula. Aenean condimentum scelerisque risus. Donec eu magna a est tincidunt ornare. Pellentesque lacus enim, adipiscing quis, tempor ac, dignissim quis, augue. Duis eros erat, auctor a, gravida quis, lobortis eget, sem. Suspendisse eros odio, porta nec, interdum aliquam, rutrum eu, mi. Aenean a massa at massa hendrerit iaculis. Duis erat purus, dictum eu, dignissim nec, iaculis a, velit. Integer in urna. Aliquam erat volutpat. Nulla fringilla orci sit amet odioAliquam porta dapibus ipsum. Integer magna ipsum, posuere non, dapibus sed, rhoncus eu, ipsum. Morbi pulvinar condimentum metus. Sed pulvinar arcu non dui. Cras dictum elit quis diam. Duis ante. Nunc est massa, tempor eu, dignissim eu, varius eu, leo. Praesent a ante. Fusce enim erat, euismod a, consectetuer et, dapibus in, risus. Fusce in dolor.
Nunc magna nunc, dignissim et, porttitor sit amet, tempus a, lectus. Maecenas dui. Proin metus nibh, blandit nec, facilisis in, tristique vitae, lacus. Nam eu lorem ultricies mi bibendum eleifend. Quisque sapien erat, ornare id, malesuada vitae, congue eget, sem. Vestibulum dui. Nulla at pede quis metus consequat feugiat. Etiam id lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rhoncus ipsum ut dui. Vestibulum enim nisl, dapibus eget, lobortis ac, feugiat id, augue. Ut tincidunt lorem quis arcu. Curabitur commodo libero sed odio.
Praesent pretium varius nisl. Integer sed sem sit amet metus fermentum rutrum. Nulla placerat pulvinar odio. Curabitur quis lorem eget odio pellentesque dapibus. In magna. Duis nec ante ultricies libero consequat rutrum. Proin congue nisl ullamcorper pede. In laoreet nibh nec pede. Cras varius, dui ut gravida ullamcorper, tortor quam lobortis mi, vitae tempus ipsum sapien in lorem. Etiam vestibulum. Donec in nunc. Quisque iaculis sapien sed leo.
Sed purus ligula, facilisis sit amet, ultricies at, egestas sed, turpis. Donec dolor. Aliquam placerat suscipit erat. Quisque nec lorem. Vivamus orci tortor, vulputate sit amet, aliquam at, congue nec, mi. Nulla fermentum dictum mi. Vivamus facilisis arcu eu libero. Quisque pharetra tortor in justo. Fusce eleifend convallis quam. Suspendisse interdum egestas nisi. Praesent vestibulum aliquet tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eu urna condimentum metus suscipit rhoncus.
</div>
<div id="footer">Copyright blah blah blah</div>
</div>
</body>
</head>
Here is a example of the page: One Column Example.
If you have any questions post a comment and I will respond.
Post a Comment »
Comment Guidelines