SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  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,801
    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,206
    Mentioned
    264 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,198
    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,206
    Mentioned
    264 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,198
    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!

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It looks like you just created a ul then assigned it characteristics of a div class .
    Actually I REMOVED your DIV, keeping the UL you already had and joined the style that you had given the div with the UL. this whay i meant by :
    2) Dont wrap UL in DIVs unless is absolutely necessary, as a UL is already a block element
    Generally speaking, when coding... less= better.
    No, <li> is also a block level element.
    However you must remeber that OL and UL can only have LIs as direct children. This is done for semantic reasons.

    What I was trying to get at is that you can stream line your code when possible. Lets say you had content tat you knew as going to be a single paragraph of text. If you can it is better to do this <p class="example"></p> than this <div class="example"><p><p></div>. in your example, I saw no reason for the DIV to wrap around the UL , I got rid of it.

  9. #9
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Actually I REMOVED your DIV, keeping the UL you already had and joined the style that you had given the div with the UL.
    This helps me understand the concept of classes and block level elements, thanks for the explanation. Lots to learn!

    Thanks ralph.m and TechnoBear for your help as well!


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
  •