CSS Newbie Help

ncriptide posted this at 13:26 — 21st August 2007.

Joined: Aug 2007

Okay, just learning css as you will soon see. This is the beginning of my first "official" css site.

I'm trying to layout the navigation, and my UL is not acting like a list. Can someone please look at the following test site and take a gander at the css and let me know where I'm missing it. I'm sure I'm missing it a lot, but any help would be greatly appreciated.

In addition, I don't see where I specified list-style-type as none (yet, that IS the effect I want to achieve). I just want to understand the "whys and why nots" of what I am doing and this stuff is making me crazy.

Here's the link:
http://www.carolinaorthopedics.com/test/index.html

THANKS!!!

Magenta posted this at 15:59 — 21st August 2007.

She has: 47 posts

Joined: Jul 2007

As a newbie myself, I'm reluctant to answer other people's questions but I think I may have figured out the problem. It may have something to do with the default display for

. I added the following code to your css and the lists displayed properly, ie: a vertical column.

div#services ul li {
display: block;
}

div#physicians ul li {
display: block;
}

(Oooh, I hope I got this right. )

ncriptide posted this at 17:51 — 21st August 2007.

He has: 17 posts

Joined: Aug 2007

THAT'S IT!

Thanks so much. Probably a beginner mistake, but it has taken me all day.

Thanks for your help - I owe you.

kazimmerman posted this at 20:36 — 21st August 2007.

He has: 698 posts

Joined: Jul 2005

Just so you know, the actual reason (although the solution Magenta provided works) that it was displaying horizontally was because of this declaration:

div#headNav ul, li {
	padding: 3px 15px;
	list-style: none;
	display: inline;
}

'
Because of the ',' you have used, all li elements are displayed inline. Instead, you could do

div#headNav ul, div#headNav li
...

'
to prevent the horizontal orientation.

Kurtis

Magenta posted this at 21:21 — 22nd August 2007.

She has: 47 posts

Joined: Jul 2007

mscreashuns, I'm glad you posted the real cause of the problem as I looked at that line of code but didn't know it was wrong, so I learned something too.

ncriptide, while my solution wasn't technically wrong, mscreashun's is best. (as you can probably see. :blush: )

sitesupport posted this at 21:34 — 22nd August 2007.

He has: 190 posts

Joined: Jun 2007

this is kinda off topic, but your homepage paragraph doesnt align properly in IE6, it's too big and shows up under the yellow space. Maybe you can use % to set the width of your layout.