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>
Related
This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 3 years ago.
I have this structure:
<a href="" class="link">
<div>
<div class="innerdiv-with-underline">text with underline</div>
<div class="innerdiv-without-underline">text</div>
</div>
</a>
I would like that on :hover only the text inside innerdiv-without-underline would not be underlined.
I have tried this with no luck:
.link .innerdiv {
text-decoration:none !important;
}
What can I do ?
You may want to use text-decoration property in the class .link instead of class .innerdiv
.link {
text-decoration: none;
}
.link:hover .innerdiv-with-underline {
text-decoration: underline;
}
<a href="" class="link">
<div>
<div class="innerdiv-with-underline">text with underline</div>
<div class="innerdiv-without-underline">text</div>
</div>
</a>
Just remove innerdiv from .link .innerdivCSS, as achor tag has text-decoration css property assigned, not DIV
.link {
text-decoration:none;
}
Your css rule is this:
.link .innerdiv {
text-decoration:none !important;
}
First of all there is no class named innerdiv. You might've meant innerdiv-without-underline. So probably you should have used this:
.link .innerdiv-with-underline {
text-decoration: none;
}
Alas, this wouldn't work either. Since the underline is coming from the decoration of the <a> tag not <div> tag. So specifying a rule for only the div won't work. What you could have done is:
.link {
text-decoration: none !important;
}
This will remove underlines from all the links. But now you want one to have underline on hover and another to not.
.link {
text-decoration: none;
}
.link:hover .innerdiv-with-underline {
text-decoration: underline;
}
I would like to know how to change the CSS for the a href tag.
I have been doing this in the tag directly like the following:
<a style="color: #1474c8; margin-bottom: 20px" href="#">This is link #1 </a>
This is working prefect, but I have to do several links so I consider this isn't the best way to do it. So I created a CSS class, but it's not working the same. Each time I pass the mouse over the link it behaves as a normal hyper link with the default href CSS. If I click in the link it change of color. So not sure what I'm missing
.parentCat_wChildren{
color: #1474c8;
margin-bottom: 20px
}
.parentCat_wChildren a:link{ color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:visited { color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:hover { color: #1474c8; text-decoration: none;}
.parentCat_wChildren a:active { color: #1474c8; text-decoration: none;}
<a class="parentCat_wChildren" href="#">This is link #2.1</a>
Adding a JSBin: https://output.jsbin.com/vutozicato
Your .parentCat_wChildren is already an a anchor so use:
.parentCat_wChildren:link {
or eventually:
a.parentCat_wChildren:link { /*make suer to also use a.parentCat_wChildren{ in this case*/
but not .parentCat_wChildren a:link {
P.S:
You can define text-decoration: none; only in one place, inside your first .parentCat_wChildren{ statement.
I have simple rule form all <a>:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
But I don't want this to apply for <img> inside <a>:
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
How can I ignore this?
You would need to add another set of classes after the first, targeting a img, a img:hover, etc. However, an img element doesn't support text-decoration. What is it your trying to avoid with the image?
You could add a class to the <a> tag.
For example
<a href="link" class="image">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
and then with css:
a.image{
}
In this example you would have to specifically set rules to counter the previously set rules for all <a> tags
Another approach would be to use the extra class in conjunction with the :not selector
a:link:not(.image) {
text-decoration: none;
}
a:visited:not(.image) {
text-decoration: none;
}
a:hover:not(.image) {
text-decoration: underline;
}
a:active:not(.image) {
text-decoration: underline;
}
Put your href inside of a div and assign a class to that div; you can then style the class followed by a:
<div class="stylin">
<a href="link">
<img class="myClass" src="smile.png" alt="this is image link example">
</a>
</div>
And then in the stylesheet.
.stylin a:link {
}
Unfortunately there is no way to look and see if an img has a link as a parent (parent selector) to then change the link element based on that. You would need Javascript or JQuery to do that or you can just add a 'link-img' class to any link elements containing an image and set it's CSS properties accordingly.
HTML:
Link 1
Link 2
Link 3
<a class="link-img" href="#">
<img src="smile.png"/>
</a>
CSS:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
.link-img {
text-decoration:none;
}
a:link .myClass,
a:visited .myClass,
a:hover .myClass,
a:focus .myClass,
a:active .myClass {
text-decoration: none;
}
Simple question: I have the following markup...
<a href='#'>
<img src='icon.png'> This is the link
</a>
I want to have the text become underlined on mouseover.
What is the CSS selector for selecting only the text in that <a> element and nothing else? I'd rather not wrap it in anything if I don't have to.
a:hover {
text-decoration: none;
}
a:hover <select_text_here> {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img{
text-decoration: none;
}
should do it. This way all the img tags inside a will be without any underline.
The text would have to be in its own element in order for it to be selectable in CSS. You'd have to use a span or similar:
<img src="" /><span class="link-text">Foo</span>
Obviously you can then just use .link-text to select it.
Since the text doesn't have any separate "handle" that you could select, the best you can do is underline the whole a tag, which includes the image. The image itself will not be underlined technically, so you can't even "un-underline" it.
You'll either have to separate the image from the text, or wrap the text in a span and only highlight that.
I see that Opera/IE doesn't underline the image, but FF does. The easiest way to fix it is to add span element:
<img ... /> <span>...</span>
And then apply text-decoration to span element:
a:hover span {
text-decoration: underline;
}
As far as I know you're not able to select the text only.
Perhaps try this :
a:hover {
text-decoration: underline;
}
a:hover IMG {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover img {
text-decoration: none;
}
another thing you could do is
a{
background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}
or similar, so you don't have to have the image element in the link
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;}