vertical nav with multi-line text

**spcalia** · Dec 7, 2007, 13:54

I tried using a ul to create this nav, but couldn't make it be horizontal with multi-line text (with <br /> for each nav 'button'. What is the right approach to accomplish this? Should I use the same concepts as one uses for a table-less layout?

Thank you in advance for your help.

**JimmyP** · Dec 7, 2007, 14:07

Try this....

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiline Vertical Nav</title>
<style type="text/css">
<!--
#navigation {
	width: 200px;
}
#navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#navigation a {
	display: block;
	width: 150px;
	padding: 10px 25px;
	color: white;
	background: #0066FF;
}
#navigation  a:hover {
	background: #004ABB;
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">This is the first multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 2nd multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 3rd multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 4th multi-line navigstion link!!!</a></li>
</ul>
</div>
</body>
</html>

**spcalia** · Dec 7, 2007, 14:36

This works great for a vertical menu. Is there some way to make this a horizontal menu with multi-line links?

**JimmyP** · Dec 7, 2007, 14:57

Yep...Sorry ... Here is the horizontal one:

(All that is needed is a specified <a> width...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiline Vertical Nav</title>
<style type="text/css">
<!--
#navigation {
}
#navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#navigation  li {
	display: inline;
}
#navigation a {
	display: block;
	padding: 10px 25px;
	color: white;
	background: #0066FF;
	float: left;
	width: 150px;
}
#navigation  a:hover {
	background: #004ABB;
}
-->
</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">This is the first multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 2nd multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 3rd multi-line navigstion link!!!</a></li>
<li><a href="#">This is the 4th multi-line navigstion link!!!</a></li>
</ul>
</div>
</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: vertical nav with multi-line text

Thread Tools

Display

vertical nav with multi-line text

Bookmarks

Bookmarks

Posting Permissions