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?

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.

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?

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).


<!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.

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 :slight_smile:

Hey Ryan - thanks for replying.

I think you might be missing something in this problem. Here’s some sample 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.