Hello,
I have designed a layout for my website in my graphics software, and I was quite satisfied. So I decided to start turning it into html and css, and make the navigation bar and links work. Because image slicing and exporting turns your layout into a big html table with spacers, and I wanted to design my layout using divisions and css, I just manually sliced the image and exported the images. Turning these into a fluent layout, I ran into some problems. I can’t figure out how to position all the elements correctly.
The layout should look like this:
index.html:
<!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=UTF-8" />
<title>Wouter's Gedichtenpagina</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
header
<div id="links_nav">
</div>
<div id="navbar">
<table border="0px" cellpadding="0px" cellspacing="0">
<tr>
<td>
<img src="images/navbar_normal_03.gif" height="76px"/>
</td>
<td>
<img src="images/navbar_normal_04.gif" height="76px"/>
</td>
<td>
<img src="images/navbar_normal_05.gif" height="76px"/>
</td>
<td>
<img src="images/navbar_normal_06.gif" height="76px"/>
</td>
<td>
<img src="images/navbar_normal_07.gif" height="76px"/>
</td>
<td>
<img src="images/navbar_normal_08.gif" height="76px"/>
</td>
</tr>
</table>
</div>
</div>
<div id="image">
image
</div>
<div id="content">
content
<div id="featured1">
featured 1
<table border="0" cellpadding="0" cellspacing="0">
<tr colspan="3">
<td>
<img src="images/Gedichten_layout_13.jpg" />
</td>
</tr>
<tr>
<td>
<img src="images/Gedichten_layout_16.jpg" />
</td>
<td>
<img src="images/Gedichten_layout_19.jpg" />
</td>
<td>
<img src="images/Gedichten_layout_18.jpg" />
</td>
</tr>
</table>
</div>
<div id="featured2">
featured 2
</div>
<div id="featured3">
featured 3
</div>
<div id="featured4">
featured 4
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>
layout.css:
@charset "UTF-8";
.body {
padding: 0px;
}
#header {
position:absolute;
left: 0px;
top: 0px;
background-image:url(images/Gedichten_layout_01.jpg);
width: 1200px;
height: 69px;
}
#links_nav {
position: absolute;
left: 0px;
top: 69px;
width: 352px;
height: 76px;
background-image:url(images/Gedichten_layout_02.jpg)
}
#navbar {
position:absolute;
left: 352px;
top: 69px;
height: 76px;
}
#image {
background-image:url(images/Gedichten_layout_10.jpg);
position:absolute;
top: 145px;
left: 0px;
height: 413px;
width: 1200px;
}
#content {
position: relative;
top: 558px;
background-color:#f7f0f0;
width: 1200px;
height: auto;
}
#featured1 {
clear: both;
width: 382px;
height: 400px;
position: absolute;
top: 558px;
}
#featured2 {
width: 382px;
height: 400px;
}
#featured3 {
width: 382px;
height: 400px;
}
#featured4 {
width: 382px;
height: 400px;
}
#footer {
clear:left;
width: 1200px;
height: 223px;
background-image:url(images/Gedichten_layout_26.jpg);
}
For some reason, no matter how I change the properties of the “content” division, it keeps being positioned the way it is. Making its position: absolute and top: xxx px does not change its position.
I’m also aware that this might be a wrong way to design a layout, using absolute positioning. I would do it with floating if I could, but that didn’t work either.
Just let me know if I you need additional information to solve this.
Thanks in advance, Wouter
But despite his, ahem, somewhat caustic approach, he does talk a lot of sense. In terms of what you want the end design to look like, I don’t think it’s bad at all - although possibly a little too heavy on large graphics and shadow effects, the graphics will add a lot of bytes to the download, and the shadow effects might cause you headaches coding them - but it doesn’t 
