...

View Full Version : ul wordwrap problem



jake7363
11-22-2008, 04:52 PM
Hi,
I am using CSS for an unordered list with a text description after the list item.
I do want it to wrap, which it is doing. But I want the wrapped text to begin under the first character on the first line of the description, not under the list item.

In other words, if two lines of the description exist, the second line should start directly under the first line of the description.
I hope I'm not being too confusing here..

I am using <span></span> around the description, but I am not sure how to align it correctly.


Any help is appreciated.

Thanks in advance,
Jake

GardenGnome2
11-22-2008, 05:06 PM
Can we see a code because the text should begin directly under the text on top in a list.

jake7363
11-22-2008, 05:33 PM
Sure, here it is... I'm still not sure I am communicating accurately. But see what you think...

CSS:
.remarks {
padding-left:15px;
padding-right:5px;
margin-left:10px;
margin-right:10px;
word-wrap: break-word;

width:400px;

text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}




HTML:
<ul>
<span class="art">Art, Arforms, Artists</span>
<li>Abbey Rodeo <span class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!</span>
</li>
<li>Carlos Alberto Calabrese </li>
<li>CD Baby </li>
<li>David J. Fox </li>
<li>Hillsong </li>
<li>Kid Brothers of St. Frank, Co. </li>
<li>Local Bands </li>
<li>Rich Mullins 1</li>
<li>Rich Mullins 2 </li>
<li>The Girls </li>
<li>The Indie Band Survial Guide </li>
<li>Trumpet in the Land </li>
</ul>

GardenGnome2
11-22-2008, 06:13 PM
Not exactly sure what you want, but...


<style type="text/css">
.remarks {
word-wrap: break-word;

width:400px;

text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}
</style>

<ul>
<span class="art">Art, Arforms, Artists</span>
<li>Abbey Rodeo<br />
<span class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!</span>
</li>
<li>Carlos Alberto Calabrese </li>
<li>CD Baby </li>
<li>David J. Fox </li>
<li>Hillsong </li>
<li>Kid Brothers of St. Frank, Co. </li>
<li>Local Bands </li>
<li>Rich Mullins 1</li>
<li>Rich Mullins 2 </li>
<li>The Girls </li>
<li>The Indie Band Survial Guide </li>
<li>Trumpet in the Land </li>
</ul>

Excavator
11-22-2008, 06:13 PM
Hello jake7363,
It looks like your ul is not formed quite right. You want <span class="art">Art, Arforms, Artists</span> to be a title of a list item but it's only enclosed with span tags and that doesn't make it part of the ul.
Maybe a Definition List would work better for you.
Have a look at this:

<!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">
<!--
#wrap {
width: 800px;
background: #999;
}
dl {
width: 400px;
background: #CCC;
margin: 20px;
}
dt {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
dd {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.remarks {
color: #0F0;
margin-left: 65px;
}
ul{
margin-left: -30px;
}
-->
</style>
</head>

<body>
<div id="wrap">
<dl>
<dt><span class="art">Art, Arforms, Artists</span></dt>
<dd>Abbey Rodeo</dd>
<dd class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!Great band from Lake County. Go to their gigs and see all of your Lake County friends!Great band from Lake County. Go to their gigs and see all of your Lake County friends!Great band from Lake County. Go to their gigs and see all of your Lake County friends!</dd>
<dd>
<ul>
<li>Carlos Alberto Calabrese </li>
<li>CD Baby </li>
<li>David J. Fox </li>
<li>Hillsong </li>
<li>Kid Brothers of St. Frank, Co. </li>
<li>Local Bands </li>
<li>Rich Mullins 1</li>
<li>Rich Mullins 2 </li>
<li>The Girls </li>
<li>The Indie Band Survial Guide </li>
<li>Trumpet in the Land </li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

jake7363
11-22-2008, 06:23 PM
Yeah, I thought I wasn't clear enough...
Let me try one more time...

List item 1 description line 1
description line 2

What I am trying to get is for "description line 2" to line up under the "d" in description line 1. It is now lining up under the "L" in List Item 1. Hope that clarifies....


Thanks again,
Jake



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum