SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal lists using definition lists

    I've been trying to tame definition lists to no avail.

    what I'm after is a list that looks like this:

    Menu Item: Description
    Menu Item: Description
    Menu Item: Description

    code:
    <dl>
    <dt>Menu Item/dt>
    <dl>Description</dl>
    etc.

    Using a definition list it always breaks after the dt and dd (both block elements).
    If I make them inline elements then the whole list appears on one line.
    I do not intend to use <br />'s.

    Any ideas on how to achieve the effect?
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  2. #2
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you use a combination of <ul> and <dl>? Something like:

    HTML Code:
    <ul class="none">
      <li>
        <dl><dt>Some text: </dt><dd>Some other text</dd></dl>
      </li>
    </ul>
    And your style might look something like:

    HTML Code:
    ul.none { list-style-type: none; }
    ul.none li { margin-left: 0; padding-left: 0; }
    ul.none dl dt, ul.none dl dd { display: inline; }
    That's all untested so you might have to do some more work on the css but that ought to give you a start.

  3. #3
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChrisOSX
    Can you use a combination of <ul> and <dl>?
    I see what you're saying.
    It would work but the idea was to present in a semantic fashion.
    It looses the semantic meaning when adding loads of individual DL's to another list.

    Thanks for looking any other ideas?
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  4. #4
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ummm. Okay, well this isn't nearly as sensical but you could set a fixed width to your dl then set a fixed width on your dt and dd and then float all your dt left so they'd auto wrap to the next line because they won't fit inline in your restricted dl. Something like:

    HTML Code:
    dl { width: 200px; }
    dl, dt, dd { display: inline }
    dt, dd { width: 100px; }
    dt { float: left; }
    LOL! I have no idea if that would work, but it might.

  5. #5
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works in firefox not in ie / opera (yet )
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
    
    dt{
    	float:left;
    	clear:left;
    }
    dd{
    	float:left;
    	margin:0 0 0 1em;
    }
    </style>
    </head>
    
    <body>
    	<dl>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    		<dt>Menu Item:</dt>
    		<dd>Description</dd>
    	</dl>
    </body>
    </html>

  6. #6
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not great but works in ie. To be honest though, this looks like tabular information i.e. a perfectly semantic use for tables. Is there a particular reason you need to use <dl>?
    HTML Code:
    dl{
    	width:14em;
    	border: solid #f00 1px;
    }
    dt{
    	float:left;
    	clear:left;
    }
    dd{
    	float:right;
    	margin:0 0 0 -3em;
    	clear:right;
    }

  7. #7
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops, just re-read your first post

  8. #8
    SitePoint Member AdamsHC's Avatar
    Join Date
    Aug 2004
    Location
    Lithuania
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one seems to be working even better, if you do not want to fix width of <dl> or be able to change it easy.

    HTML Code:
    <style type="text/css">
    dl{
    	border: solid #f00 1px;
    }
    dt{
    	float:left;
    	clear:both;
    }
    dd{
    }
    </style>

  9. #9
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one AdamsHC.
    A further refinement, no need to clear both:
    HTML Code:
    dl{
    border: solid #f00 1px;
    }
    dt{
    float:left;
    clear:left;
    }
    dd{
    }
    It's funny how we can over complicate these things


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
  •