SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member parboy's Avatar
    Join Date
    Jan 2010
    Location
    La Selva Beach, CA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alternate to usual list?

    Hello

    I run into a situation often where I have several short descriptions in a restaurant menu. The short descriptions each fit easily in the column width. A few entries require a 2nd line usually listing options e.g., "with chicken, shrimp or beef."

    Naturally, I want the line spacing to be tighter when there is a two line entry so it separates as one distinct entry from the one above or below. I can wrap each entry in <p>'s or <li>'s and use <br>'s for those few 2-line entries, then add some top-margin to the <p>'s or <li>'s to achieve the affect.

    What I want to do is wrap the whole thing in one <p> and insert <br>'s where needed and somehow control the line height after the <br>. This would make the coding much cleaner and easier to build - any idea how to do this?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    With the element containing the entries you can just set the line-height of it and even if it goes onto 2 lines (you ultimately have little control over that) you can still have a margin set to space it out from the other content.

    Couldn't you just do that? Unless I'm missing something lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member parboy's Avatar
    Join Date
    Jan 2010
    Location
    La Selva Beach, CA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan - thanks for replying.

    I think you might be missing something in this problem. Here's some sample code:

    HTML Code:
    <p>Fresh Odwalla juices<br />
    Orange, grapefruit, tangerine (seasonal)<br />
    small 2.00&nbsp;&nbsp;large 2.50</p>
    <p>Fresh Gizdich apple juice</p>
    <p>Martinellis apple juice (filtered)</p>
    <p>Odwalla Honey Lemonade</p>
    <p>Tomato juice</p>
    <p>Cranberry juice</p>
    <p>small 1.50&nbsp;&nbsp;large 2.00</p>
    You see that Odwalla juices is folowed by a list of juices and then pricing for small and large. Those 3 lines should be tighter than the general line-height between <p> entries. It's done here by setting a line-height and a top-margin for <p>. The top margin doesn't affect the wrapped text so those lines are tighter. I would like to wrap the whole block in one <p> tag and then control the breakline tags so that they keep the juice lines together. See sample image attached.

    I may not be able to simplify this coding - but worth investigating.
    Attached Images Attached Images

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    With your current markup it'd be nearly impossible to have a universal setting that would work in all instances (besides manually setting a value to each element)

    Are y ou sure you can't modify hte HTML?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member parboy's Avatar
    Join Date
    Jan 2010
    Location
    La Selva Beach, CA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I may have explained that poorly. I am interested in changing the HTML... but as I started to type out the way i would prefer to do it, I realized that the separate entries require block level tags to define them as separate entries.

    Pardon the inquiry - I think I got a bit too close to the forest to see the trees. Ryan, thanks for trying to make sense of my half-baked idea.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could do it simply if you used margins to separate the elements and didn't use a large line-height.

    In reality you shouldn't use breaks to make space anyway.

    A nested list would be more semantic (but it seems more like tabular data to me though).

    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">
    ul.juice,ul.juice ul {
        margin:0;
        padding:0;
        list-style:none;
        line-height:1.2;
        background:#ccc;
        width:300px;
    }
    ul.juice ul{width:auto}
    ul.juice li{margin:10px}
    ul.juice li li{margin:0 10px}
    
    </style>
    </head>
    <body>
    <ul class="juice">
        <li>Fresh Odwalla juices
            <ul>
                <li>Orange, grapefruit, tangerine (seasonal)</li>
                <li>small 2.00&nbsp;&nbsp;large 2.50</li>
            </ul>
        </li>
        <li>Fresh Gizdich apple juice</li>
        <li>Martinellis apple juice (filtered)</li>
        <li>Odwalla Honey Lemonade</li>
        <li>Tomato juice</li>
        <li>Cranberry juice</li>
    </ul>
    </body>
    </html>
    The indent on the nested list could be removed if not desired but it makes visual sense this way.


Tags for this Thread

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
  •