In my CSS file I have some general styles for links that I want to keep universal, such as no text decoration when visited, and a color change when hovered, but I want some specific styles on my navigation bar at the top like the font being white all the time (Black nav bar but white everything else so I want to see the links), but the #navBar specific styles on my links seem to make any other general styles on links cancel out, such as the color change to #1d99ff in a:hover, or the text-decoration: none in both a:link and a:visited as shown below.
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
color: #1e99ff
}
#navBar{
text-align: center;
word-spacing: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: #000000;
letter-spacing: 3px;
}
#navBar a:link{
color: #FFFFFF;
}
#navBar a:visited{
color: #FFFFFF;
}
Shouldn't the general link styles be applied to all links, and the ID specific ones take those styles and add the ones specified? Or do I have to redefine the styles already defined before?
Thanks
When you want to override a single item's style for instance, you should do it via html since it will simply override all conflicts.
<div style="color: #000;">
Related
This is a follow-up to a previous question on Stack Overflow (see referenced link). Consider the following code (pulled from W3Schools):
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
If I include this in a page, this changes the attributes of all its links. What if I want to only modify these attributes for specific links? Links in the sidebar of my page, for instance.
I believe the solution will be tricker than the one in the referenced Stack Overflow question. I attempted to nest these in some .class selectors and making <a class="my_class" href="#">Hello World</a>, but this does not seem to work.
You can give the sidebar a class and style only the child link elements.
e.g.
<div class="sidebar">
...links
</div>
.sidebar a:link {
color: #FF0000;
}
.sidebar a:visited {
color: #00FF00;
}
...etc.
The solution in the linked example would also work if you gave a specific class to the link elements. Just be sure that you're adding the class after the element and not the pseudo-selector.
e.g. a.my_class:visited and not a:visited.my_class
Simple Styling
To achieve what you're looking for, you can apply a class to the container that will house your sidebar links (we'll use .sidebar in this example) and then target any anchors that fall within the container that the .sidebar class is applied to.
Markup:
<div class="sidebar">
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
</div>
CSS:
/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 1em;
}
/* color for the unvisited links you want to style */
.sidebar a:link {
color: #FF0000;
}
/* color for the visited links you want to style */
.sidebar a:visited {
color: #00FF00;
}
/* underline the links you want to style when hovered */
.sidebar a:hover {
text-decoration: underline;
}
/* color for the active links you want to style */
.sidebar a:active {
color: #0000FF;
}
Tip: If you use descriptive ("semantic") classnames like .sidebar, you make it easier for you (and other developers) to identify which elements are being styled.
Further Customization:
What if you wanted to apply a little extra customization to one (or more) of your sidebar links so that it stood out from the rest? Well, let's pretend you wanted one of those links to be green.
You could achieve this by applying a class to one of the anchors in our container.
Markup:
<div class="sidebar">
Lorem Ipsum in GREEN!
Lorem Ipsum
Lorem Ipsum
</div>
CSS:
/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 1em;
}
/* color for the unvisited links you want to style */
.sidebar a:link {
color: #FF0000;
}
/* color for the visited links you want to style */
.sidebar a:visited {
color: #00FF00;
}
/* underline the links you want to style when hovered */
.sidebar a:hover {
text-decoration: underline;
}
/* color for the active links you want to style */
.sidebar a:active {
color: #0000FF;
}
/* override the color of one of our sidebar links to be green! */
.sidebar a.green {
color: green;
}
I hope this helped!
EDIT: Cleaned up for simplicity.
PS:
If you look closely at the bar when your hovering over a link a few pixels at the far right side stay black. Why is that and how do I fix it?
The code for the current Navigation bar is as follows:
HTML:
<body>
<div class="navbar">
-home
about
store
contact
</div>
</body>
CSS:
.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}
As you can tell by the code, I'm trying to set the color of the home link to red. But this obviously didn't work. How should I go about it?
current is the id of the link element, so #current {background-color:red;} should do.
Now you're trying to set the color of the link element inside the element with id current.
Change your CSS rule from :
#current a:link, a:visited{
background-color: red;}
to
#current {
background-color: red;}
jsFiddle example
Your rule specifies the element with an ID of #current and then the child links of it when just #current is enough.
You forgot comma after #current in your CSS. You don't need rest of line. Also you can write either #current only or a#current.
Your CSS is incorrect.
#current a:link
this is saying style a link INSIDE an element with an Id #current
however your link IS the element with the id, try this:
a#current { color: red; }
It would better better to use a class though:
a.red { color: red; }
and then:
<a class="red">bla</a>
The main issue, as everyone has indicated is that the element that you are trying to change #current is also the anchor tag, so you have to say a#current:link or #current instead of #current a:link since the anchor tag is not a child of the #current tag.
Here's my jsFiddle, if you're interested.
I have this site, please note that in a:hover put the source as bold.
The problem is that the font size decreases and eventually I read it also decreases.
There are two errors in the HTML you would like your help:
The source should not decrease when ally is in bold.
In the event a:hover can not change the size of the tag li.
The tag li must have fixed size, and not size depending on content. How can I fix the size of the li?
I don't know if I understood your question correctly, but can't you put
ul#menu li
{
width:200px; //change this amount...
}
You can prevent the boxes from jumping by
floating the lis
adding a width to the lis
adding left and right padding to the lis
taking the hover off the a and adding it to the lis
--
ul#menu li {
float:left;
width:120px;
background-color: #676767;
text-align:center;
padding:20px 20px;
margin:0 .25em;
}
ul#menu li a {
color: #FFFFFF;
text-decoration: none;
}
ul#menu li:hover {
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
http://jsfiddle.net/jasongennaro/5jJg3/10/
Important:
the bolder text still jumps, but the boxes do not
you will only be able to click on the text ** however you can make the entire li clickable with js, if you like.
I took the liberty to touch your css code to achieve the desired result. It would be:
ul#menu li
{
background-color: #676767;
display: inline-block;
text-align: center;
}
ul#menu li a
{
letter-spacing: 1px;
color: #FFFFFF;
display: block;
line-height: 45px;
padding: 0;
text-decoration: none;
width: 100px;
}
ul#menu li a:hover
{
letter-spacing: 1px;
font-weight: bold;
background-color: #868686;
color: #FFFFFF;
}
What I did was:
Remove padding from li and a elements (it should be 0)
Set the a element to display:block with fixed width and height
Set letter-spacing of a and a:hover to 1px so they keep the same space between characters
Keep the text in the center with line-height and text-align:center
The problem was that padding was pushing the box borders when the element changed its size.
I have a layout that uses navigation with two lines of text. These are identified using span. The first span is responding to changes in the CSS, in particular a:hover, but the smaller text isn't responding.
I'm simply looking to change the colour of the smaller text when hovering, and to understand what I'm not doing or doing wrong.
Any help is appreciated.
Here's my code.
There is a very subtle solution to your problem. You currently have:
#navigation .pagetitle a:hover{
font-size: 15px;
color: orange;
}
But this would be where the anchor was a child of the span. It's actually the other way around...
#navigation a:hover .pagetitle{
font-size: 15px;
color: orange;
}
You have the :hover applied to the a tag, when it should be applied to the span tag. Like so:
#navigation .pagetitle:hover
Try this decendent selector:
#navigation.pagetitle {
font-size: 15px;
color: #999;
}
Is this what you're looking for?
Try this
#navigation a:hover span{
color: #ec0181;
background-color: #333;
}
You can always use the !important feature. Example:
#navigation .pagetitle a:hover{
font-size: 15px;
color: orange !important;
}
a {
color: #000;
}
a:hover {
text-decoration: none;
color: #fff;
}
That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:
#menu li, a {
text-align: center;
display: block;
float: left;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
color: #575757;
text-decoration: none;
list-style: none;
}
Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.
<div id="footer">
<p><center>Copyright 2008 - G.S.B.V. Pugilice</center></p>
</div>
That bit of code gives me two lines instead of one, the link floats left on the second line.
I think you may be mis-understanding how selectors work.
#menu li, a { ... }
Means apply styles to any li descendant of a element with the id #menu and to any a found any where.
Did you actually intend:-
#menu li, #menu a {...}
?