SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    diamond bar, ca
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Page Layout - how is it done

    I am trying to figure out how to diplay a constant banner heading at the top of each page in my site and have the additional page content load below it. It seems that when a page loads, the top part loads first and then the rest. Below are samples of sites I have seen that are displaying in the manner I am talking about:

    http://cgi.resourceindex.com/Programs_and_Scripts/Perl/

    http://www.website-promotion-ranking-services.com/

    Please advise. If one can tell me where to go on the internet to set up this format, I would be able to follow.

    Thanks

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

    I'm not sure I quite understand what this has to do with CSS and it also seems that you've answered your own question.
    It seems that when a page loads, the top part loads first and then the rest
    The sites you linked to just load their banners in a table at the top of their html. The page gets loaded in the order it is in the html and each table gets rendered in turn. Nested tables will take longer to render so a single table at the top of thepage will load before the other tables are rendered.

    Obviously images take longer to load than the rest of the page and the browser will sometimes load the rest of the page before finishing loading the images.

    Sorry, If i've misunderstood the question[img]images/smilies/smile.gif[/img]

    Paul

  3. #3
    SitePoint Member
    Join Date
    Sep 2003
    Location
    diamond bar, ca
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thank you verymuch for your reply. I understand what you are saying about the tables and the way they load.

    What I am trying to figure out is that when one uses CSS and they want the same header/banner to appear at the top of each page along with a logo and perhaps some text, how is this done using CSS.

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

    Without getting involved with SSI, you can put your header at the top of the page the same as you would with any other element.

    You can put the image in the background of the element if you want and then use a class or id in the first line of the html.

    Alternatively if you want you can put the header image into the background of the body tage and then no additional code would be needed. If the css file is external and linked to all pages then the image will take effect.

    I have included both ideas in one example although you wouldn't usually use then together for the same effect.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{
    background-color: #FFFFFF;
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }
    .header{
    background-color: #FFFF00;
    height:50px;
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }
    </style>
    </head>
    <body>
    <div class="header">
    <p>Text and other images go here</p>
    </div>
    </body>
    </html>
    Hope that's what you wanted.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Sep 2003
    Location
    diamond bar, ca
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank a million. That is what I wanted.


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
  •