SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    From Tables to CSS

    I've recently deviated from tables based layouts to CSS, or rather, I'm in the process of doing so. However, due to my somewhat lacklustre knowledge of working with layers, I've come upon a question early on.

    For main layout features that previously I would have used tables for, should I use absolute or relative positioning? I've used absolute thus far, and it looks alright in different resolutions, but are there other issues I should be aware of?

    Also, when assigning the attributes of a layer (left, top, width, height etc.), is it best practice to include these details within the main html of the page, or in a seperate CSS file?

    I would appreciate any help that could be put my way.

    Many thanks

    Jonny

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    First of all, a CSS positioned layout does not mean everything should be absolutely positioned.

    The best practice is to include all styling in an external .css file. That's the beauty of CSS. If you want to move something, you only change one file and that bit moves on every page of your site.

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From an intermediate stand point I use absolutely positioned layouts more than I should. In practicality you should use a combination of floats and absolute positioning, but someone will disagree.

    The best practice in my opinion is once you feel comfortable using one technique, move onto the other and see how the layout changes when using this method. Better yet, create a simple document and play around with relative, absolute and floating layouts to see how they interact so you understand them.

    CSS isn't hard to understand but what is hard to understand is how layouts with CSS interact with one another.
    Ryan Butler

    Midwest Web Design

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Different layout effects call for different CSS techniques. I use a lot of absolute positioning myself, though when I started working with CSS early on I was more a fan of floats. Learn to use all of the layout techniques available, then apply the best fit for the situation you're in. For me absolute positioning usually works well, but your layouts may not be similar to the ones that I tend to work with.

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

    One thing I will say from the outset is that you will very rarely need to use relative positioning for laying out a page. Relative positioning is used more for overlapping effects and some clever coding techniques.

    Most pages are a mixture of static, floated and absolute positioning but in a fluid page absolute positioning should be minimised as it confines the layout to those co-ordinates.

    A page is easier to manage when it has a logical flow. e.g. You start with your header on the top of the page and it needs no positioning at all because thats where it is. You then start with next level and that doesn't need positioning either because it follows the header and so on.......

    The main elements can be static and the elements that need to be aligned alongside can be floated thus preserving the flow of a document. Most people want footers after their content but this can't be achieved if you use absolute positioning unless you have a completely fixed rigid design (which is fine in some cases).

    All css styles should be removed to the stylesheet (or at least the head of the document) but very rarely inline. As you mention layers it seems you may be talking about Dreamweavers bad habit of producing inline styles and calling them layers. This is a bad way of designing a layout and makes it inflexible and almost as bad as the tables that you are trying to lose

    Your elements (don't call them layers) can all be defined from the stylesheet which allows you to control them and change them from a single styleshhet and to have effect over the whole site. This is one of the main strengths of css and is a very powerful tool.

    Read the FAQ to understand the finer points of the css positioning systems so that you understand how they work and how to use them and then just practice on a few layouts to familiarise yourself.

    Its a steep learning curve at first (what with learning css and browsers bugs etc) but its worth it in the end

    Paul

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2004
    Location
    Middlesbrough, UK
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the advice.

    Paul O'B, with regard to your comment about 'layers', I was indeed referring to working with Dreamweaver. Instead, should I create a new 'layer', and simply set its attributes in an external style sheet?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,384
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Instead, should I create a new 'layer', and simply set its attributes in an external style sheet
    Yes basically thats correct

    If you are new to css then you can always draw them with DW in design view and then cut and paste the css from the inline style into your stylesheet. However I think the more you try to do it yourself the better you will understand whats happening

    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
  •