check this code, tell me whats wrong

liunx · Jan 11, 2008

well, im back again.
i tried making a simple layout, as thats where i am having horrible problems. i check on all 3 browsers, and each time has probelms, if i use mozilla it looks fine, but then looks bad in ie. if look good in ie-then bad in mozilla. take a look...its all in the positioning.absolute,top,left stuff. if you could give me some pointers that would be great!its nothing special, just trying to figure out my positioning.. thx!

//////////CSS
#mainbody
.a:hover{color:red}
.a:visited{color:blue}

#Top{position:relative; top:0px; width:100%; background-color: #69c08a; height:50px; text-align:center;}
.h1{font-size:32pt;}

#Left{position:absolute;top:75px; height:500px; width:20%; background-color:#bfe2f9;}

#Middle{position:absolute;top:75px; left:20%; height:500px; width:60%; background-color:#fff99d;}

#Right{position:absolute;top:75px; left:80%; height:500px; width:19%; background-color:#bfe2f9;}

#Footer{position:relati

//////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" />

<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"main.css"/>
<title>My Test Page</title>
</head>
<body>


#Footer{position:relati
i take it there's more to that file?

what exactly is wrong with it that you want to be changed?sry, got cut off...

#Footer{position:relative; top:505px; height:60px; width:100%; background-color:red;}

'really there isnt much i can say about it. it just doesnt work. if you put it into files and load them in mozilla and ie, you will c what i mean. or you can look at the code,and im pretty sure you could see something wrong. its just looks different in each browser. thx for fixin so far. i can explain more if you need it.my top and footer are relative...
should it all be absolute?? or should there be a bit of both? i guess my real question is.. how do you guys do layouts, and get it to set up nicely? using relative, absolute and fixed? and, in what situations should i use which??

sry for double post.
but thx!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Booooze layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

</style>

</head>
<body>
<div id="Top">
<h1>THIS IS MY TITLE, YOU CAN PUT PIC HERE</h1>
</div>

<div id="container">
<div id="Left">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link lHere</a>
</div>

<div id="Middle">
<p>This is all text This is all text This is all text This is all text This is all text
This is all text This is all text This is all text This is all text This is all text This is all text
This is all text This is all text This is all text This is all text This is all text This is all text This is

all text This is all text This is all text This is all text</p>
</div>

<div id="Right">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link rHere</a>
</div>
</div>
<div id="Footer">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.google.ca">Link fHere</a>
</div>
</body>
</html>

If you add borders or margins adjust the widths accordingly.thank you!!!!
that solved my probelm

and i think i got the hang of it now.
im gonna practice some more and make some newer more advanced layouts. just one question..

why did you add the container??
is it because it then sets it all to 100% and you can use other div's inside it?because when i did it without container, and 100% width, i got a scrollbar at the bottom, which i did not like. my answer isnt very technical

...lol, but thx!!#container controls the width of the 3 floated divs, preventing them from exceeding the width of the window and hence the scrollbar.

check this code, tell me whats wrong

liunx

Guest