Results 1 to 7 of 7

Thread: CSS + Your Opinions

  1. #1
    Cable Guy Jonny M's Avatar
    Join Date
    Jul 2003
    Location
    Loughborough Uni
    Posts
    4,263
    Thanks
    0
    Thanked
    4 times in 1 post

    CSS + Your Opinions

    http://www.jonny-m.net/dofe

    Style sheet at:

    http://www.jonny-m.net/dofe/style.css

    At the moment the height value of the blue bar on the left (#sidebar) is set to 1000 pixels, can I make this so it fits the contents? I tried 100% but that just makes it fit to the browser window, and then scrolls up the screen.

    Secondly, this is my first decent stab at CSS and XHTML, so any input is appriciated.

    Thanks

  2. #2
    Senior Member Shad's Avatar
    Join Date
    Jul 2003
    Location
    In front
    Posts
    2,773
    Thanks
    22
    Thanked
    40 times in 24 posts
    If you set the height of the <html> and <body> tags (using css) to be 100%, then your divs should stretch to full browser height when there's no content.
    Simon


  3. #3
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    I'm afraid CSS doesn't work like that. It would be 100% of the containing object which in this case is the screen and would therefore not work. There are two hacks, one is a more complicate javascript apporach that measures the height of all divs on screen and sets the height accordingly. The alternative is to do what you have done Caged and specify an over-large height in pixels.

    However you can get around this with some creative application of your style sheets in some instances and in yours it would work as you dont have a pattern in the background of the left column. Just make the page background the same colour as the left bar and then have one div for the left with no background and on for the right that takes up most of the screen and has a white background. This will work in all instances where the content on the main white section is larger in height than the left.

    Apparently the W3C are looking at the box model for CSS3 to help provide a "proper" 100% height but it'll be a while (if ever) before IE supports it

    For some really useful CSS tips have a look at http://www.alistapart.com or http://www.glish.com/css

  4. #4
    Senior Member Shad's Avatar
    Join Date
    Jul 2003
    Location
    In front
    Posts
    2,773
    Thanks
    22
    Thanked
    40 times in 24 posts
    Well it worked on my site, although it uses a tables rather than divs (old school ). Click the link below and have a look at the source.
    Simon


  5. #5
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    Tables do treat 100% as 100% for the content but this also affects every other column in the same row as you would expect. Using div tags to replicate table columns is a common process but the divs are not related to each other so the height attribute is dependant on the content within each div, not of the tallest div.

    In short it's a pain in the ass to get all div columns to be the same height Tables do have their uses, but they are being phased out for layout purposes. Looking at your site Shad it's an ideal candidate to be converted into full CSS. It would give you compliance across all browsers and make it easier to modify the design. It'll also make you lose all your hair trying to get the damn things to work

  6. #6
    '~'+'~' Enverex's Avatar
    Join Date
    Oct 2003
    Location
    West Midlands
    Posts
    904
    Thanks
    0
    Thanked
    0 times in 0 posts
    • Enverex's system
      • Motherboard:
      • Gigabyte H77n-WiFi
      • CPU:
      • Intel i5-3570K with Scythe Shuriken
      • Memory:
      • 16GB Crucial Ballistix Tactical 1600Mhz
      • Storage:
      • Samsung 840 500GB SSD
      • Graphics card(s):
      • MSI GTX 670 2GB OC Power Edition
      • PSU:
      • EVGA SuperNOVA 550W G2
      • Case:
      • Silverstone Sugo SG11
      • Operating System:
      • Windows 10 Pro 64bit
      • Monitor(s):
      • LG 42LW550T 42" TV
      • Internet:
      • BT Infinity
    My site was a nightmare trying to get everything to line up properly when I first put the site together using CSS. It still doesn't line up correctly now as if I line it up on IE then the side bars are 1px too high on Mozilla, and vice versa.

    Also, is there any way to add a max size to it? Because at 1600x1200 the text is a little streched and makes it look empty....

    NS

  7. #7
    Senior Member Shad's Avatar
    Join Date
    Jul 2003
    Location
    In front
    Posts
    2,773
    Thanks
    22
    Thanked
    40 times in 24 posts
    Hehe Az

    The site works in Mozilla 1.5, Opera 7.2, Safari and IE on Mac as it stands, so I can't see much point in turning it on its head and moving to CSS.

    It would be an interesting excercise one day though. I need to rewrite the back end in .NET so I've some hope of migrating our software at work
    Simon


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
  •