Solved

Problem styling nav (CSS)

Posted on 2013-05-30
3
459 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
  • 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
HTML page and JavaScript 2 55
Positioning of an element a percentage from the top. 14 22
HTML CSS 7 20
Gradient CSS 4 15
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now