I am not sure where I am going wrong but the css on a and a:hover doesnt seem to work. I cant see the background of the li elements changing to blue when I hover over them.Can anyone help? Any help will be really appreciated.
The HTML is
<body>
<div id="navbar">
<ul>
<li>home</li>
<li>nature</li>
<li>travel</li>
<li>people</li>
<li>random</li>
<li>bio</li>
<li>contact</li>
</ul>
</div>
</body>
the CSS is
#navbar ul{
float:left;
margin:0;
width:600px;
list-style : none;
padding-top:30px;
}
#navbar ul li
{
vertical-align: middle;
display: inline;
margin: 0;
text-align:center;
font-family: Calibri;
padding-left:15px;
font-size:20px;
font-weight:normal;
list-style-type: none;
color:#808080;
}
#navbar ul li a
{
text-decoration: none;
white-space: nowrap;
line-height: 45px;
padding: 5px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #666;
}
#navbar ul li a : hover
{
color:#FFFF00;
background-color: #4caef2;
}
You can't add random spaces in selectors.
This is an error:
#navbar ul li a : hover
Remove all the spaces except the actual descendant combinators:
#navbar ul li a:hover
This would have been picked up if you had used a validator.
Please remove the space b/w colon and hover ie,
navbar ul li a : hover should be #navbar ul li a:hover
change
#navbar ul li a : hover
to
#navbar ul li a:hover
please
if you want to apply a pseudo class like hover you have to append it directly after the selector you are applying the pseudclass to, separated by a ':' without any additional spaces.
The syntax for pseudo-classes is :
selector:pseudoclass
So in your case :
#navbar ul li a:hover
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'm adding a separator "|" to every menu item using the :after selector. This adds it to the last element as well. I've been trying to remove that using the :last-child selector and it isn't working.
I'll list my code below and also provide a jsfiddle link.
HTML:
<nav id="nav_bar">
<div>
<ul>
<li>Home</li>
<li>Company Profile</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
CSS:
#nav_bar {
background-color: #debb23;
height: 45px;
}
#nav_bar ul{
list-style-type: none;
}
#nav_bar ul li{
display: inline-block;
margin: 10px 0;
}
#nav_bar ul li a{
color: #ffffff;
text-decoration: none;
padding: 0 15px;
}
#nav_bar ul li:after{
content: "|";
color: #ffffff;
}
#nav_bar ul li:last-child {
content: none;
}
Here's the jsfiddle link, http://jsfiddle.net/e3x369k0/
I appreciate any help.
You are targeting the last li element's content not its :after pseudo element's content.
Change your selector from:
#nav_bar ul li:last-child {
content: none;
}
to
#nav_bar ul li:last-child:after {
content: none;
}
Live example: http://jsfiddle.net/5x55emaf/
You're missing the :after in the last CSS rule. Should be like this: #nav_bar ul li:last-child:after
Try This and I've been using this technique in years :)
#nav_bar ul li{
border-right:1px solid black;
}
#nav_bar ul li:last-child{
border-right: 1px solid tranparent;
}
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
I am trying to create a basic navigation bar using an unordered list, but for some reason I can't get the bullets to go away.
I have searched for a solution on Google and to me it seems like it SHOULD be working, but I think I might be messing up something that isn't related to the style of the ul, which is in turn preventing the ul style from being applied.
Here is the relevant html:
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Examples</li>
<li>Contact Us</li>
</ul>
</div>
and here is the CSS:
#nav ul
{
list-style-type: none;
position: absolute;
top: 10px;
right: 0;
margin: 0;
padding: 0;
}
#nav ul li
{
float: left;
}
#nav ul li a
{
display: inline;
float: left;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#nav ul li a:hover
{
padding-top: 12px;
background-color: #075a97;
}
Just to be certain, I usually apply it to the lis too:
#nav ul li
{
list-style-type: none;
float: left;
}
Something else to check is to use a tool like firebug for firefox and right-click on a list-item and do a 'inspect element'. From there you can see the styles that are actually applied to it and where they stem from, which ones are overriding which, etc.
More than likely, what's happening (with the other answer and comment) is that you've got some other style that's making the bullets show up-- which is where firebug will really help you out.
I don't see any bullets either.
maybe try a full refresh: CTRL+F5 or CTRL+R
And you may try this css
#nav ul li{ list-style: none; }
It works. You may have another rule that cancels out the #nav ul. You can probably test it by adding
body #nav ul
This is what I use for my horizontal menu bar using CSS. I've never had any problems with it.
#nav {
padding-bottom: XXpx;
margin:0px auto;
}
#nav ul { list-style:none;
padding: XXpx;
margin: XXpx;
}
#nav ul li {
float:left;
}
#nav span {
position:absolute;
left:-9999px;
}