I have the following style for my footers in my css file:
#footer {
text-align: center;
font-size: .7em;
color:#000000;
}
This is the html for the footer part:
<div id="footer">
<br> //google ad
<br>
<br>
Blog RSS Autos Usados Videos Chistosos Fotos de Chavas<br>
Derechos Reservados © 2008-<?=date('Y')?> address<br>
</div>
But for some reason some of the links show underlined.
Any ideas how I can make it so the links do not appear underlined?
Thx
you can try
#footer a { text-decoration: none }
that means all <a> tags within the element with id footer will have no underline.
try:
#footer a{
text-decoration: none;
}
Apply the following style:
a, a:link, a:visited, a:hover
{
text-decoration: none;
}
I've intentionally given you complete coverage of all the states that an <a> tag can have, but you very well may be able to get away with the following as well:
a
{
text-decoration: none;
}
Finally, if you only want this applied to the footer:
#footer a, #footer a:link, #footer a:visited, #footer a:hover
{
text-decoration: none;
}
Not a direct answer to your question, but I'd highly recommend installing Firebug in Firefox as it allows you to see what classes are applied and it what order - essentially helping you to debug your CSS.
Add the following line to your stylesheet:
a {text-decoration:none;}
Related
I am trying to make my <h1> element a link.
Here is the HTML:
<a href="site.html">
<h1 id="logo" class="lobsterfont" style="margin-top: -10px;">
Kusko Enterprise
</h1>
</a>
Here is the CSS:
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
#logo a:link {
text-decoration: none;
}
#logo a:visited {
text-decoration: none;
}
#logo a:hover {
text-decoration: none;
}
#logo a:active {
text-decoration: none;
}
Instead of removing the line after I run the code, the line under the link is permanent instead.
What am I doing wrong?
In your .css file, you are targeting #logo a:link element, while your a element is outside #logo. You should either target a directly:
a:link, a:href, a:focus, a:visited {
text-decoration: none;
}
or make <h1 /> outer in your HTML:
<h1 id="logo" class="lobsterfont" style="margin-top: -10px;">Kusko Enterprise</h1>
The latter used to be preferred, since headers are block elements and links are inline - but I am not sure if it is still the case.
You need to learn more about CSS Combinators. Your current CSS is targeting an a within an element with id=logo.
If you really want the h1 in an a tag give the a tag the id instead.
#import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
#logo:link,
#logo:visited,
#logo:hover,
#logo:active {
text-decoration: none;
}
/*Target h1 in an element with id=logo*/
#logo h1 {
margin-top: -10px;
}
<a href="site.html" id="logo">
<h1 class="lobsterfont">Kusko Enterprise</h1>
</a>
Insert the style tag with the style="text-decoration:none" attribute in the tag, so that your code looks similar to the following code:
<a style="text-decoration:none" href="http://Example.app.Com">nonunderlinedhyperlink</a>
From the chrome debugger:
element.style {
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
(Everything below this is struck through)
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
nav a:link,a:visited,a:hover,a:active {
color: #000000;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
#title a:link,a:visited,a:hover,a:active {
color: #FF33CC;
text-decoration: none;
}
I'm trying to figure out why an element (title) is not showing up properly. This is what it looks like in the html body:
<div id="title">
link
</div>
I understand that when it's struck through, that style isn't being applied. What I don't understand is
a) Why is the nav style being called at all?
b) Why does the title style for links get called several times? The first time it seems to work, but the second time it's being struck through? (On the website, the element currently is only showing up in black text.)
Thanks in advance!
Your style is being called because the nav parent only applies to the first part of the selector. Basically you have this:
nav a:link,
a:visited,
a:hover,
a:active{
//style
}
What you really want is:
nav a:link,
nav a:visited,
nav a:hover,
nav a:active{
//Style
}
The same thing goes for the #title a:link, a:visited, a:hover, a:active
My guess on why it is trying to use the same CSS multiple times would be that you have the same CSS in multiple places. E.G. you are either
Importing the CSS twice
Importing two CSS files with a duplicate style
Duplicating the CSS in your one CSS file
Check the associated line numbers and see if they are the same (meaning it is actually using the exact same CSS twice) or different (meaning you have the same CSS in multiple places).
you have:
#title a:link, a:visited, a:hover, a:active {
color: #FF33CC;
text-decoration: none;
}
but what it seems like you need is:
#title a:link, #title a:visited, #title a:hover, #title a:active {
color: #FF33CC;
text-decoration: none;
}
the id tag has to appear after each comma, otherwise you are styling ALL links, not just the ones with the #title id.
Hope that helps!
I am in the process of replicating the Google homepage (for practice) and am running into a few problems.
Here is my jsfiddle: http://jsfiddle.net/sdaless/kTn7j/
I am trying to make my text color: white, and text-decoration to none. No matter where I put these two commands, they do not change. I don't know if I am having an inheritance issue or what my problem may be. From my understanding, I thought I could put:
color: white;
text-decoration: none;
in either my #nav-container id or #navlist.
Both removing the underline and making the text color white apply to the anchor tag
ul#navlist li a{
color:#fff;
text-decoration:none;
}
try this
#nav-container ul li a{
color: white;
text-decoration: none;
}
DEMO
When making list-based menus, all styling that is not position-related should go on the A-tag, not the LI and use display:block.
You need to change this selector:
#navlist li
To this (target the a tag)
#navlist li a
The text is present inside the anchor tag, hence the css should be applied for the a tag. Try this css
#nav-container {
background-color:#000;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a{
color:#fff;
text-decoration:none;
}
check this fiddle : http://jsfiddle.net/Kritika/KnS8s/
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.
I see there's this tag in Blogger:
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
But if I change a:link to text-decoration:underline, then EVERY link in the entire blog becomes underlined which is not what I intended. I just need links inside articles/posts to be underlined. Everything else stays the same.
You can target the links inside the posts using descendant selector.
.post-body a:link {
text-decoration: underline;
}
In the above code, replace .post-body with the ID/Class of the article/post. Most probably it is .post-body by default.