SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS Layout

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout

    Hello all,

    Today I stumbled on to the reality of accessibility and the advantages of starting to use CSS to control the design of my page. I want to start building my page following these rules but I'm a little confused.

    It seems that DIVs are the prefered "placeholder" for content. I might be wrong but if this is so, then there will be a LOT of DIV tags in my code. Right?

    You see, my layout has (or used to have) the following structure as it would apear on the browser:
    • A table with the header.
    • A table with a banner-like image (no ads in my site)
    • A table with the main menu which itself is composed of a table with three columns for the three main sections of the site.
    • A table with the content which may or may not contain its own tables.
    • A table with the footer.

    As you can see, a lot of tables. One of the reasons I have that many tables instead of having one with more rows is that the browser renders the table after it has loaded completely. Dividing the content into different tables gives the illusion of faster downloads.

    I'd like to start designing the right way from now but are DIVs the best option?

    Simple DIVs don't render right in Dreamweaver.

    Example:
    Code:
    <div class="stage"><p>Hello</p></div>
    My stage class specifies that this div should be 700px wide and have an image as a background. It renders right in the browser but forget about it in DW. Is there a workaround?
    Luis

  2. #2
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DW does not show CSS correct, you'll need to preview it in your browser to see if it's looking OK.

    I too recently started using CSS, but I also still use tables for part of my layout. One thing I do is use CSS to make borders around the tables or cells (CSS borders look alot better than table borders). Well DW does not show these borders, so I have to keep F12 (previewing) to make sure they look ok.
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  3. #3
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more thing.

    Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?

    tnx

    Steelsun... Houston TX? Lgomez-> Born in Galveston!
    Last edited by lgomez; May 7, 2002 at 21:31.
    Luis

  4. #4
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Testing

    Ok, I've done some tests and I think it works great.

    My only problem is I don't have access to NS4 or IE4/5. Can anyone test them and see what happens.

    Traditional table layout:
    http://vfxnetwork.com/CSSLayout/VFXhome.htm
    • HTML 12.9 kb
    • CSS 1003b
    • Images 18.0kb


    CSS Layout:
    http://vfxnetwork.com/CSSLayout/VFXhomeCSS.htm
    • HTML 1.83 kb
    • CSS 3.16 kb
    • Images 18.3kb


    Total table layout: 31.9
    Total CSS layout: 23.9

    This numbers are not entirely fair. As you can see the traditional version actually has more content but I'll work on that tomorrow.

    If you want to download the files you can do so here: http://vfxnetwork.com/CSSLayout/vfxnet.zip
    NOTE: Please do not use or distribute this files for anything other that testing related to this post. Thank you.
    Luis

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lgomez
    Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?
    That's just the "natural" margin of a heading element. To change the margin size, you might do something like this:
    Code:
    h1 { margin: 0; padding: 0; }

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lgomez
    One more thing.

    Why is it that h1-h6 tags render with a space below its content. Is there a fix for this?
    There's no FIX as that is the intended result. H tags are block level elements and as such they imply a full carriage return (equal to 2 <BR> tags) after their close.
    http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

    By the way, you don't really need to have a P tag nested inside your DIV.

    Without making this personal to you, if you want to get into CSS layout then you really need to have a solid understanding of HTML first. This means being able to write your own code and understand how tags work and why they behave a certain way. This will make designing a CSS only site MUCH simpler as you will already have the proper building blocks.

    This is of course MY opinion and should not be taken personally.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As an aside it may be worth noting that the new Dreamweaver Mx claims to support CSS layout and styles directly (and correctly) in its preview window.

    Unfortunately, I also hear that the CSS creation process itself is very similar to how it is in v4 (i.e. dire)

    Still, I'm looking forward to giving it a go.
    (I'd give the trial/prerelease a try, but I need to U/G my (admittedly out of date) OS first.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    busy Steelsun's Avatar
    Join Date
    Mar 2001
    Location
    Houston, Tejas; Future Capital of the World
    Posts
    2,474
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've downloaded the MX preview and tried it a few times briefly, but still use DW 4 for most of my work instead of the MX (mostly because I know and am comfortable with 4 and MX is strange).
    The preview of CSS in MX to me is not impressive at all and still seems lacking.
    Brian Poirier
    SunStockPhoto: Stock Photos, Fine Art Photos, Event Photography

  9. #9
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry, I don't take it personally. This is exactly why I'm here and that is what I'm looking for. Opinions and sugestions WHILE I work.

    If could sit and read everything there is to read I wouldn't get any work done. I learn as I go along and read as much as I can.

    Do you know where I can find a listing of CSS browser compatibility?

    Regarding the alt attribute for my images. There are some images that serve no purpose other than decoration. Is it possible to set an attribute so that screen readers skip those images. What happens when a screen reader hits an image with no alt attribute?

    Thank you,
    Luis

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lgomez
    Is it possible to set an attribute so that screen readers skip those images.
    Code:
    alt=""

  11. #11
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Miami, Florida - Caracas, Venezuela
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tnx.
    Luis

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Luis,

    Page looks nice Couple of comments/questions about the source code:

    1. I've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?

    2. How have you used Float here? I'm guessing 2 of the columns, or...?

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One of the best bug references I've come across is on www.richinstyle.com .
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Mike Feury
    've read that it's usually best to have positional CSS defined in the <head>, and styles in an external style sheet. I assume you have the positional classes defined externally because they will appear on every page?
    That sounds familiar, even like a problem I was once experiencing.

    However, I systematically farm *all* CSS out to an external now (styling and CSSP) without problems.

    Any chance you could show a reference for that statement?
    It would be interesting to compare it to my experience with that issue.
    As I seemed to have gotten around it without noticing, it could still prove to be useful to know of the pitfalls (if any).

    TIA
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2002
    Location
    Indianapolis
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bill,

    I'll do a hunt and see if I can find the reference(s) - so many places I've read recently

    The reasoning for it was mainly that positioning tends to be unique to a page, whereas style usually applies to many pages. In that situation with a large site, it would make sense to keep CSSP local to the page - otherwise you'd have a huge external style sheet.

    However, I think most sites have a consistent layout across all/many pages, so I'd favor your approach. It's like the templates idea - it makes sense to me to have repetitive boxes defined externally.

    A well-organized and commented external style sheet shouldn't be a problem even if it gets quite large. Then just add any local tweaks to that page's <head>.

    I wonder is there any significant page-loading hit because of reading in a large style sheet? Would have to be pretty large though to offset the advantage of keeping repeated styles in one place.


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
  •