SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    styling definition lists.

    I was thinking about the use of definition lists .. more specifically the case where one would like to highlight a whole definition ( that is ALL encompassing DTs and DDs). Imagine, for example that you have made a catalog page, and hovering on the name of a product, it's picture or any of its description turns the whole section background pink. Essentially the DL of an LI:hover.

    Doing a DT:hover, DT:hover+DD .. is iffy, as it starts to break down if you have more than one DT/DD and there is on way for the CSS to go up the DOM structure ( so that if someone hovers one of the DDs the corresponding DTs are highlighted)


    I almost thought about making a UL with each LI containing a DL with a single definition. whit this would validate... it seams to defeat the purpose of a list. Are there any better ways to accomplish this?

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

    You'd need to wrap each selection group in a parent and use that to highlight the children.

    e.g. You could wrap the dl around each dt and set of dds and then just set the background of the dl to remain highlighted while hovered. That would means having multiple dls of course.

    You could also use classes and use the general sibling selector but this will only highlight when the dt is hovered but will highlight the dds also.

    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">
    dt, dd, p {
        margin:0;
    }
    dl {
        width:600px;
        margin:auto;
    }
    dt {
        font-weight:bold;
        padding:10px 0;
    }
    dd {
        padding:0 0 0 50px
    }
    dt:hover {background:red}
    .dt1:hover ~ .dd1 {background:red}
    .dt2:hover ~ .dd2 {background:red}
    </style>
    </head>
    <body>
    <dl>
        <dt class="dt1">Term Goes here</dt>
        <dd class="dd1">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd1">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd1">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd1">
            <p>Data defintion goes here</p>
        </dd>
        <dt class="dt2">Term Goes here</dt>
        <dd class="dd2">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd2">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd2">
            <p>Data defintion goes here</p>
        </dd>
        <dd class="dd2">
            <p>Data defintion goes here</p>
        </dd>
    </dl>
    </body>
    </html>
    (Note safari and chrome are buggy with hovering and then applying effects to adjacent and general sibling selectors)

    You would need to use javacript to highlight the dt based on hovering the dd as you can't traverse the dom backwards with css.

    Someone a very long time ago asked for something a little similar and this old demo uses some js to highlight similar entries.
    Last edited by Paul O'B; Oct 12, 2010 at 05:35.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    would this be considered OK, semantically (or sensible) then? It's a UL of DLs...


    Code:
    <ul>
         <li>
              <dl>
                <dt><img src="beer.jpg" ></dt>
                <dt>Coffee</dt>
                  <dd>- black hot drink</dd>
                  <dd>- popular with hipster types</dd>
              </dl>
         </li>
         <li>
              <dl>
                <dt><img src="beer.jpg" ></dt>
                <dt>Milk</dt>
                  <dd>- White cold drink</dd>
                  <dd>- popular with young kids/dd>
              </dl>
         </li>
    </ul>

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    would this be considered OK, semantically (or sensible) then? It's a UL of DLs...

    Code:
    <ul>
         <li>
              <dl>
                <dt><img src="beer.jpg" ></dt>
                <dt>Coffee</dt>
                  <dd>- black hot drink</dd>
                  <dd>- popular with hipster types</dd>
              </dl>
         </li>
         <li>
              <dl>
                <dt><img src="beer.jpg" ></dt>
                <dt>Milk</dt>
                  <dd>- White cold drink</dd>
                  <dd>- popular with young kids/dd>
              </dl>
         </li>
    </ul>
    Ugh ... yuck ... it might work, but semantically it's a mess ...

    For a start, why have you got an inline image in there, let alone in its own <dt>? (Even ignoring the fact that it doesn't appear to relate to the item being defined and has no alt text)

    Second, the point of a <dl> is that it is a list - that you have all the pairings in one list. What you've done is the equivalent of having
    Code:
    <ul><li>...</li></ul>
    <ul><li>...</li></ul>
    <ul><li>...</li></ul>
    It isn't technically wrong, but it is an inappropriate use of code.

    Third, if you do have to use a separate <dl> for each item, why use extra code putting it in an <li>? Just have a series of <dl>s, that will do the job just as well, and with less scope for styling mistakes.

    Fourth, you could put a class/ID on each <dt> and <dd> and use Javascript to dynamically apply a style to them onMouseOver.

    Fifth, you could solve all of these problems and put it in a <table>, which is not a huge stretch of the semantic imagination, and tr:hover is pretty darned easy.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I agree with Stevie's comments above.

    If you don't want to use JS or a table then this would be the lesser of two evils.

    Code:
     <dl>             <dt><img src="beer.jpg" ></dt>             <dt>Coffee</dt>               <dd>- black hot drink</dd>               <dd>- popular with hipster types</dd> 
    </dl>           
    <dl>             <dt><img src="beer.jpg" ></dt>             <dt>Milk</dt>               <dd>- White cold drink</dd>               <dd>- popular with young kids/dd>
    </dl>
    There would be no need for the ul as you have enough hooks. Although a definition list of only one data term is a little odd it's not entirely incorrect. I would be inclined to use a normal dl structure and just use some JS to do the highlighting as there would be no real loss of function if JS was disabled.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I am being a CSS purist..
    I think I get it now,tho. I just thought since I had to use separate DLs to achieve the effect, I would need to wrap it in a list for semantic reasons ( As it would essentially be a LIST of definition lists).

    I am going to state for the record that I am somewhat disappointed in the way a DL is structured, more like regular markup than a list... ( there are no list items, and DT is like a Hx , structurally) It would have been nice if the DL tag would have included a DI (after all it still IS a LIST, right?) which would contain the DTs and DDs... oh well.


    BTW
    about the inline image. I got inspired by this thread :http://www.sitepoint.com/forums/showthread.php?t=706274

    Quote Originally Posted by noonnope View Post
    for a shopping cart list, a definition list would most likely be a good choice.

    after all, it's presenting a term (the product) and it's definition.

    i don't discriminate: if a list goes, than all kinds of lists go

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    It is a list of definitions. Before you can define something, you must say what you are defining. Hence DT, DD, and no DI.
    Ryan B | My Blog | Twitter


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
  •