Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    64
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Line Breaks in navigation link row

    Such a dumb problem is driving me crazy. I have a row of navigation links across the top of the page. But the links have very long names - Holistic Health Services, Personal Life Coaching, etc. I wanted it to look like this:

    Code:
    Holistic     Personal                 Blood
    Health       Life          Green      Cell
    Services     Coaching      Living     Analysis
    But if I put the line break between "Health" and "Services", for example, the word "Personal" appears level with "Services". This would be super easy for me to achieve with tables, but I'm trying to stick to an all CSS design for once. Help please!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello melissa820,
    Good for you for moving away from tables!
    Have a look at this. Just copy/paste the whole thing into a new .html document.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="" content="authored by http://nopeople.com/design" />
    <title>CSS ul navbar with no images</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    	font: 1.1em arial, helvetica, sans-serif;
    	color: #fff;
    	text-align:center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container {
    	width: 800px;
    	margin: 50px auto;
    	padding: 10px 0 200px 0;
    	background: #9CC;
    }
    ul#navlist {
    	background: #036;
    }
    #navlist li { 
    	display: inline;
    }
    #navlist li a {
    	width: 200px;
    	line-height: 30px;
    	color: #fff;
    	background: #036;
    	text-decoration: none;
    	float: left;
    }
    #navlist li a:hover {
    	background-color:#c0c0c0;
    	color: #00f;
    }
    #valid {
    	width: 180px;
    	margin: 30px auto;
    	overflow: auto;
    }
    #valid a {
    	float: left;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <ul id="navlist">
                <li><a href="#">Holistic <br /> Health <br /> Services</a></li>
                <li><a href="#">Personal <br /> Life <br /> Coaching</a></li>
                <li><a href="#"> <br /> Green <br /> Living</a></li>
                <li><a href="#">Blood <br /> Cell <br /> Analysis</a></li>
            </ul>
        <!--end container--></div>
            <div id="valid">
                    <a href="http://jigsaw.w3.org/css-validator/check/referer">
                        <img src="http://jigsaw.w3.org/css-validator/images/vcss" width="88" height="31" alt="Valid CSS!" />
                    </a>
                    <a href="http://validator.w3.org/check?uri=referer">
                        <img src="http://www.w3.org/Icons/valid-xhtml10" width="88" height="31" alt="Valid XHTML 1.0 Strict" />
                    </a>
            <!--end valid--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    melissa820 (04-30-2009)

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    64
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so much, that worked perfectly and it was easy (which is a huge plus!)


  •  

    Posting Permissions

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