Off-center List in a vertical navigation bar problem

HTML & CSS
1

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>

    &lt;div id="services_nav"&gt;
&lt;ul&gt;
	&lt;li&gt;&lt;a href="services_ed"&gt;Edible Landscaping&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="services_cc"&gt;Cooking  Classes&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="services_we"&gt;Workshops and Events&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="services_ec"&gt;Educational Consulting&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;

</html>

2

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:

<!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

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

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.

No, <li> is also a block level element. You can find lists of block level elements and [URL=“http://reference.sitepoint.com/html/inline-elements”]inline elements in the [URL=“http://reference.sitepoint.com/html”]SitePoint Reference.

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

 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

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. :rolleyes: )

5

As TechnoBear said … but also in simple message view you can manually type [noparse]

 ...

[/noparse] tags around your code (though hopefully that will soon be added as a button so that it doesn’t have to be typed. :slight_smile:

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

6

Apology accepted. :wink: I see you were going to keep the other secret to yourself - that if you type “noparse” tags round your [noparse]

...

[/noparse] tags, you can get them to show up without being, well, parsed. :slight_smile: Just as well I decided to reply to you, or I’d never have discovered that. :cool:

7

Ha ha, I just discovered that trick a few weeks ago, so it is my new toy!

8

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 :

  1. 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

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!