Styling the Menu/NavBar - Right I have created the menu for my website. However, I'm having a problem styling the menu links and text.

Wrams · 16th August 2009, 08:23 PM

Right I have created the menu for my website. However, I'm having a problem styling the menu links and text.

What I want to do is make the font a different style for example Verdana or Sans-Serif. Also I want the menu text to be white. Then I'll make the hover affect after.

HTML

Code:

<ul id="nav">
  <li class="selected"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="service.html">Service</a></li>
  <li><a href="portfolio.html">Portfolio</a></li>
  <li><a href="hosting.html">Hosting</a></li>
  <li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>

CSS

Code:

[ul#nav {
height:32px; 
}
ul#nav li {
float: left; 
padding: 10px 47px; 
}
ul#nav li a:hover { 
text-decoration: underline;
}
ul#nav li.selected a { 
color: red;
}
ul {
list-style: none;
}

Thank you for any advise given.

CloudedVision · 16th August 2009, 10:08 PM

Code:

font-family:Verdana, sans-serif;
color:#fff;

Add that to the link styling.

Wrams · 17th August 2009, 09:59 AM

Quote:

Originally Posted by CloudedVision

Code:

font-family:Verdana, sans-serif;
color:#fff;

Add that to the link styling.

Thanks CV. Which one is the Link Styling...?

I've done this CSS and it made the text turn white. Is this correct...?

Code:

a {
font-family:Verdana, sans-serif;
color:#FFF;
text-decoration: none;
}

The only problem I can see is that if I have other links they also will be white. Can I put something infront or behind it like

a nav{
}

Will that make it style for only the menu...?

:EDIT: I've put the following and it works.

ul a {
}

This has made the text white and only covers the menu.

WelshStew · 17th August 2009, 10:44 AM

So this will again do this for all unordered lists on your site - is this what you want?

If you want to target just the nav then use the following:

Code:

#nav{
font-family:Verdana, sans-serif;
color:#fff;}

Wrams · 17th August 2009, 10:47 AM

Quote:

Originally Posted by WelshStew

So this will again do this for all unordered lists on your site - is this what you want?

If you want to target just the nav then use the following:

Code:

#nav{
font-family:Verdana, sans-serif;
color:#fff;}

Thanks Stew.

I do want to target just the nav, however, I've used

ul a {
}

That has worked on styling the menu. But, will it affect other <ul>'s ? Or shall it be better to use your coding...? I'll try your way to and let you know.

Thanks mate.

Right I've just tried that and the text went back to a blue colour even though I don't have blue specified. This is weird...Lol

Tom · 17th August 2009, 11:28 AM

it will affect all UL tags on your site from now on, the way I would do this is to define it as follows:

Code:

#nav ul {font-family:}

#nav li a {color: white;}
#nav li a:hover {}
#nav li a:active {}
#nav li a:visited {color: white;}

This will then only affect UL's with the #nav id.

Code:

<div id="nav">
<ul>
<li>list1</li>
<li><a href="#">list2</a></li>
</ul>
</div>

(this does have the wrapping div directly around it, but as long as the ul list is inside the #nav id then you can have anything esle within there too)

Gaz · 17th August 2009, 11:39 AM

The above is the best method, but your getting a bit of divitous if your placing that div just around the UL.
It's better practices to take out that div and put the ID in the UL. removing 2 lines of code and getting rid of 11 characters.

Wrams · 17th August 2009, 11:47 AM

Quote:

Originally Posted by Gaz

The above is the best method, but your getting a bit of divitous if your placing that div just around the UL.
It's better practices to take out that div and put the ID in the UL. removing 2 lines of code and getting rid of 11 characters.

Can you give me an example of what you mean Gaz...?

Thanks!!

WelshStew · 17th August 2009, 12:30 PM

It's as you had it in your original post:

Code:

<ul id="nav">
<li></li>
</ul>

rather than:

Code:

<div id=nav>
<ul>
<li></li>
</ul>
</div>

divitius is sometimes an issue, and something I rather suffer from...

Gaz · 17th August 2009, 12:54 PM

The above example is spot on.

It's not much of an issue at present, but in some cases it can be just as bad as tables.

16th August 2009, 08:23 PM	#1
Wrams Join Date: Apr 2009 Location: Bristol, UK Posts: 906 Blog Entries: 1 Thanks: 50 Thanked 7 Times in 7 Posts Expertise: (X)HTML / CSS Experience: Intermediate	Styling the Menu/NavBar Right I have created the menu for my website. However, I'm having a problem styling the menu links and text. What I want to do is make the font a different style for example Verdana or Sans-Serif. Also I want the menu text to be white. Then I'll make the hover affect after. HTML Code: <ul id="nav"> <li class="selected"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="service.html">Service</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="hosting.html">Hosting</a></li> <li><a href="contact_us.html">Contact Us</a></li> </ul> </div> CSS Code: [ul#nav { height:32px; } ul#nav li { float: left; padding: 10px 47px; } ul#nav li a:hover { text-decoration: underline; } ul#nav li.selected a { color: red; } ul { list-style: none; } Thank you for any advise given. __________________ SuperValueWeb Hosting Last edited by Wrams; 17th August 2009 at 10:04 AM..

16th August 2009, 10:08 PM	#2
CloudedVision Join Date: Jan 2009 Location: Your Imagination Posts: 729 Blog Entries: 4 Thanks: 1 Thanked 27 Times in 26 Posts Expertise: PHP Experience: Professional	Code: font-family:Verdana, sans-serif; color:#fff; Add that to the link styling. __________________ Panthr - Web Design and Development

17th August 2009, 10:44 AM	#4
WelshStew Join Date: Dec 2008 Posts: 1,844 Blog Entries: 3 Thanks: 13 Thanked 36 Times in 34 Posts Expertise: (X)HTML / CSS Experience: Professional	So this will again do this for all unordered lists on your site - is this what you want? If you want to target just the nav then use the following: Code: #nav{ font-family:Verdana, sans-serif; color:#fff;} __________________ WelshStew follow me on twitter here \| WelshStew - Web Design & Web Development \| Motorhome hire uk

17th August 2009, 11:28 AM	#6
Tom Join Date: Jan 2009 Posts: 730 Blog Entries: 16 Thanks: 17 Thanked 34 Times in 34 Posts Expertise: Design & Graphics Experience: Quite Good	it will affect all UL tags on your site from now on, the way I would do this is to define it as follows: Code: #nav ul {font-family:} #nav li a {color: white;} #nav li a:hover {} #nav li a:active {} #nav li a:visited {color: white;} This will then only affect UL's with the #nav id. Code: <div id="nav"> <ul> <li>list1</li> <li><a href="#">list2</a></li> </ul> </div> (this does have the wrapping div directly around it, but as long as the ul list is inside the #nav id then you can have anything esle within there too) __________________ Fusion Web Hosting - Friendly and easy to use www.fusionservers.co.uk

17th August 2009, 12:30 PM	#9
WelshStew Join Date: Dec 2008 Posts: 1,844 Blog Entries: 3 Thanks: 13 Thanked 36 Times in 34 Posts Expertise: (X)HTML / CSS Experience: Professional	It's as you had it in your original post: Code: <ul id="nav"> <li></li> </ul> rather than: Code: <div id=nav> <ul> <li></li> </ul> </div> divitius is sometimes an issue, and something I rather suffer from... __________________ WelshStew follow me on twitter here \| WelshStew - Web Design & Web Development \| Motorhome hire uk

17th August 2009, 11:39 AM	#7
Gaz Member Join Date: Jan 2009 Location: 127.0.0.1 Posts: 113 Thanks: 1 Thanked 6 Times in 6 Posts Expertise: (X)HTML / CSS Experience: Expert	The above is the best method, but your getting a bit of divitous if your placing that div just around the UL. It's better practices to take out that div and put the ID in the UL. removing 2 lines of code and getting rid of 11 characters.

17th August 2009, 12:54 PM	#10
Gaz Member Join Date: Jan 2009 Location: 127.0.0.1 Posts: 113 Thanks: 1 Thanked 6 Times in 6 Posts Expertise: (X)HTML / CSS Experience: Expert	The above example is spot on. It's not much of an issue at present, but in some cases it can be just as bad as tables.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode