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.
Related
I'm trying to make the current page's title change colour in the navigation bar that I have at the top of my website. The navbar is built in html with:
<div class="navbar">
<a href="index.html" class="active" >Home</a>
Indian
Italian
</div>
and the CSS that attempts to style it is:
.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:active{
color:#ffe7d1;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a:hover{
color:#874404;
font-size:20px;
}
.navbar a:current{
color:#ffe7d1;
}
The .navbar a:current is left there after I read that active may not do as I hope (I changed class="active" to class="current") but this also doesn't work.
What am I missing here?
try this
a.active {color: red}
a:active is not representing a class but a selector for a pseudoclass of <a> element
https://www.w3schools.com/css/css_pseudo_classes.asp
:active is where the mistake is.
Try this
.navbar a.active{
color:#ffe7d1;
}
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
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;">
I have created a navbar using an unordered list. Here is my problem:
I cannot change the color of the text of the list items and for some reason I cannot click my links anymore (I was able to click them a while ago in development, no idea when they stopped working).
Here is what the items look like now:
http://gyazo.com/c089ed3f21368d4d2a1d91a52e129222.png
HTML:
<div class="grid_16 alpha" id="header">
<ul id="nav" class="grid_4 prefix_1">
<li id="nav_home">Home</li>
<li id="nav_home">News</li>
</ul>
</div>
CSS:
#nav {
color:white;
margin-top: 54px;
}
#nav li {
color: white;
display: inline;
}
#nav a:link {
font-family: ColaborateThinRegular;
font-size: 18px;
text-decoration: none;
background-color: #353535;
padding: 5px 20px;
margin-right: 15px;
color: white;
box-shadow: 1px 1px 3px #000;
}
Found it:
look at this jsFiddle. the problem with the coloring occured because you didn't specify a:visited as well as a:link so the color was purple.
The non-clickable problem.. has something to do with href="#" or some other code on your site that prevents it.. I've linked one of the buttons in jsFiddle to google and it keeps working after first click. Try it out
After visiting the link your style stops working. Try implementing this:
#nav a:visited {color: white;}
Always remember ids are Unique.
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;
}