Jump to content

CSS Navigator


Recommended Posts

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.w3school.jpg

<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;}

Edited by Ben
Link to post
Share on other sites

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

Edited by thescientist
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Edited by thescientist
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...