Jump to content

ul type navigation HELP!


XHTMLboy
 Share

Recommended Posts

Hi, just wondering if anyone could help me as i have just been learning xhtml and i am now going on to css. In a book i got it told me to use the following code to make a navigation for a webpage.

<ul class="nav"><li><a href="#">Home</a></li><li><a href="#">support</a></li></ul>

But the only trouble is, when i go to load up the web page, it desplays bullet points at the start of my link. But all i want is a like that could get me to differentpages. I would be very gratefull if you could help me PLEASE!!

Edited by XHTMLboy
Link to comment
Share on other sites

In your CSS file/style tags, use:ul {list-style-type: none;}That will get rid of your bullet points. It's a good idea to be more specific, though. For example, give your nav list an id (such as, you know, nav), and then refer to it as:#nav ul {list-style-type: none;}So that not every list will be without bullets. It's more work to specify it each time, but I find that it's also more maintainable to be specific as you go along.

Link to comment
Share on other sites

Thankyou for your help, at the moment i'm finding css quite hard to learn, not that hard but harder then xhtml anyways, so thanks for the tip about being more spacific aswell :)

Link to comment
Share on other sites

  • 4 weeks later...

A slight correction of the CSS selector:

ul.nav {list-style-type: none;}
'#nav ul' would get all un-ordered lists inside of any elements that have an id of 'nav'. 'ul.nav' gets any un-ordered lists with a class of 'nav'.And by the way, if you wanted a horizontal menu, just add this CSS block:.nav li {display: inline;margin-left: 2.5px;margin-right: 2.5px;}'display: inline' changes the display of each list item so that it is on one line (like a <span> tag). The margins are just to make it look better by spacing each item a little bit.
Link to comment
Share on other sites

A slight correction of the CSS selector:'#nav ul' would get all un-ordered lists inside of any elements that have an id of 'nav'. 'ul.nav' gets any un-ordered lists with a class of 'nav'.And by the way, if you wanted a horizontal menu, just add this CSS block:.nav li {display: inline;margin-left: 2.5px;margin-right: 2.5px;}'display: inline' changes the display of each list item so that it is on one line (like a <span> tag). The margins are just to make it look better by spacing each item a little bit.
but since you're only supposed to have one unique ID on each page, it shouldn't really be a problem.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...