Help me plz [Archive] - CodingForums.com

Theteva

01-27-2012, 11:21 PM

Can someone help me fix my problem. as you see on my image a edge is sticking out.

Image

http://img840.imageshack.us/img840/8513/helpvkz.png

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>Epic</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div id="Header"></div>

<div id="wrapper">

<ul id="awesome-menu">
<li><a href="#home" class="home">Home</a></li>
<li><a href="#download" class="download">Download</a></li>
<li><a href="#store" class="store">Store</a></li>
<li><a href="#forum" class="forum">Forum</a></li>
<li><a href="#contact" class="contact">Contact</a></li>
</ul>

<div id="content">
</div>

</div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

#Header {
background-image:url(images/header%20top.png);
background-position:center top;
margin-top: 100px;
height: 280px;
width: 900px;
margin-left: auto;
margin-right:auto;
}

body {
}

ul#awesome-menu {
width: 900px;
margin: 0 auto;
padding: 0;
list-style: none;
background-position:center;
}

ul#awesome-menu li { display: inline; }

ul#awesome-menu li a {
display: block; float: left; height: 50px;
background-image:url(images/menu-sprite.png); text-indent: -9999px;
}

ul#awesome-menu li a.home {
width: 180px; background-position: 0 0;
}

ul#awesome-menu li a.download {
width: 180px; background-position: -180px 0;
}

ul#awesome-menu li a.store {
width: 180px; background-position: -360px 0;
}

ul#awesome-menu li a.forum {
width: 180px; background-position: -540px 0;
}

ul#awesome-menu li a.contact {
width: 180px; background-position: -720px 0;
}

ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
background-position: 0 -50px;
}

ul#awesome-menu li a.download:hover, ul#awesome-menu li a.download:focus {
background-position: -180px -50px;
}

ul#awesome-menu li a.store:hover, ul#awesome-menu li a.store:focus {
background-position: -360px -50px;
}

ul#awesome-menu li a.forum:hover, ul#awesome-menu li a.forum:focus {
background-position: -540px -50px;
}

ul#awesome-menu li a.contact:hover, ul#awesome-menu li a.contact:focus {
background-position: -720px -50px;
}

a { outline: none; }

#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#content {
background-color:#666666;
width:900px;
height:1000px;
border: 1px solid #333;
background-position:center;

}

Excavator

01-28-2012, 01:10 AM

Hello Theteva,
You just have that border on the wrong thing.
Your #wrapper is 900px wide. Inside that you have #content that becomes 902px wide when you add that border.

See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.

Then try making these changes to your CSS -
#Header {
height: 280px;
width: 900px;
margin: 100px auto 0;
background: url(images/header%20top.png);
border: 1px solid #333;
border-bottom: none;
}
#wrapper {
width: 900px;
margin: 0 auto;
border: 1px solid #333;
position: relative;
}
#content {
height: 1000px;
width: 900px;
/*border: 1px solid #333;*/
background: #666666;
}