Best way to start doing new layout is to first create a _small_ testbed
this is what I usually use for starting a new layout
Code: Select all
<!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" xml:lang="en" lang="en">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
</__body>
<div id="header">
<h1>HEADER</h1>
</div><!-- end header -->
<div class="breadcrumbs">
BREADCRUBMS
</div>
<div id="content" >
CONTENT
</div>
<div id="menu">
</div>
<div id="footer">
FOOTER
</div>
<__body>
</__html>
then I have some css, like
Code: Select all
/* ZIP IT */
* {
margin:0;
padding:0;
}
div {
border:1px solid red;
}
now I have the basic html and css so and I can start editing it. now we need to have three columns so lets add two divs into content. This is where I need to decide if this right hand column information is more important than page content. As google likes havin important content first in the source and it seems you have only few images on the right side, Ill put it below content in the source (it might be good to have the images below menu also but lets leave it as an excersice for the reader
so Ill add
Code: Select all
<div id="content">
<div id="leftcontent">center CONTENT</div>
<div id="rightcontent">RIGHTCONTENT</div>
</div>
Now I have all necessary html in place and I only need to think about css.
now we need to place these divs
first we float content to right to give space for menu
Code: Select all
div#content {
float:right;
width:80%;
}
then squeeze menu on the left
now we need to have right and center content aligned so lets float em also
Code: Select all
div#leftcontent {
float:left;
width:80%;
}
div#rightcontent {
margin-left:80%;
}
same idea just different dircetion
now we have 3col layout that is also liquid
http://tsw.backspace.fi/3col/
next step would be defining maybe
Code: Select all
body {
width:60em;
margin:0 auto;
}
to have fixed width centered layout..
or maybe
Code: Select all
body {
min-width:20em;
max-width:80em;
margin:0 auto;
}
imagination is the limit
next step would be defining bg for the header
Code: Select all
div#header {
height:5em; /* make the bg image larger than actually is seen to get "zoom" effect or just define height in px */
background: #fff url('head.png') repeat right top;
}
maybe some for the footer too
Code: Select all
div#footer {
height:2em;
background: #fff url('foot.png') repeat right top;
}
thats about it
Ill leave importing this to cmsms as readers excersice
(hint, change CONTENT to {content} and TITLE to {title} and so on
hope this helps..
...