I'm trying to style my links and I have used this code for that:
.navtext {
position:absolute;
top:130px;
right:50px;
color:#ffffff;
font-size:20px;
z-index:3;
}
a.navtext:link {
color:#ffffff;
text-decoration:none;
}
a.navtext:hover {
color:#ffffff;
text-decoration:underline;
}
a.navtext:visited {
color:#ffffff;
text-decoration:none;
}
And here is my html:
<div class="navtext">
Home
About
School
Workshop
Contact
</div>
But they are staying as the default (Link: blue, underlined. No Hover. Visited: Purple, underlined.
a.navtext selects an <a> tag with the class "navtext".
You have no such <a> tag. Your <a> tags have no classes.
Try something like .navtext a instead. This selects an <a> tag within an element with the class "navtext".
.navtext a {
position:absolute;
top:130px;
right:50px;
color:#ffffff;
font-size:20px;
z-index:3;
}
.navtext a:link {
color:#ffffff;
text-decoration:none;
}
.navtext a:hover {
color:#ffffff;
text-decoration:underline;
}
.navtext a:visited {
color:#ffffff;
text-decoration:none;
}
change to
.navtext a:link { color:#ffffff;
text-decoration:none;
}
.navtext a:hover { color:#ffffff;
text-decoration:underline;
}
.navtext a:visited { color:#ffffff;
text-decoration:none;
}
Related
I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li>Home</li>
<li>Our Products</li>
<li>Contact us</li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Replace .nav a:link with .nav li a
demo
.nav li a, .nav li a:visited {
/*here^^^*/
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
This is working fine now in the fiddle.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:visited{
background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a{
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
Your a:hover is covered by a:link or so on.
I guess, Since a:hover is of the same level with a:link, Css class at the lower position of the file has higher priority.
You can refer to this:
resolve css conflict
Here is the demo.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav-link {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav-link:hover,.nav-link:active {
background-color:#7A991A;
}
it's not a good practice to nest too many tags, give it a class.
use :link :visited :hover :active only when you want to rewrite the default styles.
css is cascading style sheet, order matters, put .nav-link first to normalize default styles and then overwritten default with :hover and :active.
!important is not a good practice here, just rearrange the order.
How can I get a list to flow to the side?
The best example ive seen of what I mean is on TruTower's VoIP Page. I'm trying to update my site from old html to new css but cant find the right code.
Prefer OL style (numbers) but UL is okay too.
You may want to look at this jsfiddle for an example to get you started.
http://jsfiddle.net/ashrobbins/SKzwU/
ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
Updating Andrew's answer to suit your needs exactly:
Screenshot:
HTML:
<ol>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ol>
CSS:
ol {
margin:0;
padding:0;
position:absolute;
right:0px;
left:0px;
background: #eee;
}
li {
float:left;
padding-left:5px;
list-style-position: inside;
}
li + li {
border-left:1px solid #ccc;
}
a {
display:inline-block;
padding:7px 10px;
color:#222;
background:#eee;
text-decoration:none;
}
li:hover{
color: #fff;
background-color:#666;
}
a:hover {
color:#fff;
background:#666;
}
a:active {
color:#fff;
background:#0090cf;
}
FIDDLE
I am playing around with CSS and so far I'am trying to make a website. I making a navigation bar and it's going down so it's horizontal. I need it to go across and I also need like 1 grey line to separate the tabs out. This is what I got so far.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
CSS:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
So again this goes downwards , i need it to go to the side and just have like a single line which separate every tab out.
div.horizontal
{
width:809px;
height:63px;
position:relative;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left:5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
display: inline;
color:#FFFFFF;
background-color:#000000;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Working fiddle:
http://jsfiddle.net/EpPSv/10/
I have a compound hyperlink that contains two span elements, one of which I want to underline on hover, and the other not. A good example of this is the name / username link pair found at the top of Twitter tweets. I just can't figure out how they do it.
My attempt:
HTML:
<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>
CSS:
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.caption:hover {
text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}
fiddle: http://jsfiddle.net/vgKSh/1/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span{
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
You almost got it. Put text-decoration:underline; in main class only.
a {
text-decoration:none;
font-weight:bold;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
http://jsfiddle.net/vgKSh/9/
Forked and fixed here: http://jsfiddle.net/CtD8M/
Just have the specific span a set to text-decoration underline, rather than setting globally
Fiddle: http://jsfiddle.net/vgKSh/4/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span.main {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
a:hover span {
text-decoration:none;
}
a:hover .main{
text-decoration: underline;
}
Just as a style thing, I never use text-decoration but use border-bottom instead with a bit of padding.
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
I am trying to style hyperlinks: some must be white, and some others must be normal color. Here is what I have:
Register
a:link {
color:#FFF;
text-decoration:none;
}
a:hover {
color:#FFF;
text-decoration:underline;
}
a:visited {
color:#FFF;
text-decoration:none;
}
a:active {
color:#FFF;
text-decoration:none;
}
.normal a:hover{
color:#00F;
}
.normal a:link{
color:#00F;
}
.normal a:visited{
color:#00F;
}
.normal a:active{
color:#00F;
}
The normal links work fine. But when I use the class=normal, the link is still white. Why are the normal links taking precedence?
try define the class normal like this:
a.normal:hover
{
color:#00F;
}
a.normal:link
{
color:#00F;
}
a.normal:visited
{
color:#00F;
}
a.normal:active
{
color:#00F;
}