I'd like to make a black navigation bar for my website, and when you hover over the first link it goes orange, the second link it goes green, etc. I know how to change colour on hover but don't know how to make each link different.
I figure its something to do with giving ids to each li tag?
<div id="navbar">
<ul>
<li id="link1">1</li>
<li id="link2">2</li>
<li id="link3">3</li>
</ul>
</div>
But then how do I create different styles for each of these ids in the css file?
Below is what I tried
#navbar ul li a {
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px;
color: #ffffff;
background-color: #000000;
}
#navbar ul li #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li #link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
Help much appreciated!
What you're doing is on the right track, but don't repeat the CSS over and over:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul #link1 a:hover {
background-color: #C62222;
}
#navbar ul #link2 a:hover {
background-color: #28C622;
}
As others have noted, you also need to either remove the space between the li and your id, or just remove the li entirely (since there is only one link1, you don't necessarily need to tell the browser that it is an li).
Additionally, if you want, you can (and probably should) simply those selectors all the way down to #link1 a:hover and #link2 a:hover. It's more of a stylistic choice, but it helps to keep your code clean.
You have a bad selector. The li is superfluous.
#navbar #link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
You need to remove the space between li and #link1:
#navbar ul li#link1 a:hover
You could further optimize your CSS like this:
#navbar a {
text-decoration: none;
padding: 25px 30px; /* shortcode for top/bottom - left/right */
color: #ffffff;
background-color: #000000;
}
#navbar a:hover { /* common hover styles */
color: #ffffff;
padding:15px 30px;
}
#link1 a:hover { /* individual hover styles */
background-color: #C62222;
}
#link2 a:hover { /* individual hover styles */
background-color: #28C622;
}
remove the space between li and #link2.
#navbar ul li#link1 a:hover {
color: #ffffff;
background-color: #C62222;
padding-top:15px;
padding-bottom:15px;
}
#navbar ul li#link2 a:hover {
color: #ffffff;
background-color: #28C622;
padding-top:15px;
padding-bottom:15px;
}
You were close, but the space between li and #linkX is causing problems. These are not two separate elements, so they should be combined. One possible method is:
#navbar ul li#link1 a:hover {
....
Alternately, you can use:
#navbar ul #link1 a:hover {
....
You may wish to combine the duplicated styles into a single directive:
#navbar ul li a:hover {
color: #ffffff;
padding-top:15px;
padding-bottom:15px;
}
Then use only the changed style as needed:
#link1 a:hover {
background-color: #C62222;
}
Related
beginner girl here who is completely stuck at her first CSS project. Please please tell me what I am doing wrong.
So I have this horizontal menu, with three stupid tabs. I want the background color for the selected tab to be different (done!), and also the font color to be different - which is not happening, despite by best efforts for the past hour.
This is the HTML:
<nav>
<ul>
<li class="selected">Job Description Details</li>
<li>Audit Trail</li>
<li>Files</li>
</ul>
</nav>
And the CSS. Here the background property for the last rule IS APPLIED. But if I add a color one, nothing happens. Does the code have a grudge against me? :(
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
nav {
background-color: #488AC7;
margin: none;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link,
a:visited {
color: #F0FFFF;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected {
background-color: #F0FFFF;
border-bottom: none;
}
Try this
nav ul li.selected a, nav ul li.selected a:visited {color:red;}
Add
nav ul li.selected a {
color:red;
}
Color on nav ul li.selected is applied to the text that are no links. You have to specify the color for the links with nav ul li.selected a.
i am trying to fix a color of my TEXT color, its just WHITE so same color as background, dispite the fact its color is set for :#1a6eb6 and its set for same value in #submenu ul li .text I am prettz lost in it, can somebody help me with it?
My HTML:
<div class="submenu">
<ul>
<li><span class="text">DISKUSNÍ FÓRUM </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">KOMENTÁŘE </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">ZÁZNAM CHATU </span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
<li><span class="text">UŽÍVATELÉ</span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
</ul>
</div>
My CSS:
.submenu{
color: #1a6eb6;
display: inline-block;
height: 50px;
width:780px;
}
.submenu ul {
margin-left: 20px;
padding-left: 0px;
}
.submenu ul li{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
background-image: url("images/shop_menu_bg.png");
background-repeat: repeat-x;
height: 38px;
width: 187px;
display: inline-block;
color: #1a6eb6;
}
.submenu ul li:hover {
background-image: url("images/shop_menu_bg_hover.png");
width: 187px;
height: 38px;
}
.submenu ul li .text{
color: #1a6eb6;
display: inline-block; /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
height: 31px;
width:115px;
line-height: 28px;
margin-left: 5px;
}
.submenu ul li .horizontal-arrow{
background-image: url("images/horizontal_arrow.png");
background-repeat: repeat-x;
display: inline-block;
height: 19px;
width: 14px;
margin: 0px 0px 0px 45px;
vertical-align: middle;
}
.submenu ul li:hover .horizontal-arrow{
display:none;
}
.submenu ul li .vertical-arrow{
background-image: url("images/vertical_arrow.png");
background-repeat: repeat-x;
display:none;
height: 12px;
width: 19px;
margin: 0px 0px 0px 45px;
}
.submenu ul li:hover .vertical-arrow{
display: inline-block;
}
Live Preview can be find on: http://funedit.com/andurit/new/
Try adding the color to .submenu ul li .text a
.submenu ul li .text a{
color: #1a6eb6;
}
Font color was not changing because your styles.css had the below style which was overriding the color you specified to .submenu ul li .text
li a:link {
color: #f7f7f7;
}
You need to set the color of the <a> tag because that tag has color white.
something like:
.submenu ul li a{
color: #1a6eb6;
}
Many popular user agent stylesheets include a rule that selects a and sets its color:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
This is sort of a blue-ish color. Moreover, your style.css has:
li a:link {
color: #f7f7f7;
font-weight: bold;
text-decoration: none;
}
This overrides the UA stylesheet and is why the link appears white. You need to actually select the a with your rule:
.submenu a:link {
color: #1a6eb6;
}
The :link part is necessary because of the specificity of the li a:link selector. You could also do .submenu li a or some other more specific selector.
if you just want to change the color of your text, you probably should use the "a" element like this:
#submenu ul li a{
//your code
}
Change css line 183 for element to
li a:visited
{
color: #1a6eb6;
}
Or you could create a new css selector like
.submenu ul li a
{
color: #1a6eb6;
}
style.css line 183 - you have li a:visited {color:#f7f7f7};
style.cc line 173 - you have li a:link {color:#f7f7f7;}
This is I got from chrome console. check these lines in your css file and take out the color:#f7f7f7
you can also use the !important rule in css to make sure that rule overwrites any other rule.
What does !important in CSS mean?
.submenu{
color: #1a6eb6 !important;;
}
I put a link in the image which leads back to the home page; however, I have my nav menu set up so they turn red with hovering and somehow it's making a red block behind my image when I hover over it. I'm using HTML5 and CSS3
HTML5
<header class ="main-header">
<a href="index.html">
<img src="Images/image.png" alt="image logo"></a>
<nav><ul>
<li class="active">HOME</li>
<li>NEWS</li>
<li>LOCATION</li>
</ul></nav>
</header>
CSS3
/* Define Hyperlink Info */
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:active {
background-color: #C71F0E;
color: #FFFFFF;
text-decoration: none;
}
/* Defines navigation menu */
.main-header nav {
background-color: #354175;
height: 40px;
}
.main-header nav ul {
list-style: none;
margin: auto;
}
.main-header nav ul li {
display: inline;
float: left;
}
.main-header nav li a:hover, .main-header nav li.active {
background-color: #C71F0E;
color: #FFFFFF;
text-shadow: none;
}
.main-header nav ul li a {
border-radius: 15px;
color: #FFFFFF;
display: block;
height: 20px;
padding: 10px 25px;
}
If you look at the a:link, a:visited line, you'll notice that this targets ALL links, even your image link.
To do away with this, try giving your first link a class (like "logo"), and write specific styles for it after the a:link, a:visited line.
I'm trying to get this simple horizontal navigation menu to work but when I go and add an "active" class to the active li, nothing is changing. the .active just doesn't show up? What did I do wrong guys?
<div id="nav">
<ul>
<li class="active">All</li>
<li>Services</li>
<li>Technology</li>
<li>Referral</li>
<li>Reseller</li>
</ul>
</div>
Here's the CSS:
#nav ul{
list-style-type:none;
margin:40px auto;
padding:0;
width:625px;
height:50px;
}
#nav li{
display:inline;
}
#nav li a,
#nav li a:visited,
#nav li a:link {
width:120px;
height:20px;
display:inline;
float:left;
text-align: center;
padding-top:5px;
padding-bottom: 5px;
margin-top:auto;
margin-bottom:auto;
font-family: arial;
text-decoration: none;
color:#929292;
font-weight: bold;
background-color: #e5e5e5;
margin-left:5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#nav li a{
}
#nav li a:hover{
color: #ffffff;
cursor: pointer;
background-color: #2F5290;
}
#nav li a:active{
color: #FAAF31;
}
.active{
background-color: #2F5290;
color: #FAAF31;
}
Specificity is your problem. In quick terms: ids are worth 100, classes worth 10 and elements worth 1, so #nav li a is worth 102 points of specificity, but .active is only worth 10 points. If you update it to #nav li a.active you will get 112 points, thus having enough specificity to override your original styles. You can read more about specificity on W3C
Thanks #setek for the good answer, I thought that it should really be the answer and added a bit as well.
ul {
list-style-type: none;
padding: 0px 5px 0px 5px;
margin: 0px;
}
ul li {
border-bottom: 1px solid #B9D3EE;
}
ul li a:link,
ul li a:visited,
ul li a:active {
width: 100%;
color: blue;
}
ul li a: hover {
width: 100%;
color: #ffffff;
background-color: #B9D3EE;
}
In IE the above code will highlight the complete cell when hovered.
But in FF it will only highlight the link that is within it.
I would like FF to highlight the complete cell as IE does.
Here is the list:
Keep in mind that only the first link has been created because I have just started creating this list and stopped to test it when I noticed this problem.
<ul>
<li>beauty</li>
<li>creative</li>
<li>Info Tech. (IT)</li>
<li>cycle</li>
<li>event</li>
<li>financial</li>
<li>legal</li>
<li>lessons</li>
<li>medical</li>
<li>marine</li>
<li>pet</li>
<li>automotive</li>
<li>farm+garden</li>
<li>household</li>
<li>labor/move</li>
<li>MKT/COMM</li>
<li>office</li>
<li>skill'd trade</li>
<li>real estate</li>
<li>health/wellness</li>
<li>travel/vac</li>
<li>write/ed/tr8</li>
</ul>
Any help is much appreciated!
You can make your a elements as block elements, so they will get all width of parents elements (demo: http://jsfiddle.net/WasWE/).
ul li a:link, ul li a:visited, ul li a:active {
display: block;
color: blue;
}
ul li a:hover {
background-color: #B9D3EE;
color: #ffffff;
}
Or you can add hover event to li elements (demo: http://jsfiddle.net/XmwTV/):
ul li:hover {
background-color: #B9D3EE;
}
ul li a:link, ul li a:visited, ul li a:active {
color: blue;
}
ul li a:hover {
color: #ffffff;
}
Hi now remove with 100% in your anchor link css and define display block in you css in anchor
as like this
ul li a: link,
ul li a: visited,
ul li a: active {
display:block; // add this line
width:100%; // remove this line
color: blue
}
ul li a:hover{
width:100%; //remove this line
color: #ffffff;
background-color: #B9D3EE;
}
Demo