I have LI’s within an UL. Inside each LI is a header (magazine title) and some descriptive text (the magazine’s address). If the descriptive text exceeds the length of the LI, I want it to wrap to the next line but not underneath the header. Please see attached image.
I tried several different varieties of display: attributes, but without luck. Any help?
Here’s the CSS:
/* Magazine title. /*
h2 {
display: inline-block;
color: #000;
font-size: 14px;
margin: 0 7px 0 0;
}
/* Div which contains the descriptive text. */
ul div {
display: inline;
}
Doesn’t seem to be working. The <h2> is inside the <ul>, by the way, as is the <div> which contains the HTML.
(Sorry, I forgot to show the HTML…)
<ul>
<li><h2>Funny Times</h2>c/o The Editors, PO Box 18530, Cleveland Heights, OH 44118</li>
<li><h2>Harvard Business Review</h2>60 Harvard Way, Boston, MA 02163</li>
<li><h2>New Yorker, The</h2>4 Times Square, New York, NY 10036</li>
<li><h2>Reader's Digest</h2><div>Pay is $650. Editor's name is Norman S Hotz. Lakeside Studio, PMB 162, 4195 Tamiami Trail South, Venice, FL 34293</div></li>
</ul>
Thanks for your input, Dresen. I hadn’t thought about using a DL. However, would using a DL still allow me to have the rows colored as I do? Right now, both the title and description are inside a single element (<li>), so I can style that element to have a shaded row with rounded corners etc. In a DL, it seems like I will have two separate blocks without a parent “row.” (Hope that made some sense.)
Very tempted to just settle for a table…
I suppose one option is to nest the DT and DD inside a DIV, like so:
no, I thought you were trying to build columns… still I would NOT use H2… H2 carry a semantic weight that’s disproportionate its use in this implementation.
try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.maglist, p{margin:0; padding:0; list-style:none;}
.maglist { width:350px;background:silver; }
.title{ font-style:italic; font-size:120%; white-space:nowrap }
.des{font-family:Arial, Helvetica, sans-serif; font-size:80%; line-height:1.5; }
.maglist p span { display:table-cell; vertical-align:top }
.maglist li {display:block;}
.maglist li:nth-child(2n){background:gray;}
</style>
</head>
<body>
<ul class ="maglist" >
<li> <p>
<span class="title">Mag Title1:</span>
<span class="des"> short mag description..</span>
</p></li>
<li><p>
<span class="title">another Mag Title2: </span>
<span class="des">short mag description..short mag description.. short mag description..</span>
</p></li>
<li><p>
<span class="title">another even Longer Mag title: </span>
<span class="des">short mag description..short mag description.. short mag description.. with an even even even longer description</span>
</p></li>
<li><p>
<span class="title">MagTitle21:</span>
<span class="des">short mag description..short mag description.. short mag description..</span>
</p></li>
</ul>
</body>
</html>
You’re right, <span> is semantically more correct. Just made the change as you suggested. However, still having the issue of the description wrapping underneath the title. Tried a whole bunch of display: combinations (inline, inline-block, etc), as well as giving the title span a height, with no luck.
Some browsers require the use of table-row as well.
That was older versions of Firefox (ff2 and older I believe) and it needed an explicit table row to be declartion to be present even though it was supposed to construct this automatically and anonymously. However, it was also found out that it was only an issue when the css was in the head and external files didn’t suffer from the bug.
These days the modern browsers seem to be handling it with no problems so I wouldn’t specifically add elements just to apply the rule but if there is already something in place that can be used then adding the property is fine.
Note that the display:table properties don’t work in ie7 and under though - but I guess you all knew that anyway
The first three there are invalid HTML. Your <li>s can contain either inline text or block elements, but not both. So when you start with an <h2>, any subsequent text must be wrapped in a <p> or <div>, as you have done with the last.
Agree with others though that <h2> is probably overstating it - <strong> might be better.
Not just nasty, but not allowed. A <dl> can only contain <dt>s and <dd>s, nothing else. There is no easy way to achieve the effect you are trying for with definition lists, short of wrapping each <dt>/<dd> pair in a separate <dl>, but that is equally awful - if you can get display:table-cell to work then that is probably the best way to go.
Actually that list is perfectly valid and will pass validation no problem but you are 100% correct that it is not semantically correct to do it that way.
Agree with others though that <h2> is probably overstating it - <strong> might be better.
While not arguing for arguments sake I have to disagree here because the title is obviously a heading and there are a list of headings followed by content so a list structure with headings at the suitable level are the semantic way to do this.
Spans or strongs would not be the correct elements to use in this case as there is no real semantics implied to the structure by their use and they are inline elements suggesting that the content is all inline which it is not. It is a heading followed by some text that relates to the heading.
Although I guess a lot of this is subjective so arguments could be made for different structures depending on the meaning of the data.
Lastly display table-cell isn’t needed as the example I gave above is simpler and fully working and does exactly what the op wanted all the way back to IE6.
I think it’s great that we all come up with different way of doing the same thing. We don’t always have to agree as it makes for a good discussion and a lot of times there is room for arguing one way or another.
Thanks everyone for your thoughts and input! I learned a few things from each of you, and I appreciate it. I second what Materialdesigner said about Paul’s solution: very clever!
