Log in

View Full Version : Layout Problem =n00b=


pendejo11
02-01-2007, 10:36 AM
Hey guys,
I'm very new to CSS and webdesign itself. I've been trying to make a page for some time now.Problem is, somehow my div's dont seem to respond the way i want them to. That's probably due to the fact my CSS is..incomplete.I 've been searching everywhere on how to position everything correctly but somehow i haven't managed to produce the layout i want:( . Here's what i got so far

<!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" />
<style type="text/css">
#frame{
width: 840px;
margin: 0 auto;
}
#banner{
height: 90px;
}
#contentwrapper{
float: left;
width: 100%;
}
#left{float: left;
width: 180px;
margin-left: -840px;
}

</style>
<title>Untitled Document</title>
</head>

<body>
<div id="frame">
<div id="banner"><img src="images/Images/second_02.gif" width="618" height="83" alt="">
</div>

<div id="left"><img src="images/Images/second_01.gif"
" width="142" height="600" alt="">
</div>
<div id="contentwrapper"><iframe></iframe></div>
<div id="right"><img src="images/Images/second_03.gif" width="140" height="600" alt=""> </div>
<div id="foot">
<img src="images/Images/second_16.gif" width="618" height="54" alt="">
</div>

</div>

</body>
</html>

I want the Banner at the top middle position, the Left at the left, the Right at the right and the Foot at the bottom. The size of the images are correct, thats how i made the layout in photoshop, but i dont want my HTML/CSS layout to contain tables..anyone have a suggestion:confused:
jscheuer1
02-01-2007, 01:51 PM
This isn't XHTML so, don't use that DOCTYPE. For testing purposes, I used an image I had laying around. The height and width attributes were faithfully applied by the browser so, I had the same layout. I added title attributes just so that I could keep track of which image was what, these title attributes are not required:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#frame {
width: 840px;
margin: 0 auto;
}
#banner {
height: 90px;
width:618px;
margin:0 auto;
}
#left {
float: left;
width: 180px;
}
#right {
float:right;
}
#foot {
clear:both;
}
</style>
</head>
<body>
<div id="frame">
<div id="banner"><img src="plus.gif" width="618" height="83" alt="" title="banner">
</div>

<div id="left"><img src="plus.gif" width="142" height="600" alt="" title="left">
</div>
<div id="right"><img src="plus.gif" width="140" height="600" alt="" title="right"> </div>
<div id="contentwrapper"><iframe></iframe></div>
<div id="foot">
<img src="plus.gif" width="618" height="54" alt="" title="foot">
</div>

</div>

</body>
</html>