Hi again…I am re-working my business site from Flash to XHTML and CSS. I really need practice at CSS. I mocked up the site in Fireworks CS4, sliced it up and am now trying to get it to work correctly with CSS and XHTML. Could someone look over my code and tell me where I am going wrong?
I have sliced the content area as content_top, content_mdl, and content_btm. This is where all the content will go for the pages. I have gaps between the three sections that I can’t figure out how to get rid of. I know it will probably be something simple but I just can’t figure it out.
I have attached what the mockup is supposed to look like.
Here is the code 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=UTF-8” />
<title>mockup1</title>
<link rel=“stylesheet” type=“text/css” href=“css/foxden.css” media=“all” />
<!–[if IE]>
<style type=“text/css” media=“all”>.borderitem {border-style:solid;}</style>
<![endif]–>
</head>
<body>
<div id=“header_container”>
<div id=“header_wrapper”>
<div id=“header”>
<div id=“logo”>
<h1>Foxden Web Solutions</h1>
</div>
<div id=“top_text”>
“Your Affordable Web Solution!”
</div>
</div>
</div>
<div id=“nav_bg”>
<ul>
<li>Home</li>
<li>History</li>
<li>How Can We Help?</li>
<li>Design Pricing</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id=“content_container”>
<div id=“content_wrapper”>
<div id=“content_top”>
</div>
<div id=“content_mdl”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id=“content_btm”>
</div>
</div>
</div>
<div id=“footer”>
<p>Copyright 2010 Foxden Web Solutions</p>
<p>Home | History | How Can We Help? | Design Pricing | Portfolio | Contact</p>
</div>
</div>
</body>
</html>
body {
background-image: url(…/images/page_bg.png);
background-repeat: repeat;
}
h1 {
background: url(…/images/logo.png) no-repeat 130px 15px;
height:219px;
text-indent: -9999em;
margin: 0;
}
img {
border:0px;
}
#header_wrapper {
background-image: url(…/images/page_bg.png);
margin: auto;
padding: 0;
}
#header_container {
background-image: url(…/images/page_bg.png);
margin: auto;
padding: 0;
}
#header {
background-image: url(…/images/header_bg.png);
background-repeat: no-repeat;
height: 204px;
margin-top: 50px;
margin-left: 20px;
}
#top_text {
text-indent: -9999em;
position: absolute;
top: 135px;
right: 1em;
background: transparent url(…/images/top_txt.png) no-repeat;
height: 52px;
width: 595px;
left: 350px;
}
#nav_bg {
background-image: url(…/images/nav_bg.png);
background-repeat: no-repeat;
margin-left: 115px;
height: 117px;
}
#content_container {
margin: auto;
padding: 0;
}
#content_wrapper {
margin: auto;
padding: 0;
}
#content_top {
background-image: url(…/images/content_top.png);
background-repeat: no-repeat;
margin-left: 115px;
height: 35px;
}
#content_mdl {
background-image: url(…/images/content_mdl.png);
background-repeat: repeat-y;
margin-left: 115px;
}
p {
margin-left: 50px;
margin-right: 220px;
}
#content_btm {
background-image: url(…/images/content_btm.png);
background-repeat: no-repeat;
margin-left: 115px;
height: 19px;
}
#footer {
background-image: url(…/images/footer_bg.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 115px;
height: 57px;
clear: both;
}
#footer p {
margin: 0 0;
}
I have uploaded what I have to www.foxdenwebsolutions.com/CSS_site/index.html.