I have these small blue lines under and over the 2 images.
I tried to apply
style="border: 0;" but it didnt work.
Also tried to apply the css border:0px, outline:0px in the css file.
but it din't work too.
I assume that these are links or stuff like that.
Anyone can help me to remove these small blue lines?
.kategorien1{
margin-bottom: 50px;
margin-left: 75px;
margin-right: -35px;
box-shadow: 0px 0px 3px 0px black;
transition-property: all;
transition-duration: 400ms;
}
.kategorien2{
margin-bottom: 80px;
margin-left: 300px;
box-shadow: 0px 0px 3px 0px black;
transition-property: all;
transition-duration: 400ms;
}
<!DOCTYPE html>
<html= lang=de>
<head>
<link href="style.css" rel= "stylesheet" type="text/css">
<meta charset="utf-8">
<title>Handgefertigte Armbänder online shoppen bei handform</title>
</head>
<body>
<!--BILDER UNTERKATEGORIEN-->
<a href="damem-lederimitat.html">
<img class="kategorien1" src="Lederimitat.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-armreifen.html">
<img class="kategorien1" src="armreifen.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-perlenarmbänder.html">
<img class="kategorien1" src="Perlenarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien1" src="verschiedene_b%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
<a href="damem-verschiedene-armbänder.html">
<img class="kategorien2" src="M%C3%A4nnerarmb%C3%A4nder.jpeg" width="40%" style="border: 0;">
</a>
</body>
</html>
It's from the a tags, as in the blue underline from the hyperlink. Add this to your css to remove them:
a {
text-decoration: none;
}
To cover yourself totally, it might be a good idea to apply this to both states of the a tag (you know how it goes purple once clicked?), so try this css:
a, a:visited {
text-decoration: none;
}
What this will do though, is remove the underline from all links on your page. So it might be a good idea to create a class and add it to the links you don't want underlined, like this:
a.no-underline,
a.no-underline:visited {
text-decoration: none;
}
<a class="no-underline" href="#">This isn't underlined</a>
But this is!
You have text decoration on your a tag.
a{text-decoration: none;}
This will get rid of it. Just use a better selector as the above will remove all underlines for links.
When you use images as links browser by default applies the css. to remove it you should remove all default properties of <a> like:
a{
text-decoration:none;
}
or you can assign separate class for <a> and then deine the properties..!
Just use following CSS for this
img, a, a:focus {
outline: none;
}
a, a:hover {
text-decoration: none;
}
Related
I am trying to make a navbar, background, and style consistent through a few paged site. I have done a bit of research and found I might be able to use a server side include or the link property to embed a page in all the pages so I can change once and feel the effects on all the pages, I found the way to change the background is to add it to the body tag, but shouldn't the body tag be separate from the embedded file? I considered opening the body tag in the template file and closing it in each individual page, but that seems very bad.
Here is my unfinished template file.
<style>
body {
background-color: #afa7a7;
color: white;
}
.button {
background-color: #424242;
color: white;
border:none;
padding 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px; 2px;
cursor: pointer;
}
</style>
<body>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: left;" />
</a>
<a href="Main.shtml">
<img src="images/pentagram.png" alt="Pentagram" width="200px" height="200px" style="float: right;" />
</a>
</body>
I have a page and when an image is clicked in that moment a border is displayed around the image, the image at the same time is a link, why is this happening? it just happens when the image is clicked.
This is my code:
<div id="hammer">
<a asp-action="myaction" asp-controller="mycontroller" class="col-xs-6"> <img src="~/images/online_keyboard_news.jpg" class="highlight" width="100%" height="auto" /> firstimage</a>
<a asp-action="myaction2" asp-controller="mycontroller2" class="col-xs-6"> <img src="~/images/document-428336_960_720.jpg" class="highlight" width="100%" height="auto" /> secondimage</a>
</div>
<br />
and this is the css class I'm using:
#hammer {
font-size: 18pt;
margin: 15px 0 0 0;
text-align: center;
}
This is what is happening just when an image is clicked:
Add outline:none; for all a and img elements
#hammer a, #hammer a img{
outline:none !important;
}
You can try to set the outline css property to none:
#hammer a, #hammer img {
outline: none;
}
Let me now if this helps you.
Add this to your css
#hammer > a {
outline: 0;
}
I have a scenario where I want to have the text links with border-bottom, and set-up the css like this
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
The problem is that the images that are wrapped in links also have this border-bottom, eg.
<a href="home">
<img src="logo.jpg" alt="Logo" class="logo-img">
</a>
How can I target the a:hover that it is only for text links? Pure CSS would be preferable.
No problem.
Add a class to your text links. Then target those links like this.
a.testing:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=bc7c2f3904bf" alt="Logo" class="logo-img">
</a>
<a class="testing" href="home">
TESTING
</a>
Hope this helps.
Added with EDIT
Here is Another Option
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a[href*='ignorethis'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
<a href="http://www.milk.com?ignorethis">
<img src="http://s.w.org/style/images/wp-header-logo.png" alt="Logo" class="logo-img">
</a>
<a href="http://www.milk.com">
TESTED
</a>
This achieves the same thing by targeting target all anchors whose href attribute contains the given value ('ignore this'). Other ways this can be used.
attribute *= contains value
attribute ^= begins with value
attribute $= ends with value
To use this just append '#special-test-value' to the end of the link or in the case of a targeted link append '?special-test-value=0' or in the case where the query string already exists use '&special-test-value=0'
I thought this was an interesting way to target links and that it might be new to a lot of people.
Another use case
If the case is that a single url or a specific set of urls you could use them to end target them and exclude the anchored images that way.
a[href$='somedomain.com/url1/'], a[href$='somedomain.com/url2/'], a[href$='somedomain.com/url.../'], a[href$='somedomain.com/urlN/'] {
text-decoration: none !important;
border-bottom: 0 none !important;
}
OK that's it have a great night.
Two ways, either wrap the text in a span (below sample) or set a unique class to links with text only.
a {
text-decoration: none;
}
a:hover {
color: #492512;
}
a:hover :not(img) {
border-bottom: 2px dashed #94705A;
}
<a href="home">
<img src="http://placehold.it/50/100/" alt="Logo" class="logo-img" />
</a>
<br>
<br>
<a href="home">
<span>Text</span>
</a>
It seems that pure CSS global styling doesn't work, so I resorted to jQuery to add a class to anchors which have images, like this:
jQuery("a").each(function(){
if ( jQuery(this).children('img').length > 0 ) {
jQuery(this).addClass("noborder");
}
});
And the CSS is:
a:hover {
border-bottom: 2px dashed #94705A;
}
a.noborder:hover {
border-bottom: none;
}
Thanks for all the comments and suggestions.
Cheers!
Well you can make a separate class for image links:
a:hover {
color: #492512;
border-bottom: 2px dashed #94705A;
}
a.image-anchor:hover {
border-bottom: 0 none;
}
<p>Text link</p>
<p><a class="image_anchor" href="stackoverflow.com"><img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png"></a></p>
I do not want the picture to be underlined, but I need the hyperlink in the text to be underlined. How can I do that? It is a wordpress theme so I can't change the html I have to stay with css
.post-desc a{
border-bottom: 1px solid #FBCF00;
}
.post-desc a img{
border-bottom: none;
}
<div class="post-desc">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</div>
You can remove it under the image using display:table; on image, like this:
.post-desc a img{
border-bottom: none;
display:table;
}
Snippet:
.post-desc a {
border-bottom: 1px solid #FBCF00;
}
.post-desc a img {
border-bottom: none;
display: table;
}
<div class="post-desc">
<a href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763">
<img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438">
</a>
</div>
to make it simple you may use vertical-align with a negative value to drop img as much as needed under the base line:
a {
border-bottom: solid;
}
a img {
vertical-align: -0.5em;/* average -0.25em equals vertical-align:bottom */
/* demo purpose: see border under img */
opacity:0.75;
}
text
<a href="#">
<img src="http://dummyimage.com/60" />
</a>
within the last stylesheet of your website , test this
a img {
margin-top:0.5em;
vertical-align: -0.5em;
}
or if you like better:
a img {
position:relative;
top: 0.5em;
}
The idea is to hide the border with the image itself
Text decoration underline
<div><a style="text-decoration:underline" href="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" target="_blank" rel="attachment wp-att-2763"><img class="alignnone wp-image-2763 size-full" src="http://www.montrealguidecondo.ca/news/wp-content/uploads/2016/01/exterieur-1.jpg" alt="extérieur de Tod condo" width="639" height="438"></a>
You have set the border attributes on the <a> tags, so you can't just remove them on the containing <img> elements. Unfortunately, there is no "conatining" selector in css (yet) and apparently you can't edit the html, so we have to stick with the informations we've got.
The links with the containing images have the word attachment in the attribute rel. This is how to select them and disable their border:
a[rel~="attachment"] {
border-bottom: none !important;
}
Hello I have 3 flags (Italian, german, english) with the purpose to change language for the whole site in future. How can I make a border on a hover effect that could alxo work with IE ?
this is the CCS
.miniflags {
float:right
margin : 5px 20px;
padding-right:10px;
}
and here the HTML
<div id="bandiere">
<a><img src="ita.png" class="miniflags" /></a>
<a><img src="ger.png" class="miniflags" /></a>
<a><img src="eng.png" class="miniflags" /></a>
</div>
Thanx for help
Alex
add
.miniflags img:hover {
border: 1px solid #000;
}
or
.miniflags a:hover {
border: 1px solid #000;
}
to your css
i believe the 2nd will work better (a:hover)
If you apply the miniflags class to the <a> instead, the :hover pseudoselector will work.
The miniflags class hardly seems necessary. Just remember that :hover works only for links in older versions of IE, so you will need to apply it to the <a> tags instead of the <img>.
<div id="bandiere">
<a><img src="ita.png" /></a>
<a><img src="ger.png" /></a>
<a><img src="eng.png" /></a>
</div>
<style type="text/css">
#bandiere img {
float:right
margin : 5px 20px;
padding-right:10px;
}
#bandiere a:hover, #bandiere a:focus {
border: 1px solid red;
}
</style>
IE (until 6 IIRC) only allows hover for links. So you'd have to add the :hover to the a not to the image. The <a> must have a href attribute for this to work of course.