SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    white space along right side - creates a scroll


  2. #2
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know it my left padding:

    #content{
    float: left;
    width: 100%;
    padding:15px 0 0 25px; margin: 0;
    }

    but I don't know why it's doing.

    if I take it down to 0 it's fine but I want that 25 padding-left

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,597
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bades View Post
    but I don't know why it's doing.
    Padding is added to width, so your #content div is wider than 100%. You don't need the width setting or the float. Just use this:

    Code:
    #content{
    	padding:15px 0 0 25px; 
            margin: 0;
    }

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem is without #content having a width if you were to make the website skinny it pushes the image slidshow down below all the text and i dont want that to happen.

    ** Never mind it is working now **

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bades View Post
    if I take it down to 0 it's fine but I want that 25 padding-left
    Because you make your content div 100% + 25px Why not add 25px margin to your text div so 95px instead of 70:
    Code CSS:
    #text {
        width:450px;
        margin-left: 95px;
        padding-left:20px;
        float: left;
        display: inline; 
        background-color:white;
        border:1px solid #DFD7DC;
        font-family:Arial;
        font-size:10pt;
    }

    better to use padding and margins on the floating divs instead of the holding container.

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what you're saying donboe, thanks

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any reason when you make the site shorter the slideshow goes over the footer.

    Weird thing is it doesn't happen in firefox

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In which browsers does this happen?

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You have three threads going on this same page now. The problems in all of your threads stem from a faulty sticky footer layout. Just stick with one thread and we will help you work out the bugs.

    1.) Have a read through the FAQ to get a good foundation of how a proper sticky footer works.

    FAQ : How do you put a sticky footer at the bottom of the window?

    There are two different ways to handle the footer, but the footer still sits outside of the wrapper div with each method.

    Top Border Soak Up Method
    Negative Margin Footer Pull Method

    2.) After reading and understanding the link above you will be able to eliminate the non semantic divs you are using such as:

    <div class="clearfooter"></div>

    You don't need to set floats with 100% widths on your #content and #footer divs either. As I mentioned already the reason you had to set 100% widths was to keep your floats from shrinkwrapping, and that was done when they did not even need to be floated. Block elements (divs) are 100% width by default so the only time you might need to set 100% width would be for haslayout in IE. There are other haslayout triggers though when that causes problems with padding etc.

    3.) The problems your having right now in this thread are still due to the 100% widths. Your two floats are not being contained in your #content div now either. That is why they would have been spilling over the footer.

    4.) It is important to get the Opera and IE8 min-height bug fixes in place. Once that is done your #content div will be containing it's floats and a lot of your other issues will be resolved at the same time.

    Here is a starting point of a working layout that is similar to what you are doing with your page. It has all the bug fixes in place with min-widths on #wrapper and #footer.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Full Width Sticky Footer</title>
     
    <style type="text/css">
    html, body {
        height:100%; 
    }
    body {
        margin:0;
        padding:0;
        font:100%/1.3 arial, helvetica, sans-serif;
    }  
    h1,h2 {
        margin:0; 
        padding:10px 0; 
        text-align:center;
        font-size:1.6em;
    }
    h2 {font-size:1.4em;}
     
    p {margin:10px;} 
     
    /*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
    body:before {/*Opera min-height 100% Fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*Another Opera fix*/
    }
    #wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /* #content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*IE8 min-height:100% bug fix*/
        font-size:0;
    }
     
    #wrapper {
        min-height:100%;
        min-width:1020px;
        margin-top:-60px;/* pull it through the top of the viewport (same as footer height)*/
        background:#CCC;
    }
    * html #wrapper {height:100%;} /* height = "min-height" in IE6 */
     
    #header {
        height:120px;/*100px with bottom border*/
        border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
        border-bottom:1px solid #000;
        background:#959595;
    }
    #content {
        min-height:0;/*haslayout IE7 = (float containment)*/
        padding:0 50px 50px;
    }
    * html #content {display:inline-block;}/*haslayout IE6 = (float containment)*/
     
    .left,.right {
        float:left;
        width:48%;
        background:#FFF;
        text-align:justify;
        line-height:1.6;
    }
    .right {
        float:right;
    }
    #footer {
        height:59px;
        min-width:1020px;
        overflow:hidden;
        border-top:1px solid #000;
        background:#959595;
    }
    #footer p {
        text-align:center;
        font-weight:bold;
    }
    </style>
     
    </head>
    <body>    
     
    <div id="wrapper">
        <div id="header">
            <h1>Full Width Sticky Footer</h1>
        </div>  
        <div id="content">
            <h2>Page Title</h2>
            <div class="left">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus.</p>
            </div>
            <div class="right">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
                lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
                adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
                sociis natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus.</p>
            </div>         
        </div>
    </div>
    <div id="footer">
        <p>Footer Stuff</p>
    </div>  
     
    </body>
    </html>

  10. #10
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    put another div under #content and add padding to this div.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barsha View Post
    put another div under #content and add padding to this div.
    Unfortunately that will not solve the problem and it is just adding useless markup in the html. The FAQ link I posted above will explain how to build a proper sticky footer.

  12. #12
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the patience guys, it seems every time I change something, somethign else breaks.

    Should I not use any padding or margin on my content div, is that bad practice? I'm trying to clean up my style sheet.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Should I not use any padding or margin on my content div, is that bad practice? I'm trying to clean up my style sheet.
    It not bad practice, you just can't add side paddings to 100% width as Ralph pointed out. As long as your not supporting IE5 (which is not needed these days) then you won't have problems either.

    You failed to readjust your min-width on #wrapper and #footer after you added the side padding to #content. You just have to keep up with what your doing, it's called the box model. Margins, paddings, borders and widths all must be taken into account for the total dimensions.

    You still have other problems in IE8 and Opera though as I pointed out above.

    I have pulled your files down, let me go through and clean them up and I will post back.

  14. #14
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm at work atm so I haven't been able to make any changes just yet, and at work all I have is IE7 so I can't do much here.

    I'm not sure if my site design is a bit whacky?

    I basically have/want a fixed width site, but if the user widens their browser I want the header, body bkg-img, and footer to repeat to the right.

    This is only my second website, so a lot is being thrown at me, just trying to soak it all in and understand!

    I just read alll about the box model so that really helped, thanks!

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Okay, the first thing we needed to do was clean up the html and get a strict doctype on it.

    You don't need to be building new pages with transitional doctypes, they are not in transition, they are new pages. A strict doctype will enforce proper markup.

    I will post back with the CSS shortly, for now you will see that I cleaned out unnecessary divs in the #nav and that
    empty .clearfooter div that I mentioned earlier.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
     
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="page.css" rel="stylesheet" type="text/css" media="screen">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="scripts/menu.js"></script>   
        <title>Splendid Fare Catering</title>
    </head> 
     
    <body> 
    <div id="wrapper">
        <div id="header">
            <p class="logo"><a href="index.html" title="Splendid Fare Catering Logo"></a></p>
            <p class="glasses"></p>
            <p class="swirl"></p>           
            <ul id="main">
                <li><a class="home" href="index.html"><span>home</span></a></li>    
                <li><a class="about" href="about.html"><span>about</span></a></li>        
                <li><a class="events" href="events.html"><span>events</span></a></li>
                <li><a class="partners" href="partners.html"><span>partners</span></a></li>
                <li><a class="contact" href="contact.html"><span>contact</span></a></li>
                <li><a class="testimonials" href="testimonials.html"><span>testimonials</span></a></li>
            </ul>    
        </div><!--  End header  -->
     
        <div id="content">
            <h1>Welcome</h1>
            <div id="underline"></div>
            <div id="tagline">
                Make sure to check out our <a href="/cater/docs/thanksgiving.pdf">Thanksgiving flyer</a> for menu and prices!
            </div>
            <h2>
                Splendid Fare Catering provides clients throughout the Northeast 
                Ohio area with professional full-service catering and event planning.
            </h2>
     
            <div id="text">
                <p>Since 1981, our imaginative approach to catering has served a variety of social and 
                corporate clients including but not limited to:</p> 
                <ul>
                    <li>cocktail parties</li>
                    <li>buffets and plated dinners</li>
                    <li>weddings</li>
                    <li>social and corporate celebrations</li>
                </ul> 
                <p>Our reputation for exciting food begins with our philosophy of utilizing regional and 
                seasonal foods, continues as we create tantalizing menus drawn from world cuisines, and 
                culminates in distinctive design.</p>
                <hr>
                <p>Call us for fabulous stress free entertaining!</p>
                <ul id="contact">
                    <li>Susan Parish Schwab, chef/owner</li>
                    <li>splendidfarecatering.com</li>
                    <li>330.836.6346</li>
                    <li class="email"><a href = "mailto:spfare@hotmail.com">spfare@hotmail.com</a></li>
                </ul>
            </div>                   
            <div id="slideshow">
                <img class="picstyle1" src="/cater/images/1.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/2.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/3.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/4.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/5.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/6.jpg" alt="#">
                <img class="picstyle1" src="/cater/images/7.jpg" alt="#">
            </div>
        </div><!--  End content  -->
    </div><!-- End of wrapper -->
     
    <div id="footer">
        <div id="cs_logo">
            <a href="http://www.catersource.com"><img src="site_images/catersource.png" alt="#"></a>
        </div>
        <ul id="info">
            <li>Splendid Fare Catering Inc.</li>
            <li>All Rights Reserved 2010</li>
            <li>Medina, Ohio</li>
        </ul>
    </div>
     
    </body> 
    </html>

  16. #16
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see you took out <div id="nav_right">

    That's the div I setup with a bkg-img to repeat-x in my CSS, so the nav bar extends out.

  17. #17
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ Yeah, that div was not needed. The only reason you had it there to continue the BG image was because you had set a fixed width on your nav. Let it default to 100% width and the BG image will continue on without an extra div.

    I also removed the <div id="underline"></div> and moved that BG image to the h1. Be sure to remove that div from your html as I can't edit the code above now.

    Here is your reworked CSS with all major issues taken care of. There are still some things I don't like about the nav spans being set to display:none but we can cover that later on. It needs a real image replacement technique.

    page.css

    Code CSS:
    body, html {
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        font:100%/1.3 arial, helvetica, sans-serif;
    }
    /* some small resets */
    h1,h2,p,ul,ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    img {
        border:0 none;
    }
     
    /*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
    body:before {/*Opera min-height 100% Fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/*Another Opera fix*/
    }
    #wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /* #content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*IE8 min-height:100% bug fix*/
        font-size:0;
    }
     
    #wrapper {
        min-height: 100%;
        min-width: 1020px;/*stop BG from clipping (and float drop in #content)*/
        margin-top:-60px;/* pull it through the top of the viewport (same as footer height)*/
        background: url(site_images/bkg.png);
    }
    * html #wrapper {height:100%;} /* height = "min-height" in IE6 */
     
    /*  Header  */
    #header {
        height:170px; /*.swirl height + #nav height (haslayout IE)*/
        position:relative;/*containg block for AP children*/
        border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
        background: #51504e;
    }
    .logo {
        height: 128px;/*was 132px (give some space between nav anchors)*/
        width: 358px;
        position: absolute;
        top:0; left:0;
        background: url(site_images/logo.png) no-repeat;
    }
        .logo a {
            display:block;
            height: 100%;
            width: 100%;
        }
    .glasses {
        height: 166px;
        width: 361px;
        position: absolute;
        top:0; left:660px; /* 685px;*/
        background: url(site_images/shrimp.png) no-repeat;
    }
     
    #header .swirl {
        height:131px; /*this positions nav to the bottom*/
        background: url(site_images/header.gif) repeat-x;
    }
     
    /*  Navigation  */
    #main {
        height: 39px;
        background: url(site_images/nav_extra.gif) repeat-x;
    }
    #main span {
        display: none;
    }
    #main li, #main li a {
        float: left;
    }
    #main li a {
        height: 39px;
        background: url(site_images/nav_sprite.jpg) no-repeat;
    }
    #main li a.home {
        background-position: 0px 0px;
        width: 48px;
    }
    #main li a:hover.home {
        background-position: 0px -39px;
        width: 48px;
    }
    #main li a:active.home {
        background-position: 0px -78px;
        width: 48px;
    }
    #main li a.about {
        background-position: -48px 0px;
        width: 87px;
    }
    #main li a:hover.about {
        background-position: -48px -39px;
        width: 87px;
    }
    #main li a:active.about {
        background-position: -48px -78px;
        width: 87px;
    }
    #main li a.events {
        background-position: -135px 0px;
        width: 86px;
    }
    #main li a:hover.events {
        background-position: -135px -39px;
        width: 86px;
    }
    #main li a:active.events {
        background-position: -135px -78px;
        width: 86px;
    }
    #main li a.partners {
        background-position: -221px 0px;
        width: 97px;
    }
    #main li a:hover.partners {
        background-position: -221px -39px;
        width: 97px;
    }
    #main li a:active.partners {
        background-position: -221px -78px;
        width: 97px;
    }
    #main li a.contact {
        background-position: -318px 0px;
        width: 99px;
    }
    #main li a:hover.contact {
        background-position: -318px -39px;
        width: 99px;
    }
    #main li a:active.contact {
        background-position: -318px -78px;
        width: 99px;
    }
    #main li a.testimonials {
        background-position: -417px 0px;
        width: 126px;
    }
    #main li a:hover.testimonials {
        background-position: -417px -39px;
        width: 126px;
    }
    #main li a:active.testimonials {
        background-position: -417px -78px;
        width: 126px;
    }
    /*  Submenu  */
    /* Make submenu not appear until hover is initiated #main li ul {
        position: absolute;
        margin-left: 0 0 0 -1px;
    }
    #sub {
        position: absolute;
        margin-left: 0 0 0 -1px;
    }
    .sublink {
        margin-left: -9999px;
    }
    /* This is how the submenu <ul> will be displayed #main li:hover ul {
        display: block;
        position: absolute;
        margin: 0;
        padding: 0;
    }
    */
    /* This is how the <li> of the submenu will be displayed, float:none is breaking the horizontal rule and putting it in a vertial order*/
    #main li:hover li {
        float: none;
    }
    /* Style for submenu text */
    #sub a {
        background-image: none;
        background-color: #51504e;
        display: block;
        font-family: Arial;
        font-size: 10pt;
        color: white;
        border: 1px solid #111;
        width: 75px;
        height: 30px;
        padding-left: 5px;
    }
    #sub a:hover {
        background-color: #826579;
    }
    /* fix ie6 small issue */
    /* we should always avoid using hack like this */
     
    *html #main_nav ul {
        margin: 0 0 0 -2px;
    }
    #main #sub li a {
        background-image: none;
    }
     
    /* Content */
    #content {
        min-height:0;/*haslayout IE7 = (float containment)*/
        padding: 15px 0 25px 25px;
        /*background:red;*/
        position:relative;/*containg block for AP children*/
    }
    * html #content {display:inline-block;}/*haslayout IE6 = (float containment)*/
     
    h1 {
        width: 300px;
        font: 30pt/1.3 "Apple Chancery";
        padding: 0 0 23px 23px; /*bottom padding for BG image*/
        margin: 0 0 15px 50px;
        color: #826579;
        font-weight: 100;
        letter-spacing: 4px;
        background: url(site_images/underline.png) no-repeat 0 100%;
    }
    /*#underline {
        moved to h1 background
    }*/
     
    #tagline {
        position: absolute;
        top: 90px; /*265px;*/
        left: 655px;
        width: 300px; /*316px total*/
        padding: 8px;
        /*height: 37px;*/
        background: #faf8fa;
        font-family: Geneva, Arial;
        font-size: 10pt;
        text-align: center;
    }
    h2 {
        font-family: Geneva, Arial;
        font-size: 9.5pt;
        font-weight: 125;
        text-align: center;
        padding: 10px 0 0 56px;
        margin-bottom: 30px;
        width: 500px;
    }
    #text {
        float: left;
        width: 450px; /*562px total box*/
        margin: 0px 0 0 70px;
        padding:0 20px 10px;
        font: .8em/1.3 arial, helvetica, sans-serif;
        background: #FFF;
        border: 1px solid #dfd7dc;
    }
        #text p {
            margin:1em 0;
        }
        #text ul {
            padding:0 0 0 3em;
            list-style:disc;
        }
        ul#contact {
            list-style:none;
        }
        #text hr {
            /*width: 400px;
            margin-left: 10px;*/
            background: #826579;
            color: #826579;
        }
     
    #slideshow {
        float: left;
        width: 316px; /*386px total box*/
        height: 416px;
        margin: 0px 0 0 70px;
        overflow: hidden;
    }
    #slideshow img {
        position: absolute;
    }
    #slideshow .picstyle1 {
        border: 8px solid #4a4743;
        width: 300px;
        height: 400px;
    }
     
     
    /* FOOTER */
    #footer {
        height: 58px; /*60px total*/
        min-width: 1020px;/*stop BG from clipping*/
        border-top: 2px solid #96cfbf;
        background: url(site_images/grad_bot.gif) repeat-x;
        overflow:hidden;
    }
    #cs_logo {
        float: left;
        width: 205px;
        height: 32px;
        margin: 10px 0 0 10px;
        display:inline; /*IE6*/
    }
    #info {
        float: right;
        margin:8px 10px 0 0;
    }
    #info li {
        color: #FFF;
        text-align: right;
        font:bold 11px/1.2 "Century Gothic";
    }

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh and one more thing, the problem which you described in your thread title
    "white space along right side - creates a scroll"
    was caused by your left:685px; position of the .glasses div.

    It exceeded the min-width of the page, you gotta do your math correctly!

    Code:
    .glasses {
        height: 166px;
        width: 361px;
        position: absolute;
        top:0; left:660px; /* 685px;*/
        background: url(site_images/shrimp.png) no-repeat;
    }

  19. #19
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K I replaced my html and css...


    still dont quite get this one though.

    #header {
    height:170px; /*.swirl height + #nav height (haslayout IE)*/
    position:relative;/*containg block for AP children*/
    border-top:60px solid red;/* reclaim the wrapper negative top margin footer soak-up */
    background: #51504e;
    }

    Some of that red border is now visible

  20. #20
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    still dont quite get this one though.

    Some of that red border is now visible
    Hi,
    As noted in the comment that top border is to reclaim the negative top margin on the #wrapper div.

    You have something wrong somewhere though. For one you are missing the < > brackets on your doctype and it is being ignored.

    I just got in a little while ago and I was reworking several other things too. I have removed a lot of the Absolute Positioning (AP) on that page and got those elements in the page flow.

    I also set a width on the #content div and centered it up in the #wrapper.

    I'll load the files up to my server here in a bit and show you what I have done with it. I think you will like the looks of it better.

  21. #21
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep put the brackets on and the red border went away, nice.

    It's nice to see your CSS you provided, I'm finally starting to see how things should layout and how other things affect each other.

    Sorry about all the confusion with the widths. I just learned about the box model today, so I never calculated an widths or heights before.

    I changed a few things around and they're posted now, I am curious to see what new changes you're talking about though!

  22. #22
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    What I did was set a 900px width along with 50px side paddings on the #content div. That makes it 1000px wide and then I centered it in the #wrapper so your content gets centered in the browser.

    I was able to just float the #text div and #slideshow div left and right respectively without a bunch of margins.

    Here is the page:
    http://www.css-lab.com/test/bades/test.html

    and the css:
    http://www.css-lab.com/test/bades/page.css

    You will also notice I did the same thing in the header. I set up an inner div and centered it with auto margins too. Then floated the logo and glass div left and right.

    The .swirl element was eliminated altogether and that BG image was moved to the full width #header div and it repeats left and right from the center. It would be nice if you could make that a seamless repeating image but as it is it lines up with the #content div.

    Those changes keep everything off the left side of the screen on wide monitors.

    The menu still needs some work but we can cross that bridge later. You also need to come up with a more descriptive H1 than just "Welcome". That won't do you any good with google or your seo.

  23. #23
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray, I'll check your pages out.

    As for the Swirls, I was trying to position the Shrimp over the repeat so you didnt see the line.

    But to be honest I could easily go back into photoshop and change it to make it seamless, just being a bit lazy I guess.

  24. #24
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just checked it out, looks good. To be honest I'm not quite sure why I set it up the way I did, ha, the site needs to be put up tomorrow, for a friend, but I might change it down the road, when I finish up the other pages.

    Thanks for all your help, I've learned a lot

    Now what about Nav li spans being display: none?

    Should they be like margin-left:-999em; ?

    Isn't it for SEO purposes or something?

  25. #25
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As for the Swirls, I was trying to position the Shrimp over the repeat so you didnt see the line.
    Yeah I knew you was trying to line it up on the right side for some reason that's why I set up the inner div in the header and just floated it right.

    I thought maybe you were trying to line it up with the slideshow on your version.

    Make it a seamless image and it will look better, we can always place the logo and the shrimp image to the far left and right of the page too if that's what your after.

    Now what about Nav li spans being display: none?

    Should they be like margin-left:-999em; ?

    Isn't it for SEO purposes or something?
    You should set up live text underneath the sprite nav so the page can still be navigated with images turned off.
    Sprite Nav with Replacement Text

    Gotta go eat now, I'll check back later


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
  •