SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Sanity Check Please

    OK so no real doubt here, I don't have much However what I really want is a sanity check of my latest CSS work so if you would care to comment I would be happy to peruse your replys

    The Mission: The transition from tables for layout definition to CSS, including degredation to a reasonable (readable) layout in a non-CSS enabled browser.

    The Starting Point: Initally the site uses tables for amost the entirety of it's layout, a simplified version of the site below gives the basic format of every page.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
      <
    meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
      <
    meta name="Keywords" content="Theatre, Bath, Larkhall" />
      <
    meta name="Description" content="The Rondo Theatre" />

      <
    title>The Rondo Theatre</title>

      <
    link href="standard.css" rel="stylesheet" title="Standard" type="text/css" />
      
    </
    head>
    <
    body>

    <
    table width="100%" cellspacing="0" cellpadding="0" summary="Menu">
    <
    tr>

    <
    td class="menu">
      <
    h1 class="menuTitle">heading</h1>
       <
    a href="page1.html">Link 1</a><br />
       <
    a href="page2.html">Link 2</a><br />
       <
    a href="page3.html">Link 3</a><br />
       <
    a href="page4.html">Link 4</a><br />
       <
    a href="page5.html">Link 5</a><br />
       <
    br />
       <
    a href="page6.html">Link 6</a><br />
      
    </
    td>
    <
    td>
     <
    h1>Page Header</h1>
     
    content content content content content content content content content 
     content content content content content content content content content
     content content content content content content content content content 
     content content content content content content content content content
     content content content content content content content content content 
     content content content content content content content content content
     content content content content content content content content content 
     content content content content content content content content content
     content content content content content content content content content 
     content content content content content content content content content
    </td>

    </
    tr>
    </
    table>

    </
    body>
    </
    html
    As you can see I was already using CSS, however purely for font/text formating and not for layout. The CSS file is a long and conveluted thing and at this point is fairly irrelivent so I shall not insert all of it however this one rule is relevent
    PHP Code:
    .menu {
        
    background-positionleft top;
        
    background-imageurl(RondoBlueWatermark.jpg);
        
    background-repeatrepeat-y;
        
    background-color#fff;
        
    ...

    Which added a watermarked repeated image to the menu. Since it was in a table it went all the way to the bottom of the page.

    The First Task: Although the content itself sometime includes tables the first task has to be to get rid of the table that is being used to split the page into menu and content. Compared to this table the other tables are small (< screen height) but this one table could seriously effect how the site loads. So the first step is to replace the table with divs, noting that there will only ever be 1 menu and 1 content frame I also switch from class to id selectors.

    PHP Code:
    <body>

    <
    div id="menu">
      <
    h1 class="menuTitle">heading</h1>
       <
    a href="page1.html">Link 1</a><br />
       <
    a href="page2.html">Link 2</a><br />
       <
    a href="page3.html">Link 3</a><br />
       <
    a href="page4.html">Link 4</a><br />
       <
    a href="page5.html">Link 5</a><br />
       <
    br />
       <
    a href="page6.html">Link 6</a><br />
      
    </
    div>

    <
    div id="content">
     <
    h1>Page Header</h1>
     
    content ...
     ... 
    content
    </div>

    </
    body
    Descision time, how to do it. The content is often(but not always) longer than the menu, since I want the content to stay within it's own column and never flow beneath the menu and I want the menu's background position to still continue to the bottom of the page. I created the following CSS

    PHP Code:
    body
    {
        
    margin4px 2px 4px 10px;
        
    padding0px;
        
    background-colorwhite;


    #content
    {
        
    /* Menu Width 11 x menu Font Size 80% = 8.8 */
        
    margin-left9em;  


    #menu
    {
        
    background-positiontop left;
        
    background-imageurl(RondoBlueWatermark.jpg);
        
    background-repeatrepeat-y;
        
    background-color#fff;

        
    positionabsolute;
        
    top4px;
        
    left10px;
        
    width11em;

    Note the use of em for the menuwidth. I got this idea from else where however the basic effect is that if the user scales the font sizes then the menu div will change it's width accordingly. This means that the menu div will always be wide enough for the menu item text and there wont be any unsitely wrapping. Is this a good idea or are there pit falls I am un aware of in doing this.

    Unfortuneately the background image for the menu only goes as far as the bottom of the menu not the bottom of the page. However instead of trying to make the menu div extend to the bottom of the page it occurs to me that I could simply put the background on the body instead so I modifty the CSS to

    PHP Code:
    body
    {
        
    background-position4px 4px;
        
    background-imageurl(RondoBlueWatermark.jpg);
        
    background-repeatrepeat-y;

        
    margin4px 2px 4px 10px;
        
    padding0px;
        
    background-colorwhite;


    #menu
    {
        
    background-colortransparent;

        
    positionabsolute;
        
    top4px;
        
    left10px;
        
    width11em;

    The Second Task: Make the menu degrade nicely in a non-CSS enabled broswer. The problem with the current html markup is that in a non-CSS enabled broswer the menu takes up so much screen hight that the content will be off the bottom of the screen, then menu needs to degrade to a smaller height. In addition all those <br /> do not improve readability in anyway. Finally a realise that I can use inhertance selectors to apply the CSS to the menu rather than using class selectorsenabling me to remove a lot of the class="" attributes.

    I initially remove all the <br /> tags and look at the page. The menu items are all scruched together, I need a way of getting a line break at the end of each one. In fact it would be handy if the <a ... > tags actted like block elements. There is CSS for this "display: block". In addition I note that since CSS gives me full control of the text properties of any head element I don't need to use h1 for my headings I can use h3 (say) which will be smaller when no CSS is applied. Finally Since there are places where I want gaps in the menu but they are always 1 line a create a style class with an increased top margin to enable me to introduce such gaps with out effecting markup with CSS disabled. This gives

    PHP Code:
    /* Set menu title style */
    #menu h3
    {
       ... 
    text/font styles ...


    #menu a
    {
        
    displayblock;
    }

    #menu a.gap
    {
        
    margin-top1em;

    PHP Code:
    <body>

    <
    div id="menu">
      <
    h3>heading</h3>
       <
    a href="page1.html">Link 1</a>
       <
    a href="page2.html">Link 2</a>
       <
    a href="page3.html">Link 3</a>
       <
    a href="page4.html">Link 4</a>
       <
    a href="page5.html">Link 5</a>

       <
    class="gap" href="page6.html">Link 6</a>
      
    </
    div>

    <
    div id="content">
     <
    h1>Page Header</h1>
     
    content ...
     ... 
    content
    </div>

    </
    body
    When CSS is diabled this degrads to a smallheading with a horizontal list of links under it. This takes a lot less room allowing to content to be at least partially visible without having to scroll.

    So what do you think of it then as a first step ? Am Igoing about it the right way ? I have only managed to test in IE6 so far am I going to have problems with the "display: block" ?

  2. #2
    SitePoint Enthusiast townmiddleburgh's Avatar
    Join Date
    Aug 2003
    Location
    Middleburgh, NY
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to be up all night, too. It's about time for me to convert tables to css. This is going to be so much fun, but at least I have a start. I wish the both of us best of luck.

    I have about 15kb of tables to go through a page, but most of it is brought in through SSI.

  3. #3
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your menu is positioned absolutely. You can specfiy it AFTER the content div in the XHTML and it will still appear in the correct place (only non-CSS browsers will see the content first).


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
  •