...

View Full Version : I am SOOO confused.



groog
07-21-2007, 11:30 PM
The site layout is completely messed up. I usually have this problem but I didn't always, I most be forgetting something.

http://groogstestpages.freehostia.com/computerturret/

I'm making this layout for a friend. For some reason the wrapper wont come completely over everything, if I get rid of the float: left; on the footer it does but the margin-top doesn't work and it's touching the menu. The news bar won't go all the way over even though I did the math and it should fit perfectly. I added 10px to the width but when I go into IE it moves down under the menu. I'm so confused! In IE the wrapper seems to work but all the tops of the menu and content are short. Here is my code-

HTML

<html>
<head>
<title>
ComputerTurret Home
</title>
<link href="ctstyle.css" rel="stylesheet" type="text/css">
<style type="text/css">
A:link {text-decoration: none; color: #fff;}
A:visited {text-decoration: none; #fff;}
A:active {text-decoration: none; #fff;}
A:hover {text-decoration: none; #fff;}
</style>
</head>
<body>

<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="left">
<div id="entertainment">
<div id="entertainment_top"><h1>Entertainment</h1></div>
<ul>
<li>Games</li>
<li>Animations</li>
<li>Graphics</li>
</ul>
</div>
<div id="help">
<div id="help_top"><h1>Help</h1></div>
<ul>
<li>Tutorials</li>
<li>Downloads</li>
<li>Articles</li>
</ul>
</div>
<div id="extra">
<div id="extra_top"><h1>Top</h1></div>
<ul>
<li><a href="computerturret.com">Home</a></li>
<li>Forum</li>
<li>Contact Us</li>
<li>Portal</li>
</ul>
</div>
</div>
<div id="right">
<div id="right_top"><h1>News</h1></div>
<div id="right_content">GROOG IS DONE WITH TEH LAYOUT!! w0000000et!</div>
</div>
</div>
<div id="footer"><h1> 2007 ComputerTurret.com</h1></div>
</div>

</body>
</head>

CSS

body {
font-family: verdana, arial;
font-size: 12px;
text-align:center;
color: #fff;
background-color: #000;
}

#wrapper {
margin: 0px auto;
border: 1px solid #fff;
text-align: left;
padding: 5px;
width: 800px;
}

#header {
border: 1px solid #fff;
width: 798px;
height: 100px;
background-image: url('images/header.png');
}

#content{
margin: 5px 0px 5px 0px;
}

#left {
float: left;
width: 180px;
border: 1px solid #fff;
}

#entertainment_top{
padding: 5px;
border-bottom: 1px solid #bbb;
width: 170px;
height: 15px;
background-image: url('images/top.png');
}

#help_top{
padding: 5px;
border-bottom: 1px solid #bbb;
width: 170px;
height: 15px;
background-image: url('images/top.png');
}

#extra_top{
padding: 5px;
width: 170px;
height: 15px;
border-bottom: 1px solid #bbb;
background-image: url('images/top.png');
}

ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul li {
padding: 5px;
padding-left: 10px;
border-bottom: 1px solid #bbb;
}

ul li:hover {
background-color: #444;
}

h1 {
margin: 0px;
padding: 0px;
color: #fff;
font-size: 12px;
font-weight: strong;
}

#right {
float: left;
border: 1px solid #fff;
margin-left: 5px;
width: 601px;
}

#right_top {
border-bottom: 1px solid #bbb;
background-image: url('images/top.png');
padding: 5px;
width: 591px;
height: 15px;
}

#right_content {
padding: 5px;
width: 591px;
}

#footer{
padding: 5px;
width: 790px;
float: left;
clear: both;
margin-top: 5px;
background-color: #444;
}

_Aerospace_Eng_
07-21-2007, 11:37 PM
For starters you have no doctype. Add this above your <html> tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
After doing that you need to clear your floats.
http://positioniseverything.net/easyclearing.html

groog
07-21-2007, 11:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Worked! I've seen this before but I don't understand it. What did it just do?

And things seem to work in IE but in FireFox the footer still is hugging the menu. How do I fix that?

Thanks for your help :D

_Aerospace_Eng_
07-21-2007, 11:59 PM
Read the article about clearing your floats. As to the doctype I suggest you read the sticky in this forum.

effpeetee
07-22-2007, 11:35 AM
Read the article about clearing your floats. As to the doctype I suggest you read the sticky in this forum.
http://positioniseverything.net/easyclearing.thml
Not Found
The requested URL /easyclearing.thml was not found on this server.


effpeetee

_Aerospace_Eng_
07-22-2007, 04:10 PM
Sorry about that though it should be obvious of what the url was.
http://positioniseverything.net/easyclearing.html

effpeetee
07-22-2007, 05:44 PM
Sorry about that though it should be obvious of what the url was.
http://positioniseverything.net/easyclearing.html

Yeah, it was obvious. It is a very good site.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum