SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Dec 7, 2007, 15:06 #1
- Join Date
- Dec 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
horizontal nav with multi-line text?
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.
-
Dec 7, 2007, 15:56 #2
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Dec 7, 2007, 16:31 #3
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Dec 7, 2007, 16:32 #4
- Join Date
- Dec 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Dec 7, 2007, 16:32 #5
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
posted above
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Dec 7, 2007, 16:40 #6
- Join Date
- Dec 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That's it J.P.. Thank you.
Bookmarks