Not sure why it's not working, but here's my code.
.tm-nav ul li{
display: inline-block;
margin-top: 20px;}
.tm-nav ul li a {
padding: 10px 20px;
text-decoration: none;
font-family: Trebuchet MS;
font-size: 22px;
margin-left: 50px;
color: #8e7e6b;
}
.tm-nav a:hover: {
color: black;}
And here is my HTML:
<nav class="tm-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Privacy</li>
</ul>
</nav>
Whenever, I hover over my navigation links, they don't change color, even adding text-decoration: underline under a:hover does not take effect.
.tm-nav a:hover: {
color: black;}
should be
.tm-nav a:hover {
color: black;}
you have an extra colon sitting on ".tm-nav a:hover {}"
I removed the colon and tried it on my computer and it worked.
Related
https://jsfiddle.net/jomot/nttuccay/5/
So I want to entire <li> to be clickable, not just the text.
Code is included in the jsfiddle.
Thanks to anyone that responds :)
"Enclose" the buttons with a block and the padding should be inside.
a { display:block; padding: 8px; }
a:link {color: #ffffff; text-decoration: none;}
a:visited {color: #ffffff; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: none;}
a:active {color: #ffffff; text-decoration: none;}
Easy peasy!
Make your anchors display:block and move the padding to the anchor from the li
.menu li a {
display:block;
padding: 8px;
}
Updated Fiddle
display:block turns the a into a block level element, which takes up the entire real-estate of its parent.
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
margin-bottom: 7px;
background-color: #2D74B4;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
text-align: center;
}
.menu li:hover {
background-color: #0099cc;
}
.menu li a {
display:block;
padding: 8px;
}
a:link {color: #ffffff; text-decoration: none;}
a:visited {color: #ffffff; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: none;}
a:active {color: #ffffff; text-decoration: none;}
<div class="menu">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
I've a nicely layed out unlisted list with links using <a href="">, but when I add one link that requires <a id=""> the CSS ignores it.
As CSS only defines the attributes using li a:link{}, how do I get it to recognise the the id= too?
The id=swishLink is used a number of times throughout the site, so I cant really make any changes to swishyLink attributes.
I've tried the <div id=> option, but it means I have to create a CSS rule for each list item.
li:first-child a:link{
text-decoration: none;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
}
li{
list-style-type: none;
text-decoration: none;
border: 2px solid white
}
li a:link{
text-decoration: none;
list-style-type: none;
width: 200px;
height:auto;
padding: 20px;
display: list-item;
background: #eefbe7;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center;
color: green;
}
li a:visited{
color: green;
}
li a:active{
color:purple;
}
li:last-child a:link{
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
/*
Change the link color on hover */
li a:hover {
text-decoration: none;
background: green;
color: white;
}
<ul>
<li>
One
</li>
<li>
<a id='swishyLink'> Two </a>
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
five
</li>
</ul>
If you want your CSS to also apply to <a> tags that aren't links, you shouldn't tell it to only apply to links.
It sounds like you don't want :link.
a:link is backfiring on you. Just use li a
li:first-child a{
text-decoration: none;
border-top-right-radius: 2em;
border-top-left-radius: 2em;
}
li{
list-style-type: none;
text-decoration: none;
border: 2px solid white
}
li a{
text-decoration: none;
list-style-type: none;
width: 200px;
height:auto;
padding: 20px;
display: list-item;
background: #eefbe7;
font-family: Arial Rounded MT Bold,Helvetica Rounded,Arial,sans-serif;
text-align: center;
color: green;
}
li a:visited{
color: green;
}
li a:active{
color:purple;
}
li:last-child a{
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
}
/*
Change the link color on hover */
li a:hover {
text-decoration: none;
background: green;
color: white;
}
<ul>
<li>
One
</li>
<li>
<a id='swishyLink'> Two </a>
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
five
</li>
</ul>
First homepage. Nav bar color for current page isn't working. Suggestions? CSS below. Thanks.
HTML
<ul class="nav">
<li>HOME</li>
<li>PRODUCTS</li>
<li>STAFF</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
CSS
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:20;
padding:0;
text-align:center;
font-family:sans-serif;
}
.nav li{
display:inline-block;
color:#493D26;
font-size: 15px;
font-family:sans-serif;
}
.nav a{
display:inline-block;
border-width:1px 0;
padding:15px;
text-decoration:none;
color:#493D26;
font-size: 17px;
font-style:bold;
text-transform:capitalize;
}
ul.nav a:hover{
color: #6CBB3C;
}
ul.nav a:current{
color: #6CBB3C;
}
You can use this css code also.
a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.
If you want the link corresponding to current page to be highlighted, you can define some specific style to the link -
ul.nav a:visited {
color: #6CBB3C;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using javascript).
check the snippet..
.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 20;
padding: 0;
text-align: center;
font-family: sans-serif;
}
.nav li {
display: inline-block;
color: #493D26;
font-size: 15px;
font-family: sans-serif;
}
.nav a {
display: inline-block;
border-width: 1px 0;
padding: 15px;
text-decoration: none;
color: #493D26;
font-size: 17px;
font-style: bold;
text-transform: capitalize;
}
ul.nav a:hover {
color: #6CBB3C;
}
ul.nav a:visited {
color: #6CBB3C;
}
<ul class="nav">
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>STAFF
</li>
<li>LINKS
</li>
<li>CONTACT
</li>
</ul>
Oh dear..
Try .nav ul instead of ul.nav :)
You can use jQuery trick:
You should add jQuery library file fist:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.nav li a").each(function()
{
if(this.href==window.location.href)
{
$(this).addClass('current');
$(this).removeAttr('href');
}
});
});
</script>
and add this css:
ul.nav a.current{
color: #6CBB3C;
}
I'm trying to make it so that I can add a class to the link for the current page and the background will stay filled in teal (As it would when hovered)
However, as it is at the moment, the link text is displaying in the teal still(pic part 1), even though the css says display it white (pic part 2)
the css I have is:
#nav a:link, a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:link, a.selected:active{
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover, a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
the html is
<div id="nav">
<ul>
<li >HOME</li>
<li>ABOUT</li>
<li>SOLUTIONS</li>
<li>CONSULTANCY</li>
<li>SUPPORT</li>
<li>CONTACT US</li>
</ul>
</div>
When I inspect the element in firefox, its showing that the color should be white. So it should be showing correctly, but it's not. Any idea what I'm doing wrong? I've cleared cache and that didnt sort it.
Change this
#nav a.selected:link, a.selected:active {
to this
#nav a.selected:link, a.selected:visited{
FIDDLE
You are tried to set active twice.
You have styled all the states for the selected item but not the default just add the selector for the item without state:
#nav a.selected, #nav a.selected:link, a.selected:active
#nav a:link,
a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover,
a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected, #nav a.selected:link,
a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover,
a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
<div id="nav">
<ul>
<li>HOME
</li>
<li>ABOUT
</li>
<li>SOLUTIONS
</li>
<li>CONSULTANCY
</li>
<li>SUPPORT
</li>
<li>CONTACT US
</li>
</ul>
</div>
:active is a state but :link not. Link is referring to the attr of the anchor so
Change
#nav a.selected:link, a.selected:active
to
#nav a[href].selected, a.selected:active
#nav a:link, a:visited {
font-weight: bold;
color: #066;
text-align: center;
padding: 8px;
text-decoration: none;
text-transform: uppercase;
}
#nav a:hover, a:active {
display: block;
background-color: #066;
color: #fff;
}
#nav a[href].selected, a.selected:active{
display: block;
background-color: #066;
color: #fff;
}
#nav a.selected:hover, a.selected:active {
display: block;
background-color: #066;
color: #fff;
}
<div id="nav">
<ul>
<li >HOME</li>
<li>ABOUT</li>
<li>SOLUTIONS</li>
<li>CONSULTANCY</li>
<li>SUPPORT</li>
<li>CONTACT US</li>
</ul>
</div>
Try this :
Simply change this css #nav a.selected:link, a.selected:active with #nav a.selected, a.selected:active and your problem will solve
I have a JS rollover switch, but when I click down on the link, the orange color doesn't stay, it reverts back to grey. What am I missing? Here is my code (orange is color: #f7931d):
CSS:
#content-slider {
padding-top:5px;
height: 240px;
width: 359px;
padding-left: 52px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
overflow: hidden;
}
#content-slider-inside {
list-style: none;
height: 240px;
overflow:hidden;
overflow-y: hidden;
}
#content-slider-inside li {
height: 340px;
width: 359px;
font-family: 'Century Gothic';
font-size: 11px;
color: #BBBDC0;
display:inline-block;
padding-bottom:25px;
}
#navigation {
font-family: 'Century Gothic';
font-size: 14px;
color: #BBBDC0;
display: inline-block;
width: 940px;
height: 18px;
text-transform: uppercase;
padding-left: 45px;
padding-top: 20px;
padding-bottom:10px;
overflow: hidden;
white-space: nowrap;
text-decoration: none;
}
#navigation li {
color:#bbbdc0;
display:inline-block;
padding:5px;
text-decoration: none;
}
#navigation li a, #navigation li a:link, #navigation li a:visited {
color:#bbbdc0;
display:inline-block;
text-decoration: none;
}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited, #navigation li a.selected:active {
color:#f7931d;
display:inline-block;
text-decoration: none;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active, #navigation li a:focus:active {
display:inline-block;
text-decoration: none;
color:#f7931d;
}
HTML:
<ul id="navigation">
<li>overview</li>
<li>features</li>
<li>resume management</li>
<li>financials</li>
<li>expense tracking</li>
<li>search</li>
</ul>
Then the rest is basically just tags and anchors for when you click on the link.
<div id="content-slider">
<ul id="content-slider-inside">
<li id="overview">
text
</li>
<li id="features">
text
</li>
<li id="resumemanagement">
text
</li>
<li id="financials">
text
</li>
<li id="tracking">
text
</li>
<li id="search">
text
</li>
</ul>
</div>
It sounds like you are asking how to keep the menu item highlighted if its the current page. I discovered this handy little jQuery snippet on Stack Overflow a while ago, so I apologize that it is not attributed correctly. If someone recognizes this, please let me know and I will update with credits!
<script>
$(document).ready(function(){
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("nav-active"); //replace nav-active class with your preferred highlighting class-- in this case the orange color.
});
</script>
Basically it reads the browser URL, and if the end of the URL matches a menu item, it will keep it highlighted.