SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having a site with > 100% height

    Heya could someone please check out this and tell me why there appears a vertical scrollbar?

    Thanks a lot.

  2. #2
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also I noticed that when resizing the window the navigation links (with that hover effect) do not start a new line, instead they cause a horizontal scrollbar.

    How can I prevent that?

    Same goes for the content parts ("Willkommen", etc.). When resized they do not match up correctly anymore.

  3. #3
    SitePoint Member
    Join Date
    Oct 2004
    Location
    State College, PA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the structure.css file, remove the "height:100%" declaration from the "#outer" rule.

  4. #4
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope did not work.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Tim,

    Did you mean a horizontal scrollbar rather than a vertical one The vertical one is obvious, because you have too much content

    The horizontal scrollbar is caused mainly by the padding you have added to the left and right floats. You have mixed percentages and padding which don't add up and soon become too big for the window.

    Take out the padding and put it on an inner element.
    Code:
    #contentleft {
    width:70%;
    float:left;
    margin:0px;
    background:#ECFFFF;
    }
    #contentright {
    width:25%;
    float:right;
    background:#ECFFFF;
    }
    The top images not wrapping is because you have told them not to with white-space:nowrap here:
    Code:
    #navigation ul {
    margin:0px; 
    padding:0px; 
    white-space:nowrap;
    }
    Remove it and the images should wrap.

    You also need to look at the unbroken text in your right column which causes Ie to jump the float down. If you add some space between the words then the element will get a lot smaller before dropping.

    Hope that helps.

    Paul


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
  •