PDA

View Full Version : Div + CSS layout

dudeking
August 28th, 2006, 11:58 PM
Hi,
I'm trying to teach my self to use css for layout instead of tables.
I am trying to make a liquid layout, which was working fine, untill I tried to add some background images to the head.

http://dudeking.co.uk/beta/

The head should have
http://dudeking.co.uk/beta/images/head.gif
Fixed Size then
http://dudeking.co.uk/beta/images/line.gif
Expandable in the middle and
http://dudeking.co.uk/beta/images/end.gif
at the end.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<title>
Dudeking's Place
</title>
</head>
<body>
<div id="head">
<table id="head_table" width="100%">
<tr>
<td id="head_start">
</td>
<td id="head_center">
</td>
<td id="head_end">
</td>
</tr>
</table>
</div>
<div id="content">
Content
<div id="footer">
Footer
</div>
</div>
<div id="side">
Links
</div>
</body>
</html>



/* CSS Document */
body{
background-color:#271D17;
margin:0;
padding:0;
}
#head_table{
width:100%;
border:0;
padding:0;
margin:0;
table-layout:fixed;
}
#head{
background-color:#51311F;
position:absolute;
height:80px;
padding:0;
}
#head_start{
background-image:url(../images/head.gif);
background-repeat:no-repeat;
background-position:left;
width:250px;
height:80px;
}
#head_center{
background-image:url(../images/line.gif);
background-repeat:repeat-x;
height:80px;
}
#head_end{
background-image:url(../images/end.gif);
background-repeat:no-repeat;
position:absolute;
background-position:right;
height:80px;
width:25px;
}
#content{
background-color:#776053;
width:70%;
position:absolute;
top:95px;
left:2%;
padding:3px;
}
#footer{
background-color:#4F3A2F;
margin:5px;
padding:3px;
}
#side{
background-color:#776B65;
width:24%;
position:absolute;
top:95px;
right:2%;
padding:3px;
}
Buzz
August 29th, 2006, 12:48 AM
I'm a sucker for easy to follow code... Do not put tables inside of divs unless the table contains tabular data. Otherwise it's a pointless CSS layout. Divs are containers just like tables, use one or the other.



{Doctype and head elements here}
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
Logo image here or place the background image in the Logo ID style in the CSS. Logo should be click-able to return the home page though. background images aren't click-able.
</div>
</div>
<div id="content">

</div>
<div id="footer">

</div>
</div>
</body>
</html>


and the CSS:



* { margin: 0; padding:0; } /*removes all pre-formatted margins and padding*/

body {
background-color:#271D17;
}

#wrapper {
width: 100%; /* sets page width*/
}

#header {
background: #51311F url(../images/end.gif) repeat-x top left;
}

#logo {
display: block;
width: 250px;
height: 80px;
border-bottom: 1px #fff solid;
}



Check this site for some basic CSS templates: http://blog.html.it/layoutgala/
You'll be able to see how pages are formatted.
dudeking
August 30th, 2006, 11:22 PM
Sorry took so long to reply, didnt get an email about the post.

Thanks for that, the templates help alot.
The only reason I used a table was because I was having problems making the Divs stay on the same line as eatch other.