Trying to change colors when hovering over navigation links, never had a problem before but it will not work.
I have my navigation in several div's, I tried to set my a link style to all divs, nothing changes at all. I originally made my code in a CSS class. Trying to make a responsive website at home, didn't have links in the navigation bar originally, just text.
a.navBar:link {color: white; text-decoration: none; }
a.navBar:visited {color: white; text-decoration: none; }
a.navBar:hover {color: #16262E; text-decoration: underline; }
a.navBar:active {color: white; text-decoration: underline; }
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
I just want white text as navigation links that turn #16262E when the mouse is hovering over the link. Not receiving any errors, it just doesn't change from the default blue, underlined links.
a.navBar means that you are selecting a link tag wich have class 'navBar'. This selector does not exist.
No link tag have a class navBar.
To solve this you can apply color changing when you hover the list tag.
Use this selector :
#navBar ul li:hover a {color : #000fff}
This means that when you hover li (which is located inside #navBar) change the link color
Step 1
Remove a from starting of a.navBar.
Step 2
Change .navBar to #navBar you are declaring id attribute in element <div id="navBar">.
Step 3
Add space and a between #navbar and Pseudo-elements.
Below code snippet have all above mentioned fixes. Try this I hope it'll help you out. Thanks
body {
background-color:grey;
}
#navBar a:link {color: white; text-decoration: none; }
#navBar a:visited {color: white; text-decoration: none; }
#navBar a:hover {color: #16262E; text-decoration: underline; }
#navBar a:active {color: white; text-decoration: underline; }
<div id="outerWrapper">
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<body>
<ul>
<li><a class="navBar" href="#">About</a></li>
<li><a class="navBar" href="#">Our Work</a></li>
<li><a class="navBar" href="#">Contact Us</a></li>
</ul>
</body>
I have removed other div which are not nested properly.
Now put CSS inside "style" tag.
I will suggest to change either text-color or background-color, as text isn't visible on white background.
Related
I want to use a hover tag for links in an unordered list, but when using hover after "a:" nothing happens It doesn't change color from white. Absolute beginner so any help appreciated.
I've looked at my HTML but can't seem to find anything wrong with it.
CSS:
header a: hover{
color: #cccccc;
font-weight: bold;
HTML:
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
Perfect Code.. just remove extra space from CSS code and add a closing curly brace.
i.e.
header a:hover{ color: #cccccc; font-weight: bold;}
header a:hover{ color: #cccccc; font-weight: bold;}
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
header a:hover{
color: #cccccc;
font-weight: bold;
}
Be carefull of what and how you type... After a and : should not be a space so a:hover and then you need closing semicolon on the end of your hover css.
It's because you have a space after :
The correct form is
header a:hover {
color: #cccccc;
font-weight: bold;
}
i am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
Here is the new css you should use:
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}
Then your html should look like this:
<body>
<ul class="block1">
<li class="home">Home</li>
<li class="hidden" >
contact us
</li>
<li>about</li>
<li>Investor</li>
<li> what we do</li>
</ul>
</body>
Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>
Here is the JSFiddle: Example of OP Code
i don't understand is why would display property won't work on a
single li element.
The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.
In your case, you are trying to use display:none to hide a li and make it display by means of hover.
Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)
.block1 {
background-color: #736570;
margin: 0px;
}
ul a {
color: white;
}
ul li {
list-style-type: none;
padding: 5px;
}
.hidden {
display: none;
}
.block1:hover .hidden {
display: block;
}
.hidden a:hover {
background-color: #f1f1f1;
}
.home
<html>
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about
<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
</html>
I've recently been looking back into web design and learning new things with it. I am now using the last-of-type selector, and I'm trying to do so for a navigation bar, but it doesn't seem to work the way I want it to.
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
Now, I want to select the last of type li for this, so here is my CSS:
.main-nav ul li:last-of-type {
color: green;
}
I do have a color set for the a element for this, so I have tried adding !important, but it doesn't help at all. The only way I can get it to work is if I make it like this:
HTML:
<nav class="main-nav">
<div class="inset-inner">
<ul>
<!--<li>Home</li>
<li>Contact</li>
<li>About Us</li>-->
<li>Home
Contact
About Us
</li>
</ul>
</div>
</nav>
CSS:
/*
.main-nav ul li:last-of-type {
color: green !important;
}
*/
.main-nav ul li a:last-of-type {
color: green;
}
Now, how could I fix this for when I have a li element for each a element, and what is causing this anyways?
Use last-of-type on the <li>, then add an a at the end:
.main-nav ul li:last-of-type a{
color: green;
}
jsFiddle example
So, if I understand your question correctly, you'd like for the last link to be green, using the last-of-type selector:
http://jsfiddle.net/YWfx2/
All you need to do is put the selector on the li and add the a tag after it!
HTML :
<nav class="main-nav">
<div class="inset-inner">
<ul>
<li>Home</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</nav>
CSS :
.main-nav ul li:last-of-type a{
color: green;
}
If I set the styling font color in my unordered list for my navigation bar, how can I over ride that with a .class on a specific element?
For example, here's my navigation:
Home
Services
About
Contact us
And so I set in my CSS for the navigation font color to be #000.
Now what do I do if I want to over ride just one of the elements to be a specific color with a class? Because I try using a class on one of them, but it doesn't over ride it.
If each of the elements are under their own li you can set one of those li's like this
li class="home" Home li and in css put .home {color:#000} if I read the question right this should help if not sorry I'm new to this.Sorry I would write it in code, but still have to get familiar with this site.
You can use the :active pseudo element.
If your HTML is:
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
You can do this with CSS:
nav a {
color: #000;
font-size: 14px;
font-weight: 600;
}
nav a:hover {
color: #3e82f7;
}
nav a:active {
color: #db4437;
}
nav a:visited {
color: #ffeb3b;
}
If you're trying to indicate what page the user is on, you probably want to structure your HTML along these lines:
<nav>
<ul>
<li><a class="current-page" href="home.html">Home</a></li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
And your CSS:
nav a {
color: #000;
font-size: 14px;
font-weight: 600;
}
.current-page {
color: #3e82f7;
}
Not a web developer so i hope you will spare me if this question does not make sense.I tried many ways but due to lack of knowledge of CSS its not working for me.
i have a page with following structure
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a link>Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a link> Link title</a></li>
</ul>
</div>
</div>
</div>
Now my intention was that when the page first display all link should be underlined and when i hover over them text-decoration should be none.
i write this css code
.archive ul li a:hover{
text-decoration:none;
outline:medium none;
}
.archive ul li a:visited {
color:#4280B4;
text-decoration:underline;
}
.archive h3 a:visited{
color:#CE4F00;
text-decoration:underline;
}
.archive h3 a:hover{
color:#3C78A7;
text-decoration:none;
}
but this is not working and its picking the following CSS entry from same CSS file
a:link, a:visited {
color: #3c78a7;
text-decoration:none
}
a:hover, a:active {
color: #3c78a7;
text-decoration:underline;
}
Honestly what i did was simple hit and trial nothing being logical.Can any one guide me to right path how i can achieve correct behavioral.
Thanks in advance
Maybe because you have not written the css attributes for a general anchor tag link. Something like
.archive ul li a
{
text-decoration:underline;
}
.archive ul li a:hover
{
text-decoration:none;
}
Then when you hover, you will get the intended effect.
You have to specify the styles in a particular order when you define them:
link
visited
active
hover
Edit: response to your comment. The physical order that you write the CSS matters for anchors (a tags). In the CSS that is being used (your third code snippet), the CSS code for the visited links appears before the code for the active links.
In your own code in the second snippet, you have the CSS for ul li with hover before visited. You should simply reverse the order of those two CSS rules.
I'm not sure why your CSS for h3 doesn't work, except perhaps it wants a CSS rule for link.
This might be what you want.
<html>
<head>
<style rel="stylesheet" type="text/css">
.archive ul li a:hover{
text-decoration:none;
outline:medium none;
}
.archive ul li a:visited {
color:#4280B4;
text-decoration:underline;
}
.archive h3 a:visited{
color:#CE4F00;
text-decoration:underline;
}
.archive h3 a:hover{
color:#3C78A7;
text-decoration:none;
}
</style>
</head>
<body>
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a class="link" href="#">Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a class="link" href="#"> Link title</a></li>
</ul>
</div>
</div>
</div>
</body>
Your value for the hrefs may vary.
The only things changed are the anchor tag parts.
add this at the end of your css
li a
{
text-decoration:underline;
}
in some browsers the <a> (anchor) tag will not render as a hoverable link unless you specifiy an actual href='#'
This is the case in Chrome anyway. If I specify hrefs for the 4 <a>'s in your example html it works.
<div id="content">
<div class="archive">
<div class="left-archive">
<h3>Main Left tile</h3>
<ul>
<li>Link title</li>
</ul>
</div>
<div class="right-archive">
<h3>Main Right tile</h3>
<ul>
<li> Link title</li>
</ul>
</div>
</div>
</div>
You have anchors and no links. You also added underlines to all link, which is the opposite of what you said you wanted. I added an 'a' so that your style would apply to them as well. Also, there is no 'link' attribute for the anchor tag.
Here is a live example as well: http://jsfiddle.net/khalifah/jymK3/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a, a:link, a:visited {
color: #3c78a7;
text-decoration: underline
}
a:hover, a:active {
color: #3c78a7;
text-decoration: underline
}
.archive ul li a:hover{
text-decoration: none;
outline: medium none
}
.archive ul li a:visited {
color: #4280B4;
text-decoration: underline
}
.archive h3 a:visited{
color: #CE4F00;
text-decoration: underline
}
.archive h3 a:hover{
color: #3C78A7;
text-decoration: none
}
</style>
</head>
<body>
<div id="content">
<div class="archive">
<div class="left-archive">
<h3><a>Main Left tile</a></h3>
<ul>
<li><a>Link title</a></li>
</ul>
</div>
<div class="right-archive">
<h3><a>Main Right tile</a></h3>
<ul>
<li><a> Link title</a></li>
</ul>
</div>
</div>
</div>
</body>
<html>