Off-center List in a vertical navigation bar problem

**ibbieta** · Jan 30, 2012 18:20

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>

**dresden_phoenix** · Jan 30, 2012 18:50

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

**ibbieta** · Jan 30, 2012 19:35

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!

**TechnoBear** · Jan 31, 2012 08:08

Originally Posted by ibbieta

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.

Originally Posted by ibbieta

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.

Originally Posted by ibbieta

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.

)

**ralph.m** · Jan 31, 2012 08:13

Originally Posted by ibbieta

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.

**TechnoBear** · Jan 31, 2012 08:54

Originally Posted by ralph.m

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.

**ralph.m** · Jan 31, 2012 09:35

Originally Posted by TechnoBear

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!

**dresden_phoenix** · Jan 31, 2012 10:01

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.

**ibbieta** · Jan 31, 2012 11:42

Originally Posted by dresden_phoenix

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!

User Tag List

Thread: Off-center List in a vertical navigation bar problem

Thread Tools

Display

Off-center List in a vertical navigation bar problem

Bookmarks

Bookmarks

Posting Permissions