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;
}
Related
Sorry my English is not good)
So I was repeating after tutorial and the tutor wrote a:link and gave a property color:red; but when i did so it didn't change it's color
here is html:
<nav class="clearfix">
<ul class="navigation">
<li>About us</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<div class="button">
Sign up
Get a quote
</div>
</nav>
and SCSS:
.navigation{
list-style-type: none;
float: left;
li{
display: inline-block;
margin-left: 30px;
&:first-child{
margin: 0;
}
a:link{
color: red;
}
}
}
I wanted a to change it's color
Put a value in the href. Like:
<nav class="clearfix">
<ul class="navigation">
<li>About us</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
<div class="button">
Sign up
Get a quote
</div>
</nav>
As Rahul Kumar commented, try changing "a:link" to just "a" or "a:active"
a{
color: red;
}
To fix the problem put in the href a # this will navigate to no where but will most likely fix your problem.
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.
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
I'm new to html and css so I'm learning and practicing by making a sample website, but I've hit a problem where I can't seem to use div id tags to edit with css, the css is working perfectly fine editing anything not a div tag. I'm not sure what's wrong with my code.
This is the html code I'm working with:
<body>
<div id="nav">
<div id="container">
<ul>
<li>About us</li>
<li>Getting Involved</li>
</ul>
<div id="centernav">
<ul>
<li>Website</li>
</ul>
</div>
<ul>
<li>Showtimes</li>
<li>Announcements</li>
</ul>
</div>
</div>
<div id="website-name">
<h1>Website title</h1>
<p>info</p>
</div>
</body>
My css code:
div.nav {
font-size: 20px;
background-color: black;
}
h1 {
color: white;
font-size: 30px;
}
body {
background-color: blue;
}
You have been using the wrong selector, div.nav selects all <div class="nav">, instead, div#nav selects the <div id="nav">, but as id's are unique, you can just use #nav :)
See it working here for portability, or here in this code snippet:
#nav {
font-size: 20px;
background-color: black;
}
h1 {
color: white;
font-size: 30px;
}
body {
background-color: blue;
}
<body>
<div id="nav">
<div id="container">
<ul>
<li>About us</li>
<li>Getting Involved</li>
</ul>
<div id="centernav">
<ul>
<li>Website</li>
</ul>
</div>
<ul>
<li>Showtimes</li>
<li>Announcements</li>
</ul>
</div>
</div>
<div id="website-name">
<h1>Website title</h1>
<p>info</p>
</div>
</body>
Maybe this is useful, css selectors.
Hope it helps!
Try this:
div#nav {
font-size: 20px;
background-color: black;
}
h1 {
color: white;
font-size: 30px;
}
body {
background-color: blue;
}
A . indicates a class and a # an id. Change div.nav to div#nav.
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;
}