Hi,
I am having some weird problems with my layout.
-please check the attached screenshot-
although the 2 buttons below the page are nested in the main layer(with the green background) they dont have the background??
my code is:
i couldnt figure out why the background end before the actual content is still displayed.
also there is a weird gap between the header and the main layer.
i'd really appreciate if someone can enlighten me on this
thanks.
//edit:
for some reason the [ html ] tags are being a bit messy.
please check http://pastebin.com/705214 instead.
I am having some weird problems with my layout.
-please check the attached screenshot-
although the 2 buttons below the page are nested in the main layer(with the green background) they dont have the background??
my code is:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>testing</title>
<style type="text/css">
body {
background: #fff;
text-align: center;
}
#wrap {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 700px;
}
#header {
text-align: right;
width: 700px;
height: 220px;
background: lime;
}
#main{
padding-left: 8px;
padding-right: 8px;
text-align: left;
color: #fff;
background: green;
}
#centered {
text-align: center;
}
#boxs {
width: 350px;
float: left;
margin-right: 20px;
}
#text {
width: 600px;
margin-bottom: 25px;
}
#main h2{
margin-bottom: 20px;
}
h1 {
padding-top: 130px;
margin-right: 20px;
font-size: 28pt;
}
h2 {
font-size: 20pt;
color: #fff;
}
.box {
width: 300px;
float: left;
padding: 5px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #92BED3;
background: #DDEAF0;
}
.box:hover {
border: 1px solid #62A0BF;
background: #F4F9FB;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>test</h1>
</div>
<div id="main">
<h2>heading</h2>
<div id="centered">
<div id="text">
"...Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut fermentum porta mi. Aliquam eu metus. Nullam porttitor velit sed purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mattis dapibus neque. Cras egestas, dui eu luctus gravida, tellus justo laoreet felis, ut ultricies mauris pede vitae pede. Vestibulum erat. Sed eros pede, dapibus sit amet, ultrices id, lobortis vel, velit. Aenean dui justo, fringilla sed, pulvinar quis, dapibus adipiscing, eros. Ut condimentum. Vestibulum ultricies sodales sapien. Morbi suscipit. In ut ligula ut orci congue interdum....."
</div>
<div class="box">
<a href="link1" title="1">
<span class="title">x</span><br />
</a>
</div>
<div class="box">
<a href="2" title="2">
<span class="title">x</span><br />
</a>
</div>
</div>
</div>
</div>
</body>
</html>i couldnt figure out why the background end before the actual content is still displayed.
also there is a weird gap between the header and the main layer.
i'd really appreciate if someone can enlighten me on this
thanks.
//edit:
for some reason the [ html ] tags are being a bit messy.
please check http://pastebin.com/705214 instead.
