CSS Navigator

[Ben]

Hi,I've designed a template for my online portfolio and now I'm attempting to code it using HTML and CSS. I'm a bit stuck now and I wondered if anyone could help me please. :)I have a few hyperlinks in my navigator bar, but underneath "PORTFOLIO" I want several more hyperlinks but I need these new links to be a different size font, and I need to move the hyperlinks several spaces to the left without moving the "box" that they are in. I hope that makes sense.This is my navigator bar so far, and the HTML and CSS code.

<ul><li><a href="index.htm">Home</a></li><li><a href="portfolio.htm">Portfolio</a></li><li><a href="about.htm">About</a></li><li><a href="contact.htm">Contact</a></li></ul>

ul{	list-style-type:none;	margin-top:338px;	margin-bottom:0px;	margin-right:0px;	margin-left:651px;	padding:0;}a:link,a:visited{	display:block;	font-family: “Trebuchet MS”, sans-serif;	font-size: 14px;	font-weight:bold;	color:#08355c;	line-height: 2.2em;	background-color:#ffffff;	width:130px;	text-align:left;	padding:0px;	text-decoration:none;	text-transform:uppercase;}a:hover,a:active{	background-color:#ffffff;}

[thescientist]

I would give your lists unique id's. Then you can target the similar selectors for different id's.

instead of ul{  //code }do#main_nav ul{ //code}

this way instead of targeting all unordered lists, you are only targeting the unordered list with the id main_nav. if you put #main_nav ul, before all your other selectors, they will only effect that specific unordered list.then, do the same thing for your next list, say #sub_nav (i.e. #sub_nav ul, etc) and then make your new list using HTML where you want it, much in the same way you made the previous one. Now you should be able to style this new one without effecting any of the style's of the other one. Basically you will how two lists, with the same selectors, but with different id's. Once that's established, you can go about positioning the sub list relative to the main list

[Rufus]

@thescientist: I wouldn't use #nav ul, just give the ul itself the id. No need to wrap a block level element in a div or anything like that.

[thescientist]

well, in my eyes, div's are meant to designate specific sections of a page, from other sections of a page; from a semantic perspective. There could end up being more elements to be associated and positioned within the #nav, and having a container acting as parent element to all that would be helpful. So while, yes, he doesn't have to, I think you find most developers do this anyway to provide structure to a page and for other useful benefits. Or maybe it's just me and I'm just strange. :)Plus I like using the parents a lot for making child selectors in my CSS.

[dsonesuk]

if you want to use the same menu structure for say top nav, and left nav or even footer nav dynamically, having id set to a container would be better, as you don't have to worry about duplicating the id ref set to ul.