Slightly odd issue with <ul>/<li>

**james_littler** · Feb 13, 2008 11:15

Hia, I'm trying to make a navbar which looks like the one on this site

http://www.devdefined.com/

i have the basic bar but i want to have a seperator (pole) between each link (I have one made as an image), and I'm having a bit of an issue styling the ul li.

It's probably an easy one..i just cant see it.......long day

the page is here
www.ats-heritage.co.uk/Testing/WhiteSails

cheers

**Tyssen** · Feb 13, 2008 23:23

Put the bg-image on the list item, not the anchor and then use appropriate right margin/padding.

**james_littler** · Feb 14, 2008 03:46

sorry if im being thick but i cant get that to work either...
here's what i have so far

Code CSS:

#navCentre ul{
	list-style: none;
}
#navCentre li{
	display:inline;
	position: relative;
	float: right;
	top: 0px;
	height: 43px;
}
 
#navCentre li a{
	float:left;
	background: url('Images/Nav/Seperator.png') no-repeat;
	padding-right: 50px;
	text-decoration:none;
}

is that what you meant or have i gone completely off?

**Tyssen** · Feb 14, 2008 04:05

No, I meant:

Code:

#navCentre ul{ 
    list-style: none;
} 

#navCentre li{ 
    display:inline;
    position: relative;
    float: right;
    top: 0;
    height: 43px;
    background: url('Images/Nav/Seperator.png') no-repeat;
    padding-right: 50px;
} 
 
#navCentre li a{ 
    float:left;
    text-decoration:none;
}

**james_littler** · Feb 14, 2008 04:22

cheers..works beautifully with a few tweaks here and there.

I managed to make the site horizntally fluid yesterday but couldnt get the vertical fluidity to work properly, are there any problems in my code that would stop this from working?

I changed #main to height 100% and sorted the margins to make it look good but i couldnt get the #content div to function properly, i had it set to height 100% with margins to keep it where it should be but that wouldnt work..the whole thing just stayed fixed.

I'm confused

**Tyssen** · Feb 14, 2008 04:42

Just had a look at your HTML to see what you've done and have to say, it's badly structured. There's way too many elements, all the purely decorative ones come before all the content but fundamentally, the #left, #centre, #right thing is all wrong - all you need is a single element for your main content area with left & right borders.

**james_littler** · Feb 14, 2008 05:15

yea thats all just for the rounded corners. how would i go about making it all one element and keep the corners looking as they do?

**james_littler** · Feb 14, 2008 07:36

ok on another note

i have my second menu level in now, but i cant stop the seperator.png (which i want on the first level) appearing at the end of the 2nd level <li>s

the page is live at the following url
www.ats-heritage.co.uk/Testing/WhiteSails

I think it's inheriting it from the first level...how can i stop this?

cheers