Wrapping text around width in li

HTML & CSS
1

hey folks, i m working on a project and i wanna wrap text around a width given to li in ul. i tired the width but nothing happens. is there some other way to set a width of li? so that text wrap within that width. here is my css


<html>
	<head>
		<title>Unordered List</title>
		<style type="text/css">
		ul lorem{padding:5px}
		.lorem li{list-type:none; display:inline; height:50px; font-size:17px; border:1px dotted #f3f;padding:2px;}
		.lorem li a:link{text-decoration:none;color:#C73B0B;}
		</style>
	</head>
	
	<body>
		<ul class="lorem">
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">consectetur adipiscing elit</a></li>
			<li><a href="#">Praesent lectus lacus, porta ac dignissim non</a></li>
			<li><a href="#">rhoncus non nunc. Pellentesque</a></li>
			<li><a href="#">at feugiat ligula. Donec imperdiet porta.</a></li>
		</ul>
	</body>
</html>
2

Hi There are two solution,

put your list in one div with precise width


<div style="width: 100px">
<ol> 
   <li> ....</li>
</ol>

or you can make them float


li {
 float: left;
 width: 100px;
 clear: both;
}
3

yes sure. here u can find it. though there are 2 things
1.i didn’t get what u said about ul lorem, i used ul lorem or i might has missed the selector. is tat what ur saying?
2. i want whole li to be selected (hand/click able) rather than just the text,

4

TriLi, i went with your second suggestion and it worked. thanks!

5

Stomme, display inline is coz i want inline menu (horizontal and yes it does give it a width then but i don’t want a horizontal. i want vertical menu with width

6

Syntax error, Emaar:
ul lorem{padding:5px}

there is no such tag called “lorem”. You forgot the . first.
You could do Trilli’s first suggestion by setting a width on the ul itself.

Otherwise, this is a problem:
.lorem li{list-type:none; display:inline; height:50px; font-size:17px; border:1px dotted #f3f;padding:2px;}

Inline elements can’t haz set heights or widths. So you could also do Trilli’s second suggestion: floating the li’s will put them in block context, so you can set height and width, and they’ll stack alongside each other like inlines, so probably what you want.

7

Could you post what the result is now? I still can’t tell if you wanted a vertical menu or horizontal!

A screenshot I mean. Thanks.

8

Ah ok. Seeing your menu, you wanted to float your li’s but also set a width on them, so they stack alongside each other, but have a restricted width so long text inside wraps. Cool.

1.i didn’t get what u said about ul lorem, i used ul lorem or i might has missed the selector. is tat what ur saying?

Yes, you have
ul lorem {
}
What that says to the browser is, the tag/element called “lorem” who is a descendant of the tag/element “ul”. Now, there is no <lorem> tag, and your syntax (the way you said the command in CSS) is being skipped by the browser.

You meant to say ul.lorem, which tells the browser "the tag/element called “ul” who also has the class of “lorem”. Without the “.” (the dot), you were using just the descendant selector (the space between the two words is a selector in CSS).

  1. i want whole li to be selected (hand/click able) rather than just the text,

What I usually do to get that is, I don’t float the lis… I leave them alone (I say “display: inline” for Internet explorer because it needs you to say something about li) and instead, I float the anchors.

ul.lorem {
list-style: none;
margin, padding, width, whatever
}
ul.lorem li {
display: inline; /only IE really needs this, other browsers will just let the li’s collapse on their own/
}
ul.lorem a {
float: left;
the width you want;
the height you want;
any padding etc;
}

Since the anchor is the part that’s clickable, if you make it a block by floating it, you can then set a height and width on it, to make it as big as you want, and all of that area will be clickable.