CSS height and width problems

Discussion in 'Web Design and Development' started by andyjamesnelson, Sep 30, 2008.

  1. andyjamesnelson macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #1
    Hey I was wondering if anyone can help me with an issue i am having with height and width.

    http://andyjamesnelson.co.uk/beatabet/

    If you can take a look at the this page and then the source / the css is embedded for the mo.

    For some reason I am getting horizontal and vertical scroll bars that seem to long?

    Why is this? What am I missing out or doing wrong with my code?

    Thanks, Andy
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    The horizontal part of it is due to a negative right value.
    Code:
    #contact p {
    ...
    	position:relative; [B]right:-350px[/B]; top:110px;
    }
    The vertical part is due to setting the height so long and a top setting.
    Code:
    #rightcol {
    ...
    	position:relative;[B] top:-726px[/B];
    }
    You'll need to work out better ways to layout the page than what you have so you don't get those extra scroll regions.
     
  3. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #3
    ok but why? I really dont get why at all...

    :(

    andy
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    To quickly see what's up, put
    Code:
    outline: 1px solid #f00; /*( very handy for debugging )*/
    on a few of your elements to see how far they are reaching. It's essentially a result of the box model being misused. When using properties like 'top' and 'right' it doesn't do quite what you think it's doing. I suggest reading up on the box model if you want a more detailed understanding.
     
  5. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #5
    ok cool i will try that - thanks for the tips.

    For some reason when I read about css I feel like I understand it and then when it comes to the actual implementation of layout I'm like what the hell...

    More practice I guess.

    Andy
     
  6. andyjamesnelson thread starter macrumors 6502

    Joined:
    Aug 24, 2003
    Location:
    Jacob's house
    #6
    ok thanks I sorted the problem - the outline trick is really useful for seeing how my contact paragraph had inherited width. and the height problem was due to my use of the relative position leaving an empty space at the bottom of the screen.

    thanks, again. andy
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Glad you figured it out. Outlining really is useful for layout issues. CSS is very simple on first appearance, and is actually easy to implement for the basic stuff. It's not until you start constructed more fanciful layouts that the "art" of CSS becomes more apparent.
     
  8. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #8
    Just a helpful hint... if you use Firefox, a good add-on called 'developer' has a lot of useful built in functions, such as outlining your block level elements, divs, etc, etc.

    If you want to have a look, its at https://addons.mozilla.org/en-US/firefox/addon/60
     

Share This Page