horizontal nav with multi-line text?

**spcalia** · Dec 7, 2007, 15:06

Thank you for showing me how to do this with a vertical nav.

I would like to have horizontal nav with multi-line text.

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.

**Centauri** · Dec 7, 2007, 15:56

Shouldn't be any reason why this cannot be done using the semantically correct unordered list. Can you post up the code you have tried?

**JimmyP** · Dec 7, 2007, 16:31

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>

**spcalia** · Dec 7, 2007, 16:32

Code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>seeker site navigation</title>
<style>
body {
padding: 1em;
}
#navigation {
width: 600px;
background-color: #cff;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: .5em;
padding-left: 2em;
}
#navigation li {
display: inline;
}
#navigation span #investigation{
padding: 1em 1em 2em 1em;
font-size: .8em;
color: #009;
font-family: "Times New Roman",Times, serif;
font-weight: bold;

}
#navigation span {
padding-top: 4em;
padding-left: 1em;
padding-bottom: 0;
font-size: .8em;
color: #009;
font-family: "Times New Roman",Times, serif;
font-weight: bold;

}
#navigation a:link, #navigation a:visited {
font-family: Verdan, Arial, Helvitica, san-serif;
font-weight: bold;
font-size: .7em;
color: #333;
text-decoration: none;
border: 0;
margin-right: 2em;
padding: 2em 2em 2em 0;

}
#navigation a:hover {
color: #009;
}

</style>
</head>
<body>

<div id="navigation">
<span id="investigation">The following pages are offered for you further investigation

/span><br />
<span>Introduction to MasterPath and the Light and Sound Teachings</span><br />
<ul>
<li><a href="#">Light and Sound<br />is the Cutting Edge<br />of Spirituality</a></li>
<li><a href="#">The Human Dilemna<br />of the Honest<br />Spiritual Seeker</a></li>
<li><a href="#">Distinctions Between Prayer, Meditation,<br />and Contmplation</a></li>
</ul>
<span>Events, Materials, and Seeker Informaton</span>
<ul>
<li><a href="#">Video Clips of Sri Gary Olsen</a></li>
<li><a href="#">Introductory Materials</a></li>
<li><a href="#">Calendar of MasterPath Meetings</a></li>
</ul>
</div>
</body>
</html>

**JimmyP** · Dec 7, 2007, 16:32

posted above

**spcalia** · Dec 7, 2007, 16:40

That's it J.P.. Thank you.

The SitePoint Forums have moved.

User Tag List

Thread: horizontal nav with multi-line text?

Thread Tools

Display

horizontal nav with multi-line text?

Bookmarks

Bookmarks

Posting Permissions