Need help positioning graphics with CSS

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.

One way to close those gaps is pulling them up with negative margins:


#content_top {
	background-image: url(../images/content_top.png);
	background-repeat: no-repeat;
	margin-left: 115px;
	height: 35px;
           margin-top:-50px;
}

#footer {
	background-image: url(../images/footer_bg.png);
	background-repeat: no-repeat;
	margin-top: -50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 115px;
	height: 57px;

}

There are other ways to do the lay out you want. I’m sure you’ll get other solutions also :slight_smile:

Hi, the default margins on the <p> elment are causing the margin collapse. Giving the containers of hte <p> a 1px vertical padding will fix this, or just set the margin of the <p> to 0

p{margin:0;}

So either that margin to 0 or…

#content_mdl{padding:1px 0}/*vertical*/}

Thanks guys…both worked. Now I go on to getting my buttons horizontally positioned! Wish me luck…I have 2 graphics…and “up” state and a “hover/down” state.

Good luck :). If you have any questions feel free to ask again.

Great. But you might consider using a reset, to avoid the margin problem in the future (sometimes you may want to have collapsing margins and sometimes not). Although the negative margins also do the trick, the reset is a cleaner solution. Any probs with the buttons, just let us know :smiley:

Here is your complete layout - The code is 100% valid HTML & CSS. It’s cross - browser compatiable all the way down to IE 5.5.

Enjoy… :slight_smile:

  <!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>
        <link href="foxden.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Foxden Web Solutions
        </title>
        <style type="text/css">
* {
    margin: 0;
    padding: 0; }
 
body {
    background:url('http://i46.tinypic.com/2wmq36e.png');
    text-align: center; }
 
#container {
    margin: 0 auto;
    text-align: left; /* IE5 hack */
    width: 1000px; }
 
#top_header {
    background:url('http://www.foxdenwebsolutions.com/CSS_site/images/header_bg.png');
    height: 205px;
    width: 1000px; }
 
#logo {
    float: left;
    padding: 10px 0 0 100px;
    width: 227px; }
 
#solution img {
    margin: 80px 0 0 0;
    padding-left: 10px; }
 
#top_menu {
    background:url('http://www.foxdenwebsolutions.com/CSS_site/images/nav_bg.png');
    height: 117px;
    margin: 0 0 0 96px;
    width: 808px; }
 
    #top_menu ul { padding: 60px 0 0 30px; }
 
    #top_menu li, a {
        color: #ac5201;
        display: inline;
        padding: 5px;
        text-decoration: none; }
 
#main_content {
    background:url('http://www.foxdenwebsolutions.com/CSS_site/images/content_top.png') no-repeat;
    height: 35px;
    margin: 0 0 0 96px;
    width: 808px; }
 
#inner_content {
    background:url('http://www.foxdenwebsolutions.com/CSS_site/images/content_mdl.png');
    margin: 0 0 0 96px;
    width: 808px; }
 
    #inner_content p {
        padding: 0 0 0 25px;
        width: 740px; }
 
#footer {
    background:url('http://www.foxdenwebsolutions.com/CSS_site/images/footer_bg.png') no-repeat;
    float: right;
    font-size: 12px;
    height: 57px;
    padding-top: 5px;
    width: 808px; }
 
    #footer ul { padding: 0 0 0 20px; }
 
    #footer li { display: inline; }
 

</style>
</head>
 <body>
<div id="container">
            <div id="top_header">
                <div id="logo">
                    <img src="http://www.foxdenwebsolutions.com/CSS_site/images/logo.png" alt="logo" width="227" height="169" />
                </div>
                <div id="solution">
                    <img src="http://www.foxdenwebsolutions.com/CSS_site/images/top_txt.png" alt="solution_text" width="600" height="43" />
                </div>
            </div><!--//end of top_header-->
            <div id="top_menu">

                <ul>
                    <li>
                        <a href="">Home</a>
                    </li>
                    <li>
                        <a href="">History</a>
                    </li>
                    <li>

                        <a href="">How can we help?</a>
                    </li>
                    <li>
                        <a href="">Design Pricing</a>
                    </li>
                    <li>
                        <a href="">Portfolio</a>

                    </li>
                    <li>
                        <a href="">Contact</a>
                    </li>
                </ul>
            </div><!--//end of top_menu-->
            <div id="main_content"></div>
            <div id="inner_content">

                <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. 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. 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 id="footer">
                    <p>
                        Copyright 2010 Foxden Web Solutions
                    </p>
                    <ul>
                        <li>
                            <a href="">Home</a>

                        </li>
                        <li>
                            <a href="">History</a>
                        </li>
                        <li>
                            <a href="">How can we help?</a>
                        </li>
                        <li>

                            <a href="">Design Pricing</a>
                        </li>
                        <li>
                            <a href="">Portfolio</a>
                        </li>
                        <li>
                            <a href="">Contact</a>

                        </li>
                    </ul>
                </div><!--//end of footer-->
            </div><!--//end of container-->
        </div>
    </body>
</html>


Off Topic:

That wasn’t needed Blake, his code isn’t that bad :slight_smile:

Right…

Actually I am a “her” and I do appreciate the help, Blake. However, I really need to learn to do this myself. I am getting better at CSS but still need to practice a LOT!!! It is not that easy for me to pick up. As I go through each problem that I encounter, I post it so that others that also don’t know CSS that well can follow along and learn with me.

It’s a learning curve but once you get the hang of things you can create more tricky sites :).

If you ever have question this forum has a wealth of knowledge to share :).