SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Line Breaks in css?

    Hi guys

    I'm new to this forum, but I have a problem that has been bugging me, wondered if any of you could help? I have searched the internet for an answer, but nothing is forthcoming...

    Basically, I have an image, followed by a definition list. The image is floated to the left, so the list appears to the right of the image.

    I want to style the list so that it appears with the dt elements in bold, and the dd elements immediatley following. The code is like this:

    HTML Code:
       <div class="(class)">
        <h3>(Title)</h3>
    
        <img src="(source)" ... />
    
        <dl>
         <dt>(Term 1):</dt>
         <dd>(Definition 1)</dd>
    
         <dt>(Term 2):</dt>
         <dd>(Definition 2)</dd>
    
         <dt>(Term 3):</dt>
         <dd>(Definition 3)</dd>
    
         <dt>(Term 4):</dt>
         <dd>(Definition 4)</dd>
    
         <dt>(Term 5):</dt>
         <dd>(Definition 5)
          <p>(Additional definition 5)</p>
          <p>(More definition 5)</p>
         </dd>
        </dl>
       </div>
    And i would like it to appear like this:

    Code:
               Title
    
    ********** Term 1: Definition 1
    ********** Term 2: Definition 2
    ********** Term 3: Definition 3
    * IMAGE ** Term 4: Definition 4
    ********** Term 5: Definition 5
    ********** Additional Definition 5
    ********** More Definition 5
    There are several divs on the page, each needing the same format, one underneath the other.

    So far, everything is floated to the left (that is the image, and dt & dd elements), but when I try putting clear: left on the dt, it obviously jumps to below the image. At the moment, it is exactly how I want it, except the whole dl list is on one line (excluding the <p> tags in the last dd), because they are all just floating left.

    Is there any way to avoid this, or force each new dt to appear on a new line without jumping below the image?

    What I have so far can be seen at http://www.nugc.net/web/committee.ph...&style=classic

    The top one is the one I am trying to get to work - the ones below it use different HTML, but they have the style I want to achieve with the top one.

    Many Thanks,

    Chris
    Last edited by Stormrider; Sep 13, 2006 at 16:26.

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whatever you're doing, it's working in Firefox. IE is a different story however.
    As what you're trying to achieve is tabular in appearance, have you considered using a table? It would make life a lot easier


    Andy


    P.S.
    Go have a pint for an old ex-pat at the Tap & Tumbler. I miss that kind of jukebox selection
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this:

    HTML Code:
    <div style="float:left; width:xxx"><img src=""></div>
    <div style="float:left;">content</div>
    <div style="clear:left;"></div>
    
    <div style="float:left; width:xxx"><img src=""></div>
    <div style="float:left;">content</div>
    <div style="clear:left;"></div>
    
    ...

  4. #4
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies

    I am using firefox, and it isn't what I want (I've just checked IE and it's even worse!). All the list appears on one line, and i want it to appear on separate lines. I don't want to use a table (I am trying to stay away from using tables for layout purposes now!), and I don't want to use excess div's to achieve it either, if i can help it. I want to try and do the whole thing in css, without editing the html if at all possible!

    There must be a way to force a line break in css without it going below the image, surely?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    If you're going to use floats, and one of the elements is longer than the other, you're going to have to apply a side margin equal to (at least) the width of the floated element.

    For example, if your floated image is 250px wide, you're going to want to apply a left-margin of (at least) 250px to your definition list. In fact, I would use exactly 250px, and then assign some padding (about 10px for example) to the left side of the definition list itself.

    That way, if your list is longer than the image, it will all appear to look like this when rendered on the screen:
    Code:
                      Title
          
          ********** Term 1: Definition 1
          ********** Term 2: Definition 2
          ********** Term 3: Definition 3
          * IMAGE ** Term 4: Definition 4
          ********** Term 5: Definition 5
          ********** Additional Definition 5
          ********** More Definition 5
     		Term 6: Definition 6
     		Term 7: Definition 7
     		Term 8: Definition 8
     		Term 9: Definition 9

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks fine in FF and IE for me? You can either set the width of the left float or add the margin-left like Dan said to the dl.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head></head>
    <body>
    <div class="(class)">
    <h3>(Title)</h3>
    <div style="float:left; width:250px"><img src="(source)" ... />.</div>
    <div style="float:left;">
        <dl>
         <dt>(Term 1):</dt>
         <dd>(Definition 1)</dd>
    
         <dt>(Term 2):</dt>
         <dd>(Definition 2)</dd>
    
         <dt>(Term 3):</dt>
         <dd>(Definition 3)</dd>
    
         <dt>(Term 4):</dt>
         <dd>(Definition 4)</dd>
    
         <dt>(Term 5):</dt>
         <dd>(Definition 5)
          <p>(Additional definition 5)</p>
          <p>(More definition 5)</p>
         </dd>
        </dl>
    </div>
    <div style="clear:left;"></div>
    </div>
    
    <div class="(class)">
    <h3>(Title 2)</h3>
    <div style="float:left; width:250px"><img src="(source)" ... />.</div>
    <div style="float:left;">
        <dl>
         <dt>(Term 1):</dt>
         <dd>(Definition 1)</dd>
    
         <dt>(Term 2):</dt>
         <dd>(Definition 2)</dd>
    
         <dt>(Term 3):</dt>
         <dd>(Definition 3)</dd>
    
         <dt>(Term 4):</dt>
         <dd>(Definition 4)</dd>
    
         <dt>(Term 5):</dt>
         <dd>(Definition 5)
          <p>(Additional definition 5)</p>
          <p>(More definition 5)</p>
         </dd>
        </dl>
    </div>
    <div style="clear:left;"></div>
    </div>
    </body>
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    So far, everything is floated to the left (that is the image, and dt & dd elements), but when I try putting clear: left on the dt, it obviously jumps to below the image.
    If I understand you correctly and you want to confine the clearing of elements to their own context then they must also be contained ina float.

    This example explains it in detail.

    http://www.pmob.co.uk/temp/flclear1.htm

    Hope it helps

  8. #8
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul:

    That looks perfect. I will try it when I get home from work tonight and report back!

    As for the margin / padding thing, I already have the padding of the overall div set to 270px, and the image margin-left to -270px. Maybe not the best way to do it, but it seems to work.

  9. #9
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, just used the 'Edit CSS' part of the firefox web developer toolbar so I could try it out without changing anything on the server

    It seems to work perfectly. I didnt need to add another div, i just set the dl to float: left (why add another div when there is a perfectly good element there to be used in the same place :P)

    It has brought up another problem but i don't think itll be too difficult to fix (or.. I may be back later with another post!)

    Thanks very much Paul!

  10. #10
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK

    I thought it worked perfectly...

    not in Internet Exploder however.

    Any ideas on how to fix this?

    http://www.nugc.net/web/committee.ph...&style=classic

    All the dd elements are just stacking up on the top line.

    Also, in firefox, the last dd element starts on a new line, rather than next to its dt, like the others. This is probably because it is much much longer and contains paragraphs, but is there any way to fix this?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You only need to float the dl and the dt not the dd. You could try something like this:

    Code:
     div#content div.committeemember dl dt {
      font-weight: bold;
      margin-right:0;
      float: left;
      clear: left;
      width:8.5em;
     	text-align:right;
     	padding-right:.5em;
     }
     
     div#content div.committeemember dl dd {
      margin-left:9em;
     }

  12. #12
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Once again, worked perfectly in both browsers (will test other browsers at work tomorrow). Many thanks!

    I just removed the float: left;. Seemed to do the trick. Im not too bothered about right aligning the titles and left aligning the text or anything, I prefer it with everything aligned left like it is.

    Cheers again, hopefully this is the last you'll see of this topic :P


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
  •