Solved

Problem styling nav (CSS)

Posted on 2013-05-30
3
501 Views
Last Modified: 2013-05-30
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
Comment
Question by:J C
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 

Author Comment

by:J C
ID: 39208416
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
 
LVL 10

Accepted Solution

by:
jtwcs earned 500 total points
ID: 39208455
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
 

Author Comment

by:J C
ID: 39208476
That worked. Thanks for the explanation and your assistance.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question