SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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">
    &ldquo;Your Affordable Web Solution!&rdquo;
    </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.
    Attached Images Attached Images

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One way to close those gaps is pulling them up with negative margins:

    Code CSS:
    #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 :-)
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    p{margin:0;}
    So either that margin to 0 or..
    Code:
    #content_mdl{padding:1px 0}/*vertical*/}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Good luck . If you have any questions feel free to ask again.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is your complete layout - The code is 100&#37; valid HTML & CSS. It's cross - browser compatiable all the way down to IE 5.5.


    Enjoy........



    Code HTML4Strict:
      <!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>
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    That wasn't needed Blake, his code isn't that bad
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Off Topic:

    That wasn't needed Blake, his code isn't that bad
    Right...........
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  10. #10
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cgacfox View Post
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •