/    Sign up×
Community /Pin to ProfileBookmark

Need help with Styling Anchor Element Differently on Page from Navigation Element

[QUOTE]

I want my navigation bar with background color and hover, and I want my other anchor element styled differently from Navigation bar. I don’t want the same style automatically applied on both Navigation bar and other Anchor Element on my web page. So, how I do I stop the same style from Navigation bar applying to my other anchor element on my web page such as “go to top” link placed at the bottom of the web page, or other anchor element?

[/QUOTE]

HTML CODE:

[code=html]<nav>
<ul>
<li><a href=”home.htm” >Home</a></li>
<li><a href=”aboutus.htm” >About Us</a></li>
<li><a href=”prod.htm” >Product & Services</a></li>
</ul>
</nav>[/code]

CSS CODE:

[code=html]nav{
background-image: url(nav.jpg);
line-height: 200%;
display: block;
text-align: center;
}
nav li{
display: inline;
list-style-type: none;
padding-right: 10%;
}
nav a{
color: white;
font-weight: bold;
text-decoration: none;
}

a:hover{
background-color: white;
color: crimson;
}[/code]

Anchor Element with HTML CODE:

[code=html]<a href=”http://www.countryliving.com”>Country Living Magazine</a>[/code]
[code=html]<a href=”#top”>Go to top</a>[/code]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMar 17.2016 — Applay a class to your anchor-links and refer to it in the CSS:

HTML:
[code=html]<a class="anchorlink" href="#top">Go to top</a>[/code]

CSS:
[code=html]a.anchorlink {
color: red;
background-color: gray;
}[/code]
Copy linkTweet thisAlerts:
@Kevin2Mar 17.2016 — nav{
background-image: url(nav.jpg);
line-height: 200%;
display: block;
text-align: center;
}
nav li{
display: inline;
list-style-type: none;
padding-right: 10%;
}

/* prepending nav applies the styles to only the links in the nav bar */
nav a{
color: white;
font-weight: bold;
text-decoration: none;
}

nav a:hover{
background-color: white;
color: crimson;
}

/* these styles will apply to all links which are not in the &lt;nav&gt; */
a:link {
background-color: green;
color: purple;
}

a:hover {
background-color: orange;
color: blue;
}
Copy linkTweet thisAlerts:
@3wCornerMar 24.2016 — Just create another css class for your anchor element so that it won't be the same with the navigation menu. example:

in your style.css, add your new anchor element class name

a.classname{

//...your styling here

}


in your web page, :

<a href="yoururl.com" class="classname">your text here</a>
×

Success!

Help @web90 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...