4 replies [Last post]
NewieB
Offline
newbie
Last seen: 8 years 9 weeks ago
Joined: 2014-04-29
Posts: 3
Points: 4

Hello I am designing a website and have used navigation bar that is saved as a external file. It is then included as shown below:

However it is highlighting all the links on the page. Including the email link. This is becoming a headache and truly can not see where i could of gone wrong. I would be grateful if someone could advice me. Many thanks in advance.

ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
a:link,a:visited
{
color:#FFFFFF;
background-color:#D9EECF;
text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A8B8B;
}

NewieB
Offline
newbie
Last seen: 8 years 9 weeks ago
Joined: 2014-04-29
Posts: 3
Points: 4

Displayed like this in HTML.

Displayed like this in HTML.
[link href="sc.css" rel="stylesheet" type="text/css"/]

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

it is inside this piece of

it is inside this piece of code where it goes wrong:

a:link,a:visited
{
color:#FFFFFF;
background-color:#D9EECF;
text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A8B8B;
}

You are saying here that every "a" much have these colours, backrounds and more.
Did you know, that if you are making a link inside your HTML page this is called "a"?
Just like inserting an image.

What you need to do is tell this css code to only use the "a" in that certain menu you where talking about.
For example:

div.menu .menubutton a:link,a:visited {
color:#FFFFFF;
background-color:#D9EECF;
text-align:center;
padding:6px;
text-decoration:none;
}
div.menu .menubutton a:hover,a:active {
background-color:#7A8B8B;
}

As you can see I am specifying a certain class inside a certain div.
Now your browser knows excactly which "a" to change.

Remember, the above are examples, I don't know how your website looks like or what everything is called.
Cheers, Henk

Check Maximum Webdesign for your online solutions

NewieB
Offline
newbie
Last seen: 8 years 9 weeks ago
Joined: 2014-04-29
Posts: 3
Points: 4

Thanks. I have attached the

Thanks helldog2004, I have attached the first three pages links of how i wanted it to look like. And also how I coded them in html.

<ul>
   <li><a href='hp.html'>Home Page</a></li>
   <li><a href='Aboutus.html'>About Us</a></li>
   <li><a href='contactus.html'>Contact Us</a></li>
 
</ul>

AttachmentSize
navbar.odt 142.79 KB
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Could you send us a link to

Could you send us a link to your homepage? Then I can certainly say what classes or ID's you should use.

Cheers.

Check Maximum Webdesign for your online solutions