[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 547
  • Last Modified:

Problem styling nav (CSS)

I have a horizontal nav, it is the main menu. I want to style it differently than all other a {'s. I've tried adding this to the stylesheet to create a class for the main nav.

#main_nav a {
display:block;
padding:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 18px;
text-decoration:none;
}

#main_nav a:hover,a:active
{
background-color:#b4c48d;
}

This is what the nav item looks like:

<div class="main_nav" style="position: absolute; top: 316px; left: 24px; width: 760px; height: 48px;color:#ffffff;">

Should this work?
0
J C
Asked:
J C
  • 2
1 Solution
 
J CAuthor Commented:
At this point, the nav only responds to changes I make to the stylesheet's

a {
}

but I do not want to affect all hyperlinked text on the page
0
 
jtwcsCommented:
The css declarations are referencing an element with an ID of main_nav but the div has a class of main_nav.

You can either change the markup to <div id="main_nav" .... >  or update the css declarations to

.main_nav a {
display:block;
padding:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size: 18px;
text-decoration:none;
}

.main_nav a:hover, .main_nav a:active
{
background-color:#b4c48d;
}
0
 
J CAuthor Commented:
That worked. Thanks for the explanation and your assistance.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now