SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    learning to use CSS for layout

    Hi All!
    New to the group- hope you can help a rookie learn a bit.
    I'm trying to learn to use CSS to layout a page instead of tables.
    http://www.dreamscraps.com/index2.html

    The link above is my first attempt.
    I worked pretty hard to make IE5 (the browser I use the most) and NN4x happy, I used 2 style sheets (scraps.css and scrapsnn.css).
    I finally got it to look how I wanted it in both browsers.
    Then I viewed the page in Opera 6, Mozilla 1.0 and NN6.2.
    It's not too bad in the gecko browsers - but the footer rides a bit higher than I want.
    In Opera the menu (#menu) div is all screwed up.
    Would someone please give me some advise on what I'm doing wrong? I would really appreciate any tips.
    Also ... how did I do for the first time with CSS layout?
    I actually nicked the layout from a site and modified it for my own needs. I'm not using all of the styles you'll see in the sheets.

    Thanks
    Daf

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the #menu piece is buggy with opera, and i think NS4.
    InQuE

  3. #3
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Help me learn. In what way is it buggy? What would be a better way to do it?

    Thanks
    Daf

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, what you are using is the ID piece (the #) recommended, you should use the class properties (the .), so, instead of #menu, and your tags look like <div id="menu"></div>, change it to .menu and your tags like <div class="menu"></div>. also, if you have more than one property, such as the case as:
    <div class="something" id="menu"></div>
    go with multiple tags. your CSS would look like:
    .something {font-size:11px;}
    .class {color:#0000FF;}
    and the tags would be:
    <div class="something"><div class="menu">Text</div></div>
    of course, you may change it to anything else you want. say if it were in a table:
    <table border=0 cellpadding=0 cellspacing=1 bgcolor="#000000">
    <tr class="something"><td class="menu">
    Testing..1.2.3
    </td></tr>
    </table>
    one thing that can be use, if you are not too much caring about Opera3, would be to go with parenting, such as:
    (your CSS)
    .something {font-size:11px;}
    .something .menu {color:#0000FF;}
    (/your CSS)
    what this is saying is, that the tag marked with the class "something" and everything in between that untill the end tag </>, it will have the properties of font-size:11px, but also, everything that is marked with the "menu" class will also be font-size:11px AND color:#0000FF.


    for more information on browser buggyness, etc, and a list of properties that CSS can use, visit:
    http://www.webreview.com/style/css1/...stergrid.shtml
    for more information on browser buggyness on selectors, such as A:HOVER{}, or B,U,I {}, etc, visit:
    http://www.webreview.com/style/css2/...electors.shtml
    InQuE

  5. #5
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! I'm off to digest this.
    Thanks!
    Daf


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
  •