SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Off-center List in a vertical navigation bar problem

    Hi all - I am new to the forum and web development so any help would be appreciated.

    I am trying to create a vertical navigation bar using a div and li requirements. I can't figure out why the list items are off center from the div. The example is at http://urbanfarmhouseonline.com/testmisc

    and I will post the markup below.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
    <title>New Web Project</title>
    <style type="text/css">

    #services_nav {
    position: relative;
    width: 125px;
    background: #EDC25E;
    margin-left: 15px;
    border-radius: 15px;
    padding: 5px;

    }

    #services_nav ul {
    display: inline-block;
    list-style-type: none;
    }

    #services_nav ul li a{
    display: block;
    color: black;
    background: white;
    width: 120px;
    text-align:center;
    margin: 5px;
    padding: 10px;
    border: 2px solid gray;
    border-radius: 15px;
    border-color: #888888;
    text-decoration: none;
    }

    #services_nav ul li a:hover,a:active
    {
    background-color:#7A991A;
    }

    </style>
    </head>
    <body>
    <h1>New Web Project Page</h1>

    <div id="services_nav">
    <ul>
    <li><a href="services_ed">Edible Landscaping</a></li>
    <li><a href="services_cc">Cooking Classes</a></li>
    <li><a href="services_we">Workshops and Events</a></li>
    <li><a href="services_ec">Educational Consulting</a></li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Your items weren't off center, you gave #services_nav too small a width, the list was just merely overflowing horizontally.

    I think this is what you want:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Style-Type" content="text/css; charset=utf-8" />
    <title>New Web Project</title>
    <style type="text/css">
    
    
    #services_nav {
    display:-moz-inline-box;
    display:inline-block;/* you could also float this...*/ 
    position: relative;
    background: #EDC25E;
    margin-left: 15px;
    border-radius: 15px;
    padding: 5px;
    list-style-type: none;
    }
    
    
    #services_nav  li a{
    display: block;
    color: black;
    background: white;
    width: 120px;
    text-align:center;
    margin: 5px;
    padding: 10px;
    border: 2px solid gray;
    border-radius: 15px;
    border-color: #888888;
    text-decoration: none;
    }
    
    #services_nav li a:hover,a:active
    {background-color:#7A991A;}
    
    </style>
    </head>
    <body>
    	<h1>New Web Project Page</h1>
    	<ul id="services_nav" >
    	<li><a href="services_ed">Edible Landscaping</a></li>
    	<li><a href="services_cc">Cooking Classes</a></li>
    	<li><a href="services_we">Workshops and Events</a></li>
    	<li><a href="services_ec">Educational Consulting</a></li>
    	</ul >
    </body>
    </html>
    A couple of additional unrelated suggestions to keep in mind:
    1) DONT use a transitional doctype.
    2) Dont wrap UL in DIVs unless is absolutely necessary, as a UL is already a block element


    Hope that helps

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I wanted, but I'm a little confused by <ul id="services_nav" >

    I thought you had to specify the ul characteristics in the css e.g. #nav_services ul { ...etc

    It looks like you just created a ul then assigned it characteristics of a div class . Guess I didn't know you could do that. You mention ul is a block level element - does that mean li is inline?

    And one more question - how did you post the markup in a code box on this forum?

    Thanks for your quick help!

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ibbieta View Post
    That's exactly what I wanted, but I'm a little confused by <ul id="services_nav" >

    I thought you had to specify the ul characteristics in the css e.g. #nav_services ul { ...etc

    It looks like you just created a ul then assigned it characteristics of a div class . Guess I didn't know you could do that.
    You can add an id (or a class) to any element to target it directly. There's no need to wrap a <div> round an element just to apply styling.

    Quote Originally Posted by ibbieta View Post
    You mention ul is a block level element - does that mean li is inline?
    No, <li> is also a block level element. You can find lists of block level elements and inline elements in the SitePoint Reference.

    Quote Originally Posted by ibbieta View Post
    And one more question - how did you post the markup in a code box on this forum?
    If you click on the "Go Advanced" button below the reply box, it will bring up an interface with more options. You can use the # button on the panel to wrap [CODE] tags around the selected text, or you can use the Syntax drop-down menu to choose specific code types like HTML, CSS, etc. You can also type the [CODE] tags by hand. Remember to put a / in the closing one, like any HTML tag. (If I type one as a demo, it will assume all the enclosed text is code, and display that rather than the tags. )

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ibbieta View Post
    how did you post the markup in a code box on this forum?
    As TechnoBear said ... but also in simple message view you can manually type [code] ... [/code] tags around your code (though hopefully that will soon be added as a button so that it doesn't have to be typed.

    EDIT: Oops, TB did actually say that. Sorry.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ralph.m View Post
    As TechnoBear said ... but also in simple message view you can manually type [code] ... [/code] tags around your code (though hopefully that will soon be added as a button so that it doesn't have to be typed.

    EDIT: Oops, TB did actually say that. Sorry.
    Apology accepted. I see you were going to keep the other secret to yourself - that if you type "noparse" tags round your [code]...[/code] tags, you can get them to show up without being, well, parsed. Just as well I decided to reply to you, or I'd never have discovered that.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I see you were going to keep the other secret to yourself - that if you type "noparse" tags
    Ha ha, I just discovered that trick a few weeks ago, so it is my new toy!


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
  •