SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BG Image repeats on the Right side only

    Could someone help me as to why the background image on this page, does not repeat-x on the left side and only repeats on the right side ?

    Code CSS:
    Style:
    #Serv {
        position: relative;
    	background:url('/construction/images/bg_services.jpg' repeat-x;
    	background-position: 24%;
    	overflow: hidden;
        margin: 78px 0 90px 268px;
    }

  2. #2
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a another question, about my page which is in construction. How is it known that the width of the page is 1160px ? If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    Could someone help me as to why the background image on this page, does not repeat-x on the left side and only repeats on the right side ?
    It's because you have a large margin set on that element, and a bg image does not show in an element's margin. You could use padding instead:

    Code:
    #Serv {
      background: url("/construction/images/bg_services.jpg") repeat-x scroll 24% 50% transparent;
      padding: 78px 0 90px 268px;
      overflow: hidden;
      position: relative;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    How is it known that the width of the page is 1160px ?
    Code:
    #wrapper {
      background: none repeat scroll 0 0 #000000;
      margin: 0 auto;
      min-height: 100%;
      overflow: hidden;
      position: relative;
      width: 1160px;
    }
    Not sure if that's what you are asking, but it seems like the obvious answer. The wrapper is set to that width.

  5. #5
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?
    I didn't know that margin could effect the BG image.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forgot to point out the quote in message #5 which remains unanswered, that is why there was no 'thank you' !

  8. #8
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph I'm hoping you had a response ?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If a header is taken out of a #wrapper and the #header had width:100% and that #header no longer is the complete width of the window, how can you fix this with width in pixels and if so how do you know what is the right width in pixels?
    The question is a bit hard to understand. My intitial response is:

    - if the header is set to width: 100% (or even if that isn't specified) it will be 100% width, as that's the normal behavior of a div. So the header will be the full width of the window, even if it doesn't appear so.
    - so "how can you fix this" doesn't really mean anything to me. Do you want a set width to it, or want it to exapnd the full viewport width? If the latter, you can give it a background color or bg image to show that it visually spans the whole width.

  10. #10
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the #header to expand to the full width of the page, because it's no longer within #wrapper. Width{100%} doesn't have any value because it's no longer the child or #wrapper. How can I resolve this ?

  11. #11
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    #header is expanding the full width of the page. It has a background color with the value #AAA.

  12. #12
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct, but it's not the full width of the page no longer. Scrolling horizontally shows the space to the right.

  13. #13
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm too busy to get involved right now, but here's a stripped down version of your page that demonstrates the problem and may help someone suggest a fix.
    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>Debugging Creative Sheep Header Width</title>
     
    <style type="text/css">
     
    	html, body {
    		height: 100%; /* reference for #wrapper min-height:100% */
    	}
     
    	body {
    		margin: 0;
    		padding: 0;
     
    	}
     
    /*===  Beginning of Layout Structure ===*/
    	#wrapper { /* do not set overflow:hidden; here, Opera will not comply */
    		width: 1160px;
    		min-height: 100%;
    		overflow: hidden;
    		margin: 0 auto;
    		background: #000000; /*BG color for #content*/
    		position: relative;
    		color: #fff;
    	}
     
    	#header {
    		min-height: 120px; /* 152px total w/ padding */
    		padding: 2px 0 12px; /* preserve space for #nav and uncollapse child margins */
    		background: #AAA;
    		width: 100%;
    	}
     
    </style>  
     
    </head>
     
    <body>
     
    <div id="header"><h2>#header</h2></div>
    <div id="wrapper"><h2>#wrapper</h2>When the viewport is narrower than #wrapper, the width of #header does not expand when scrolling to the right.</div>
     
    </body>
     
    </html>

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Victorinox.

    All that's needed is this:

    Code:
    #header {
      min-width: 1160px;
    }

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had originally put the width to 1160px, that didn't solve it. Thanxs!

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    When you narrow the viewport, it narrows the div set to width: 100%. But as you see, if you drag the scroll bar to the right, the div doesn't resize again. So setting that min-width prevents the div from growing smaller than the wrapper, which means the problem goes away. When you scroll right, you'll only ever be able to scroll are far right as the widest element goes.

  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)
    As it is right now you are getting a 134px scrolling distance right off the bat without any content reaching the bottom.

    You can prevent the #header height from being added to the #wrapper's
    min-height:100% by nesting an inner content div in the wrapper.

    Drag the wrapper underneath the header with a negative top margin then set RP on the header to layer it on top.

    Now pad out the top of the content div that is nested in the wrapper to push content below the header.

    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>Debugging Creative Sheep Header Width</title>
     
    <style type="text/css">
    html, body {
        height: 100%;/* reference for #wrapper min-height: 100% */
    }
    body {
        margin: 0;
        padding: 0;
    }
     
    /*=== 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;
    }
    #wrapper:after,  /* #wrapper:after for IE8 min-height:100% Fix*/
    #content:after { /* #content:after for Float Containment*/
        clear:both;
        content:"";
        display:block;
        height:1%;/*fix IE8 min-height:100% bug*/
        font-size:0;
    }
     
    /*===  Beginning of Layout Structure ===*/
    #header {
        position:relative;
        z-index:1;
        min-width: 1160px;
        min-height: 120px;/* 134px total w/ padding */
        padding: 2px 0 12px;/* preserve space for #nav and uncollapse child margins */
        background: #AAA;
    }
     
    #wrapper {/* do not set overflow: hidden; here, Opera will not comply */
        width: 1160px;
        min-height: 100%;
        margin: -134px auto 0;
        background: #000000;/*BG color for #content*/
        position: relative;
        color: #fff;
    }
    #content {
        min-height:0;/*IE7 haslayout*/
        padding:134px 0 0;
    }
     
    </style> 
     
    </head>
    <body>
     
    <div id="header">
        <h2>#header</h2>
    </div>
     
    <div id="wrapper">
        <div id="content">
            <h2>#wrapper</h2>
            When the viewport is narrower than #wrapper, the width of #header does not expand when scrolling to the right.
        </div>
    </div>
     
    </body>
     
    </html>


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
  •