SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Dec 7, 2007, 13:54 #1
- Join Date
- Dec 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
vertical 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, 14:07 #2
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Dec 7, 2007, 14:36 #3
- Join Date
- Dec 2007
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This works great for a vertical menu. Is there some way to make this a horizontal menu with multi-line links?
-
Dec 7, 2007, 14:57 #4
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
Bookmarks