infinite width without scrollbar

Discussion in 'HTML & Website Design' started by davidaneff, Dec 17, 2008.

  1. #1
    My site has 1000x600 pages but I'm wondering if it's possible to make infinite width horizontal bands (that stretch the full width of any window) without causing the browser create scroll bars.
    thanks!
     
    davidaneff, Dec 17, 2008 IP
  2. Yesideez

    Yesideez Peon

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    1000x600?

    The most popular size resolution is 1024x768 (about 50%) the next popular being 1280x1024 (about 30%)

    Does your site have a horizontal scroll bar at the bottom of each page?

    Must admit I've not a clue what you're actually asking!
     
    Yesideez, Dec 17, 2008 IP
  3. davidaneff

    davidaneff Peon

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    sorry, let me try again:
    I have a green band across the top of my page (on which I placed my company name.) I made that band by creating a solid colored image 1000 pixels wide. What I'm wondering is if I can make the band 1280 wide (or wider) without causing the browser to make scroll bars even if someone's screen resolution is only 1024x768. Basically I want the band to fill up the full width of any browser window no matter how high the resolution but never trigger scroll bar mechanism. I thought maybe there might be some sort of infinite width command that can be assigned to certain objects. I don't want to turn off the scroll bars entirely though because my content (not including the green band) is 1000 pixels wide.
    I hope that's more clear and not even more confusing?!
     
    davidaneff, Dec 18, 2008 IP
  4. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #4
    what you CAN do is use CSS to repeat the background image infinitely along the x-axis. That way the image could simply be 10px wide and stretch from here to Hawaii if your monitor was big enough.
     
    innovati, Dec 18, 2008 IP
  5. Yesideez

    Yesideez Peon

    Messages:
    196
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    As just mentioned - my website: pictureinthesky.net

    Notice the brown bar behind "homepage" title bar and the yellow bar behind the three boxes. I've used 19x23 images to do that and CSS has repeated the images for me creating an illusion of one long bar. (You can right-click that bar "View Background Image" and see it actual size)
    table.tblmenu th {
      background-image: url("../gfx/bgstrip2.gif");
    }
    Code (markup):
    That's the CSS from my site to make that happen.
     
    Yesideez, Dec 18, 2008 IP
  6. mythjs

    mythjs Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    yay. u can use the image as a background.
    
    * {padding: 0; margin: 0; }
    #header {width: 100%; background: green url('your-image-here') no-repeat top-left;}
    
    Code (markup):
    then

    
    <div id="header"></div>
    
    Code (markup):
    but this will make your company name unclickable
     
    mythjs, Dec 18, 2008 IP
  7. mythjs

    mythjs Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    yay. u can use the image as a background.
    
    * {padding: 0; margin: 0; }
    #header {width: 100%; height: 80px; background: green url('your-image-here') no-repeat top-left;}
    
    Code (markup):
    then

    
    <div id="header"></div>
    
    Code (markup):
    but this will make your company name unclickable
     
    mythjs, Dec 18, 2008 IP