SitePoint Sponsor

User Tag List

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

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    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?

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

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

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

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it J.P.. Thank you.


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
  •