SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    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.

  2. #2
    Function Curry'er JimmyP's Avatar
    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)

  3. #3
    SitePoint Member
    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?

  4. #4
    Function Curry'er JimmyP's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •