Results 1 to 7 of 7

Thread: CSS rules for table-less layout

  1. #1
    346
    posts
    Registered User

    CSS rules for table-less layout

    Hello,

    This may seem like a general question, but I'm wondering if anyone has a link to a tutorial on table-less layout from start to finish?

    I've been able to collect tons of information regarding proper CSS markup, but its all very fragmented and hard to make sense of- there never seems to be a complete explanation of proper rules and CSS inheritance.

    For example...which <div> tag do you apply padding or margins to...which <div> gets text attributes, background attributes etc. Do any of you have tips and tricks for a system of labeling?

    for example, assume that container is for all content, welcome is a header, and products is a group of products:

    HTML Code:
    <div id="content">
       <div id="welcome">
            <div id="products">
            </div>
       </div>
    </div>
    can someone explain how they would apply their styles and layout? Positioning?

    I've been trying to glean info from sites but this is pretty much impossible due to external style sheets.

    I do know how to make a CSS hybrid site work (still using some tables), but fear I may be doing it with too much effort and redundant and/or unnecessary markup. It's especially hard because, for example, some people tell me not to apply styles to <td> tags while others say go for it. It seems so arbitrary...so how do I get myself inline with standards???

    Thanks so much,
    Last edited by cmart; October 28th, 2005 at 04:56 PM.

  2. #2
    Thats a hard question to answer. Different site layouts will require different approaches and padding and margins applied to elements. There's no real standard layout. There are tutorials, however, that walk you through some common types of layouts like floated columns (2 or 3 column layouts). They might be worth checking out.

    Also, get yourself the web developers toolbar for Firefox.
    http://chrispederick.com/work/webdeveloper/
    it makes all styles for any page easily accessible with a simple CTRL+SHIFT+C or CTRL+SHIFT+E

  3. #3
    Veerle Duoh has a nice beginers tutorial here:
    http://veerle.duoh.com/comments.php?id=208_0_2_10_C

  4. #4
    Good question and one likely to give you a whole lot of different answers. Like senocular said different site layouts will require different approaches. That's so true and even how web designers add margin/padding, text formating, backgrounds will vary.

    http://leftjustified.net/site-in-an-hour/ is a site that walks through a table-less layout and can give you some ideas.

    How I go about designing a site will vary from project to project but these are the steps that I tend to follow -- they are general steps and what usually changes is how I may need to apply the CSS at times to get the site to look the way it needs to look. But it should give you an idea.


    First I always plan out the site in my head (if simple) at first. I make sure I know everything I need to know. The number of pages, what the menu will look like, what extras may be needed (ads, search box, etc). This helps to determine the layouts I can and can't use.

    Then I rough out the general pages with pencil and paper to see how everything will fit. It also gives me a good idea of how I may layout the DIVs needed to make the site work. From that I can see what may need to be floated and how, what might cause some problems, and if I may need to make a larger background image to make the design of the site work. If it's a fixed width site and needs to be centered I'll know to use a container DIV. If it's a fluid site then I can figure out how to work the background. Basically I block out all the major sections of the pages - All that before I even start coding.

    Then I rough out the code. I make sure that I get the general layout for the site to work. I give each DIV a distinct background color and just make sure that everything sits in the right spot. Height and width of any element is added to make sure nothing falls apart on me. This includes any method I may need to prevent adding any hacks (mainly the box model hack).

    Now I start adding in the background for the site (if needed) and the other containers or sections. Once that looks good it's time to start adding the CSS for fonts. Finally comes the most common tags that I'll be using... make the CSS for those and start to test them. Mainly tags like: a, ul, ol, li, acronym, span, etc. -- also as part of this process I add in generic classes for things like bold, italic and underlined text, any color variations for text I may use to make things stand out... and so on. For those classes I always use the same class name so it's easier for me to remember when I go back to the code later on (only exception is if a client requests some specific class name from me). So if I see <span class="b red">NEW!</span> I know the font is BOLD (b) and RED in color (red). The red color may not always be the same color code, but it's still some sort of red.

    Then I start to work towards making the site as accessibile as possible. I run my accessibility checks and then attempt to validate them.


    Throughout this whole process I constantly validate the site (X/HTML and CSS) to make sure it's fine. Actually if you look at my post I check each time I finish a section - think of "a section" as being each paragraph above. I also check on as many browsers as I can before I validate.



    Margin/Padding tricks/tips usually depend on the layout - however I usually don't add any margin/padding to the DIV tags. I strip all the margin/padding from every element (margin: 0; padding: 0) and only use them on things like paragraph tags, lists, etc. that are inside my div tags. Doesn't always work out that way and sometimes I'll have to add padding or margin to the div tag, but I tend to avoid in incase I'm working with a fixed width. I don't want the width to change on some browsers because I added them.


    I may have missed a few questions you had but I think this post is long enough right now. If you want me to answer any more just ask or shoot me an email.
    Γνώθι Σεαυτόν

  5. #5
    346
    posts
    Registered User
    wow very helpful post! i will try to take this approach...we'll see what I can come up with!

  6. #6
    Pharmg617
    n/a
    posts
    Guest

    Good info

    Hello! adebaaf interesting adebaaf site! I'm really like it! Very, very adebaaf good!

  7. #7
    Pharmg25
    n/a
    posts
    Guest

    Good info

    Very nice site!

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
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012