www.webdeveloper.com
Results 1 to 4 of 4

Thread: Site scrolls down lower than my background image.

  1. #1
    Join Date
    Nov 2010
    Posts
    32

    Site scrolls down lower than my background image.

    Hi,

    I'm having a hard time finding out my site will allow users to scroll down past the bottom of my site.

    I don't have any hight settings or anything else i can see that would be pushing the scroll bar down.

    Its only doing this one one page

    www.wararmada(dot)com/screenshots

    Here is my css info for this page. I'd really appreciate your advice.

    Code:
    #gallerybox {
        filter:alpha(opacity=70);
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        position:absolute;
        top:230px;
        left:100px;
        width:900px;
        height:625px;
        background-color: #000; 
        left: 50%;
        margin-left: -450px;
    }
    
    .gallerycontainer{
        position: relative;
        width:900px;
        height:600px;
        margin-top:250px;
        left: 50%;
        margin-left: -430px;
    }
    
    .thumbnail img{
        border: 1px solid black;
    }
    
    .thumbnail:hover{
        background-color: transparent;
    }
    
    .thumbnail:hover img{
        border: 1px solid black;
    }
    
    .thumbnail span{
        position: absolute;
        background-color:#CCC;
        padding: 0px;
        left: -1000px;
        visibility: hidden;
        color: black;
        text-decoration: none;
    }
    
    .thumbnail span img{ 
        border-width: 0;
        padding: 2px;
    }
    
    .thumbnail:hover span{
        visibility: visible;
        top: 25px;
        left: 345px;
        z-index: 50;
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    That's how position works
    The elements height in the viewport is it's height + margin + top.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2010
    Posts
    32
    Ok i think i see where I've been going wrong then. Its not in my css but in my html code. All the height's of my images are being added together. That alone gives me around 1000px high. Am i running into the problem because I'm using position incorrectly?

    I've tried adding -1000px high to a new <li> tag but it doesn't negate the height of the others as i had expected.

    Thanks for any help or advice.

    HTML Code:
    <div class="gallerycontainer">
    <ul>
        <li><a class="thumbnail" href="pics/amafleet.jpg"><img src="pics/amafleet.jpg" width="150" height="100" border="0" />
        <span><img src="pics/amafleet.jpg" /><br />Amarr Fleet</span></a>
        
        <a class="thumbnail" href="pics/amafreighter.jpg"><img src="pics/amafreighter.jpg" width="150" height="100" border="0" />
        <span><img src="pics/amafreighter.jpg" /><br />Amarr Freighter</span></a></li>
        <br />
        <li><a class="thumbnail" href="pics/amatitian.jpg"><img src="pics/amatitian.jpg" width="150" height="100" border="0" />
        <span><img src="pics/amatitian.jpg" /><br />Amarr Titian</span></a>
        
       <a class="thumbnail" href="pics/calfleet.jpg"><img src="pics/calfleet.jpg" width="150" height="100" border="0" />
        <span><img src="pics/calfleet.jpg" /><br />Caldari Fleet</span></a></li>
        <br />
        <li><a class="thumbnail" href="pics/calfreight.jpg"><img src="pics/calfreight.jpg" width="150" height="100" border="0" />
        <span><img src="pics/calfreight.jpg" /><br />Caldari Freighter</span></a>
      
       <a class="thumbnail" href="pics/gal.jpg"><img src="pics/gal.jpg" width="150" height="100" border="0" />
        <span><img src="pics/gal.jpg" /><br />Gallente Fleet</span></a></li>
        <br />
        <li><a class="thumbnail" href="pics/galfreight.jpg"><img src="pics/galfreight.jpg" width="150" height="100" border="0" />
        <span><img src="pics/galfreight.jpg" /><br />Gallente Freighter</span></a>
        
        <a class="thumbnail" href="pics/galmo.jpg"><img src="pics/galmo.jpg" width="150" height="100" border="0" />
        <span><img src="pics/galmo.jpg" /><br />Gallente Mothership</span></a></li>
        <br />
        <li><a class="thumbnail" href="pics/minfreight.jpg"><img src="pics/minfreight.jpg" width="150" height="100" border="0" />
        <span><img src="pics/minfreight.jpg" /><br />Minmatar Freighter</span></a>
        
        <a class="thumbnail" href="pics/mintitian.jpg"><img src="pics/mintitian.jpg" width="150" height="100" border="0" />
        <span><img src="pics/mintitian.jpg" /><br />Minmatar Titian</span></a></li>
    </ul>
    </div>

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Just don't use positioning for this simple layout
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles