SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Best way to style Event Info

    I am doing a website for a local school, and need help figuring out the best way to use CSS to get the desired effect.

    I want to display an upcoming concert.

    The "look" I'm going for is...

    - Two columns
    - Left Column is bold, right-aligned and has Labels
    - Right Column is normal, left-aligned, with Info

    Here is the information...
    Concert: "Rockin Beethoven"

    Performed by: Honors Band

    Location: Our School
    Main Auditorium
    1250 Cactus Boulevard
    Tempe, AZ

    Date: May 7, 2011

    Cost: $20

    RSVP: Call Mary at (480) 555-1212

    Historically you would use an HTML Table, but I'd like to try this using CSS2 with no tables involved!! (I think I saw a Form similar to this in one of my SitePoint books that I don't have handy?!)

    As always, it should work in any browser from IE 6 and up.

    Thanks,



    Debbie

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Should it look like the main part of this page?
    definition list

    If you float the dt's left, and simply give the dd's a left margin equal to a hair more than the width of the dt's, then your dd's (descriptions) can be several lines long.
    Dt's have to clear floats above them.

    If there's a dt and the associated dd is empty, you must put some kind of content inside it. We use a space character (& #160; ). Otherwise the next dd in line will happily ride up and things won't align properly.

    Or, if you don't like DL's (some people would argue they really must be restricted to actual dictionary definitions, even though the W3C never demanded such a thing), you could possibly get away with
    <div>
    <h?>Concert: </h?>
    <p>"Rockin Beethoven"</p>
    </div>

    sets (div's really optional anyway, but I dunno if your info every gets really weird. If it's really always the sort of lengths like you posted, div not needed).

    h? is floated left and set width like the dt solution, while p is at least given a left margin equal to width of dt.

    One thing to watch out for in both of these possible solutions is, the thing on the right (p or dd) if you're giving it a margin, also giving it something that triggers Haslayout (such as setting dimensions) will make IE give you radically different results. You could float the p/dd's left or right instead of using a margin for cross-browser consistency, but if this info stays pretty simple then you can get away with setting no dimensions on the right-side thing.

    I definitely would NOT use two divs, one with all the left-hand stuff and the second with all the right hand stuff, and both floated. You certainly want the source order of the text to make sense whether CSS is applied or not. (just in case someone suggests this)

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

    Using a definition list as Mallory mentioned above I would use display:inline-block instead of floats and then either dt or dd can run to multiple lines and still line up unlike floats.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    dl,dt,dd{margin:0;padding:0}
    dl {
        width:100%;
        line-height:1.2;
        text-align:center;
    }
    dt{font-weight:bold;}
    dt, dd {
        margin:0 1% 7px 0;
        width:49%;
        display:-moz-inline-box;/* ff2 inline-block*/
        display:inline-block;
        text-align:right;
        vertical-align:top;
    }
    * html dt,* html dd{display:inline}/* ie6 fix for inline-block*/
    *+html dt,*+html dd{display:inline}/* ie7 fix for inline-block*/
    dd {
        text-align:left;
        margin:0 0 7px;
        vertical-align:bottom;/* change to vertical-align:top to align at top */
    }
    </style>
    </head>
    <body>
    <dl>
        <dt>Concert:</dt>
        <dd>"Rockin Beethoven"</dd>
        <dt>Performed by:</dt>
        <dd>Honors Band</dd>
        <dt>Location:</dt>
        <dd>Our School <br />
            Main Auditorium<br />
            1250 Cactus Boulevard<br />
            Tempe, AZ</dd>
        <dt>Date:</dt>
        <dd>May 7, 2011</dd>
        <dt>Cost:</dt>
        <dd>$20</dd>
        <dt>RSVP:</dt>
        <dd>Call Mary at (480) 555-1212 </dd>
        <dt>Lorem ipsum<br />
            over 3 lines<br />
            or more:</dt>
        <dd>Lorem ipsum</dd>
        <dt>Concert:</dt>
        <dd>"Rockin Beethoven"</dd>
    </dl>
    </body>
    </html>
    I think a table is also a viable solution for this data also.

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Should it look like the main part of this page?
    definition list
    No, Dutch doesn't work for my intended audience.


    Yes, that was the basic look I was going for on this.


    Debbie

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think a table is also a viable solution for this data also.
    That is what I ended up doing.

    You are right, it was legitimate since it is tabular data and not for layout.

    But I just tend to shy away from tables after coming over to the CSS side.

    Stomme's solution looks cool, though.

    Will have try it out.

    Thanks guys!!



    Debbie

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just for interest I put my inline block version online here as I think its' quite neat and not somethig that floats can do. It won't work in FF2 or equivalent though unless the mark up is change a lot. Works in IE6+ and all other modern browsers.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Just for interest I put my inline block version online here as I think its' quite neat and not somethig that floats can do. It won't work in FF2 or equivalent though unless the mark up is change a lot. Works in IE6+ and all other modern browsers.
    You never disappoint, Paul.

    It looks great!! (And such simple markup too!!)


    So, why should someone do it the CSS way versus using a table?

    Both ways are semantically legitimate, and both yield good results with little effort.



    Debbie

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I *personally* don't consider tables when they are just two columns most of the time, but it's certainly a grey area and using a table here certainly wouldn't be a layout table (the rows' TDs certainly have a semantic relationship with each other).

    If you do use a table, though, I'd have the left-hand-stuff be th's rather than td's, since they are "heading" the information on the right. This would also make the information make a little more sense in a screen reader.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes what Mallory said.

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I *personally* don't consider tables when they are just two columns most of the time, but it's certainly a grey area and using a table here certainly wouldn't be a layout table (the rows' TDs certainly have a semantic relationship with each other).

    If you do use a table, though, I'd have the left-hand-stuff be th's rather than td's, since they are "heading" the information on the right. This would also make the information make a little more sense in a screen reader.
    That's exactly what I did.

    When the swelling in my arm goes down, I'll likely retool things Paul's (and Stomme's) way.

    I just can't get enough of *good* CSS!!!

    Thanks again guys (and gal),



    Debbie

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    =^.^=

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    =^.^=
    Is that "kitty code", Stomme?


    Debbie

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sure.

    Here's a smiling japanese bunny:

    =:3

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,777
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Sure.

    Here's a smiling japanese bunny:

    =:3

    Someone has too much time on their hands!! *LOL*

    Cute!


    Debbie

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May want to add microdata as well.
    Events - Webmaster Tools Help


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
  •