SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help asap :S

    can anybody tell me why http://www.infinite-fire.net/work/rpg/ has a massive overscroll area? and how to get rid would be nice :P

  2. #2
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm not sure if this has anything to do with it, but i cant find the subject class that is called in this code...
    Code:
     <a href="4.html"><span class="subject">Do you want to add automatically daily updating articles to your site for free?</span></a><br />
     
     <a href="3.html"><span class="subject">Do you want to write EQ articles for money?</span></a><br />
    Edit:


    just noticed.... that class is also applied to almost every link on the page, yet i still cant find it in the CSS file
    Last edited by dbalsdon; Nov 18, 2003 at 14:15.
    Daniel Balsdon
    My Site

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

    The reason you have a large scroll area at the bottom of the page is because of this line in your html.
    Code:
    <div style="width: 275px; padding: 10px; right: 0px;position: relative; left: 350px; top: -765px;">
    You have taken the block from the bottom of the page and moved it 350px to the right and -765px from where it was. Obviously you did this to match the columns up. However when you use position relative an element is moved from where it was to the new co-ordinates entered but the space it previously occupied is preserved.

    That is to say that the rest of the document will act as if the element were still in its original position which is why you have a long vertical scroll area.

    To move an element independent of the rest of the document you should use position:absolute.
    e.g.
    Code:
    <div style="width: 275px; padding: 10px; right: 0px;position: absolute; left: 350px; top:70px; ;">
    You may need to adjust the top position to suit. (Your layout is very rigid and you may be better off floating the blocks instead to give you some fluidity, but it's your choice )

    Also it would be better if you put the styles in your stylesheet and not in the html, whicj will tidy things up a bit.

    Hope that helps.

    Paul

  4. #4
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah probably, i dont fully understand this float attribute at all, ive played about with it (curvy lines tutorials and such) but still am not confident enough to use it for anyone but myself

  5. #5
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, one last thing - can someone PLEASE, asap, tell me why there is a 1px horizontal scrollbar at 800x600???

    ive tried putting borders on all my divs, but nothing seems to be overflowing - thanks paul btw

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    can someone PLEASE, asap, tell me why there is a 1px horizontal scrollbar
    Hi you're getting a scrollbar early because of this style.
    Code:
    .content {
     width: 100%;
     padding: 5px;
    }
    100% + 5px makes the element 100% wide +10px which makes it too big for its container so you get a scroll bar.

    Leave out the 100% width as you don't really need it and it should be ok.

    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
  •