SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    usa
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to design CSS Web pages to fit all screen resolutions?

    Designing web pages using tables to allow pages to scale to fit all screen resolutions is pretty straight forward. But how do achieve the same purpose using CSS without tables?

  2. #2
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <style>
    #header {
         width: 85%;
         height: 90px;
         background: #000 url(/path/to/img.png) repeat-x;
    }
    </style>
    
    <div id="header">&nbsp;</div>
    You can just use percentages if you want a liquid design or you can just have a fixed-width design of 779px (I think?) which won't show scroll bars at 800x600 resolutions.

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

    As mentioned by Cameron above you just design your page with percentages the same as you would with a table.

    You can have some fixed width elements if you want but as long as one main section is fluid you will get a degree of fluidity as well. If you look at the 3 col layout example at the top of the threads you will see that the page can be resized to almost any size without scrollbars appearing.

    Although that one is a rather complicated example and I wouldn't recommend starting with it, it should give you the idea.

    If you want more specific or relevant advice then we will need to know a bit more about your requirements or see what you are trying to do etc.

    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
  •