Web Analytics Made Easy -
StatCounter I need some help with floating a definition list - CodingForum

Announcement

Collapse
No announcement yet.

I need some help with floating a definition list

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I need some help with floating a definition list

    I have one definition list like this:

    Code:
    Title 1
      Description 1
    Title 2
      Description 2
    Title 3
      Description 3
    Title 4
      Description 4
    Now I want Title 2 and Desc. 2 to be next to Title 1 and Desc. 1 like this:

    Code:
    Title 1    Title 2
    Desc. 1    Desc. 2
    I've been working on this for almost 2 hours now. So how would I do this best with floating? Thanks in advance.
    <http://jero.net/>

  • #2
    What I'd do is place each title with it's description in a div. Then float the 2nd div, and clear each div on the left.

    #title1 { clear: both }
    #title2 { float: right }

    <div id="title1">
    <h1>Title1</h1>
    <p>Description 1</p>
    </div>

    <div id="title2">
    <h1>Title2</h1>
    <p>Description 2</p>
    </div>

    Haven't tested it so needs a bit of playing with probably.
    markaylward.co.uk

    Comment


    • #3
      I wish it was that easy. You see, the defenition title and description are inside the DL element. Like this:

      Code:
      <dl>
       <dt>title 1
       <dd>description 1
      So I can't put them in a DIV together which makes things very complicated. Thanks for your reply though.
      <http://jero.net/>

      Comment


      • #4
        Oh, I'm not sure really then. I realised what I posted before was unsatisfactory anyway. Think you can do anything with this?

        Edit: Edited out, not needed.
        Last edited by mark87; Aug 3, 2005, 04:23 PM.
        markaylward.co.uk

        Comment


        • #5
          Double post so that you see it, but what about this?

          PHP Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd"
          >

          <
          html>
          <
          head>
          <
          meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

          <
          title>Untitled Document</title>

          <
          style type="text/css">

          dt font-weightbold }
          dd margin-left}

          .
          item {
          floatleft;
          width200px;
          border1px solid #000;
          margin0 15px 15px 0;
          padding5px;
          }

          .
          clearboth clearboth }
          </
          style>

          </
          head>

          <
          body>

          <
          dl class="item">
          <
          dt>Title1</dt>
          <
          dd>Description 1</dd>
          </
          dl>

          <
          dl class="item">
          <
          dt>Title2</dt>
          <
          dd>Description 2</dd>
          </
          dl>

          <
          br class="clearboth">

          <
          dl class="item">
          <
          dt>Title3</dt>
          <
          dd>Description 3</dd>
          </
          dl>

          <
          dl class="item">
          <
          dt>Title4</dt>
          <
          dd>Description 4</dd>
          </
          dl>

          </
          body>

          </
          html
          markaylward.co.uk

          Comment


          • #6
            Placing every defenition in its own DL element isn't very effective, don't you think? That's like placing every LI element in it's own UL element.

            But anyway, I think I'm going to give each row its own DL element (so 2 DL elements). It's not ideal, but it's the best I can come up with. But if anyone can come up with a technique that only requires 1 DL element, I'd love to hear that.
            <http://jero.net/>

            Comment


            • #7
              Well how about replacing that <dl> with <di> and wrapping the whole thing in a <dl> ?

              Example on w3 -
              http://www.w3.org/TR/xhtml2/mod-list.html#edef_list_dt
              markaylward.co.uk

              Comment


              • #8
                ...We're in 2005... XHTML 2.0 isn't done yet.
                <http://jero.net/>

                Comment


                • #9
                  Oops my bad.

                  Well what's wrong with using one <dt> per item/whatever?

                  The solution I gave you seems to work well. Does it really matter if the code isn't very 'effective' ?!
                  markaylward.co.uk

                  Comment


                  • #10
                    Does it really matter if the code isn't very 'effective'
                    I believe Jero is trying to find some CSS that fits the semantic scheme of the page, not the other way around. There's nothing wrong with your code, it just adds unnecessary HTML elements.

                    With that in mind, here's another take:

                    Code:
                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
                    
                    <html>
                      <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                    
                        <title>Untitled Document</title>
                    
                        <style type="text/css">
                          * { margin:0; padding:0; }
                          dl { border:solid 1px purple; padding-bottom:2em; }
                          dt, dd { width:10em; background:#ccc; border:solid 1px red; display:inline; }
                          dd { border:solid 1px blue; position:relative; top:1.3em; left:-2.5em; }
                        </style>
                    
                      </head>
                    
                      <body>
                    
                        <dl>
                          <dt>Title1</dt>
                          <dd>Description 1</dd>
                    
                          <dt>Title2</dt>
                          <dd>Description 2</dd>
                    
                          <dt>Title3</dt>
                          <dd>Description 3</dd>
                    
                          <dt>Title4</dt>
                         <dd>Description 4</dd>
                       </dl>
                    
                       <p>Lorem ipsum...</p>
                    
                      </body>
                    
                    </html>
                    Computer, kill Flanders... Did I hear my name? My ears are burning...
                    Good start. Now finish the job.

                    Comment

                    Working...
                    X