SitePoint Sponsor

User Tag List

View Poll Results: Who has that good old friday feeling?

Voters
6. You may not vote on this poll
  • Oh yes... YES!

    5 83.33%
  • Kind of. Maybe later.

    1 16.67%
  • No. I hate the weekends.

    0 0%
  • It's friday?

    0 0%
Results 1 to 4 of 4
  1. #1
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink Tables to CSS Conversion

    Hi all;

    I really like the template at AllTheWeb. I have taken a look at the source and it heavily relies on CSS.

    Even though it uses tables, is it possible to strip the template and convert it to use a dedicated stylesheet (using no tables), using a height and width of 100%? Also fit in 800x600.

    Thankx
    Richard..




    <--- don't wanna break the rules

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm, is this a question ?

    Site looks good, is it your site ? If so then yes strip the tables, particularly the main layout one. You'll be surprised how much mark-up you loose and how much easier it is to read the source.

  3. #3
    Non-Member rawkinrich1979's Avatar
    Join Date
    Aug 2003
    Location
    England
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    Site looks good, is it your site ?
    Not my site no.. I would just like to pinch the template

    I am not sure how to convert it to CSS.. I have had a play, but would like to lose the tables.

  4. #4
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well tis a fairly basic layout, this is how I would approach it (noting that I am not an expert).

    The layout appears to be a header and a foot with the space in-between split left-right into menu and content. In order to enable us to easily address our styles split the page into 4 areas each with it's own id

    Code:
    ----------------------------------------
    |                                      |
    | Header                               |
    |                                      |
    ----------------------------------------
    | Menu      | Content                  |
    |           |                          |
    |           |                          |
    |           |                          |
    |           |                          |
    |           |                          |
    ----------------------------------------
    |                                      |
    | Footer                               |
    |                                      |
    ----------------------------------------
    The menu will float to the left of the content, since it is floating it must have a width which we will specify in ems so that if the user changes the text size the menu will maintain it's layout. To prevent the content wrapping below the menu we give it a left margin the same as (or slightly bigger than) then menu width this gives

    Code:
    <style>
    #Header {
    }
    
    #Menu {
      float: left;
      width: 7em;
    }
    
    #Content {
      margin-left: 8em;
    }
    
    #Footer {
    }
    </style>
    
    <body>
    <div id="Header">
    </div>
    
    <div id="Menu">
    </div>
    
    <div id="Content">
    </div>
    
    <div id="Footer">
    </div>
    </body>
    And that is your basic layout.

    The header is created by having a simple repeating background image with a Logo of some sort placed over the top of it.

    Apply styles to p and h1/h2/h3 tags in the menu and content divs to create the look and feel you want, add borders as required.


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
  •