My CSS code for .header and .mtstyle are now showing in my header when I preview. Nothing I have done has fixed the issue. This just started to happen. Thoughts? Also, is there a way to combine the a:link css into one line? Thanks.
.header {
position: absolute;
height: 45px;
right: 0;
top: 0;
left: 0;
background-color: white;
}
.mtstyle {
text-align: center;
margin-top: 5px;
margin-left:15px;
}
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
/* mouse over link */
.mtlstyle a:hover {
color: none;
}
/* selected link */
.mtlstyle a:active {
color: #3399CC;
}
.mtlstyle a:link {
text-decoration: none;
}
.mtlstyle a:visited {
text-decoration: none;
}
.mtlstyle a:hover {
text-decoration: none;
}
.mtlstyle a:active {
text-decoration: none;
}
<div class="header">
<div class="mtstyle">
<div class="mtlstyle">
<h1>Title</h1>
</div>
</div>
</div>
When you want to code, always try to close your open tags before put another tag in it!
For starter your HTML is incorrect in this line:
<h1>Title</h1>
It should be:
<h1>Title</h1>
you must enclose a tag first then close the h1.
And you can always create CSS for multiple classes or behaviour with use of ",", like this:
a:hover, a:visited, a:active {
text-decoration: none;
}
Delete this
/* unvisited link */
.mtlstyle a:link {
color: #3399CC;
}
/* visited link */
.mtlstyle a:visited {
color: #3399CC;
}
Related
I have this for my default css which is exactly what I want for the majority of my webpage (RED and then it underlines on hover)
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
However in some cases I want it to be White and but then still turn red on hover, and I was hoping to override the white on the occasions I need to as it is far less common than the other style.
I tried
a href="/" style="color:#FFF">Home
This overrides the colour for both parts which makes sense for why it is doing it, but I want it to only overwrite the static link and not the on hover.
Any help would be appreciated!
Thanks
You can use a class, take a look at this
article {
background: #ccc;
padding: 20px;
}
a:link, a:visited{
color: #F00;
text-decoration: none;
}
a:hover, a:visited:hover{
color: #F00;
text-decoration: underline;
}
a.white:link, a.white:visited{
color: #FFF;
text-decoration: none;
}
a.white:hover, a.white:visited:hover{
color: #F00;
text-decoration: underline;
}
<article>
<p>
normal
</p>
<p>
alternate
</p>
</article>
Use a class with the color white defined, then apply this class to each anchor that should be white. In CSS...
a.white:link, a.white:visited {
color:#ffffff;
}
In HTML...
...
Just use a class for this.
body {
background: gray;
}
a.whiteLink {
color: white;
}
a {
color: #F00;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: underline;
}
Home
On Chrome and Firefox, if I apply a text-decoration:underline on a tag, by default the underline does not apply to the pseudo element.
But on IE it does, and I can't remove it.
I want the link to be underlined, but not the pseudo element.
It work if I add a span inside and put the underline on it, but I want to know if it can be made without additional markup.
a{
padding-left: 9px;
position:relative;
display:inline-block;
}
a:before{
content:'\203A\00a0';
position:absolute;
top:0;
left:0;
display: inline-block;
}
#underline{
text-decoration: none;
}
#underline:hover{
text-decoration:underline;
}
/* special for IE */
#underline:hover:before
{
text-decoration:none !important; /* does nothing ! */
}
#color{
color:green;
}
#color:hover{
color:red;
}
#color:hover:before{
color:green; /* work ! */
}
#span{
text-decoration: none;
}
#span:hover span{
text-decoration: underline;
}
underline
<br>
color
<br>
<span>with span</span>
It seems that IE don't let you override the text-decoration in the pseudoelement if it isn't set in it.
First let the pseudo-element be underlined - text-decoration: underline - and afterwards override this with textdecoration: none.
#underline:hover:before
{
text-decoration:underline;
}
#underline:hover:before
{
text-decoration:none;
}
As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though.
a {
color: green;
display: inline-block;
padding-left: 9px;
position: relative;
text-decoration: none;
}
a:before {
content: '\203A\00a0';
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
a:hover {
border-bottom: 1px solid green;
}
a:hover:before {
border-bottom: 1px solid white;
}
Hover to check underline
you can add this to your css. this helped me in the IE
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before,a:after { text-decoration:underline;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
I'm sure this is a rather simple fix but I haven't been able to figure it out.
I used the page properties in Dreamweaver to come up with the CSS for the links on the page and everything was working correctly. I now have one row where I need to change both the link and hover colors for a few links.
<head>
<style type="text/css">
<!--
body {
background-color: #666666;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #666666;
}
a:active {
text-decoration: none;
color: #000000;
-->
</style>
</head>
I was able to change the link color successfully by using the code below in the body.
Website
What I have not been able to do successfully is change the rollover. I've searched and tried a few different methods to solve the problem but haven't had any success. Could somebody point out what I'm doing wrong or give me an example of how the CSS should look?
Give your special links a special class:
CSS
.link
{
color: rgb(20, 80, 153);
}
.link:hover{..}
.link:active{..}
.link:visited{..}
HTML
Website
So to colour the link you just need:
a{
color: rgb(20,80,153);
text-decoration: none;
}
Then if its hover you want:
a:hover {
color: red;
}
HTML:
Website
CSS:
a{
color: rgb(20,80,153);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
color: red;
}
DEMO HERE
On top of that, if you do not want it for ALL links you give them a class:
HTML:
Website
CSS:
.test {
color: rgb(20,80,153);
}
.test:hover {
color: red;
}
DEMO HERE
use class names instead of just targeting the a
CSS
a.someName1:link {
color: #000000;
text-decoration: none;
}
a.someName1:visited {
text-decoration: none;
color: #000000;
}
a.someName1:hover {
text-decoration: none;
color: #666666;
}
a.someName1:active {
text-decoration: none;
color: #000000;
}
HTML
Website
The easiest way to change the colors for a entire row would be to add a class to said row (or <tr>, I'm assuming) and then add CSS for all links that are descendants of a element with that class.
I'm making some assumptions on your HTML, but it will probably go something like this...
HTML:
<tr class="atl-color">
<td>Link #1</td>
<td>Link #2</td>
</tr>
CSS:
.alt-color a:link { color: blue; }
.alt-color a:hover { color: red; }
This is one of the links in my nav:
<li><span id="navLiveNow" class="white innerShadow textShadow">Live Now</span></li>
I also have the following in my css:
a { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
But the links still display in the awful blue/purple visited /hover html default. What am i doing wrong?
You need to override the color:
a { color:red } /* Globally */
/* Each state */
a:visited { text-decoration: none; color:red; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }
REMOVE DEFAULT LINK SOLVED
that :visited thing is css.... you just go to your HTML and add a simple
< a href="" style="text-decoration: none" > < /a>
... thats the way html pages used to be
<a href="https://www." style="color: inherit;"target="_blank">
For CSS inline style, this worked best for me.
Hey define color #000 into as like you and modify your css as like this
.navBtn { text-decoration: none; color:#000; }
.navBtn:visited { text-decoration: none; color:#000; }
.navBtn:hover { text-decoration: none; color:#000; }
.navBtn:focus { text-decoration: none; color:#000; }
.navBtn:hover, .navBtn:active { text-decoration: none; color:#000; }
or this
li a { text-decoration: none; color:#000; }
li a:visited { text-decoration: none; color:#000; }
li a:hover { text-decoration: none; color:#000; }
li a:focus { text-decoration: none; color:#000; }
li a:hover, .navBtn:active { text-decoration: none; color:#000; }
If you wants display anchors in your own choice of colors than you should define the color in anchor tag property in CSS like this:-
a { text-decoration: none; color:red; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }
see the demo:- http://jsfiddle.net/zSWbD/7/
By default link color is blue and the visited color is purple. Also, the text-decoration is underlined and the color is blue.
If you want to keep the same color for visited, hover and focus then follow below code-
For example color is: #000
a:visited, a:hover, a:focus {
text-decoration: none;
color: #000;
}
If you want to use a different color for hover, visited and focus. For example Hover color: red visited color: green and focus color: yellow then follow below code
a:hover {
color: red;
}
a:visited {
color: green;
}
a:focus {
color: yellow;
}
NB: good practice is to use color code.
When you set the style of a tag in your CSS it goes global (as Andreas Wong mentioned), IE, it is applied in every scenario to that tag (visited, hovered, focus etc...), unless you manually change it
So you can do it like bellow:
a{
color : blue;
}
Now you can specify the color in a certain scenario:
a{
color : blue;
}
a: focus{
color : skyblue;
{
Right now, I've implemented legal notices at the bottom of my page and I've managed to make all the links white. However, I want only the hover colour to be different, like this website: http://www.condolicious.com/
Can someone please tell me how to do this? I tried changing the a:hover color thing and I'm only getting solid colours. Thanks.
#footer .notice a {
a:link; color: #fff;
a:visited; color: #fff;
a:hover; color: #fff;
a:active; color: #fff;
text-decoration: none;
}
Your :hover styles need to be separate CSS declarations - not part of the #footer .notice a {} block, like so:
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover,
#footer .notice a:active {
color:#CC0000;/*Whatever color you like */
}
You need to do this
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover {
color: #fff; // change to a different color
}
Same with :visited and :active.
Did you realize all your links have the same color? Even the hover state?
#footer .notice a:hover { color: red; }
you'll need to adjust your syntax
#footer .notice a:hover {
color:green;
text-decoration: none;
}
The syntax above isn't going to work:
#footer .notice a {
color: #000;
text-decoration: none;
}
#footer .notice a:hover {
color: #FFF;
}
The first CSS declaration will set the colour of all your a tags (you don't need to set them individually unless they're styled differently). The second sets the colour on hover, a pseudoclass that is supported by all modern browsers (and most older ones).
You don't need to set the text-decoration again in the second declaration, as the :hover already inherits all the "generic" attributes set in the first declaration.
You've got to declare each link hover state separately, like this:
/* you can combine css declarations as follows */
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:visited {
color: #fff; /* change this to whatever color you'd like */
}
#footer .notice a:hover {
color: #000; /* change this to whatever color you'd like */
text-decoration: underline;
}
#footer .notice a:active {
color: #fff; /* change this to whatever color you'd like */
}
Change your code to:
#footer .notice a {
color: #fff;
text-decoration: none;
}
#footer .notice a:hover {
color:#AAA
}
here, #AAA is color when anchor tag is hovered.
edit: removed the invalid css