Never Exact Measurements with Layout.

Discussion in 'Web Design and Development' started by Dal123, Nov 7, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I was punishing myself for not creating exact mock-up in photoshop but not to concerned about that now:
    as it seems it is never exactly the size anyway and such weird things happen. I'm working on my colour scheme at the moment and trying to add graphics for my sidebar; metallic/ polished concrete effect and created it exactly 200 px wide (as firefox developer toolbar said it was this size). For some reason I'm getting a larger border on my right. It's not like this in the image file, what could be causing this :confused:.
     

    Attached Files:

  2. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #2
    It just sprung to me; background-repeat:no-repeat; that was it :).
    One thing I don't get though is that I cannot find out exactly how big my sidebar is. I've tried 'element information' in developer tab (firefox) 'block size' shows everything but the sidebar size and for some reason it shows my footer as massive (vertical) but when it's viewed it's fine but have noticed it in IE. Mysterious?
     
  3. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #3
    glad to see you figured it out.

    One program that might be helpful...the name escapes me at the moment, but its pixel....somthing....err....

    anyways its an AIR application, so hopefully that'll help narrow it down.
    It basically measures anything that's on your screen and spits back the height and width in pixels.
     
  4. nuxx macrumors member

    nuxx

    Joined:
    Jun 5, 2007
    Location:
    Tokyo
    #4
    Because you've not explicitly set any dimensions for div#sidebar, but only it's child element ul#sidbar.

    Your browser will calculate the height and width of an element if you omit them. Safari shows the computed style for div#sidebar as

    Code:
    display: block;
    height: 0px;
    width: 900px;
    You could explicitly set the width and then float it:

    Code:
    #sidebar {
        width: 205px;
        float: right;
    }
    
    Additionally, you could also change the width of ul#sidbar and remove the float:

    Code:
    #sidbar {
        ........
        float: none;
        width: 100%;
    }
     
  5. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #5
    I'm a bit confused as I could obtain the measurements before I started playing around with it through the developer toolbar. :confused:
    I don't really want to set a specific height, as I'll probably mess it up lol, but I must say I'm a little to confused as why this is happening and why I can't obtain information regarding it's height when I obtained it before. As I found the height to be 784px as I designed the sidebar myself in Illustrator :confused:. Strange isn't it :eek:.
    Regards nuxx
     

Share This Page