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;
}
Related
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;
}
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;
}
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
I'm trying to build an image gallery with thumbnails and a display for a larger image. At present, its working when the the mouse hovers over the thumbnail which displays the larger image. However I wish to replace the hover feature with an on click so that the larger image does not disappear when the mouse leaves the thumbnail. From a bit of research I'm lead to believe that this can not be done with css as with the hover feature and that I would need to include some script. As I'm new to web development after this I'm a bit lost and would appreciate some help. Below is the html code for the gallery container and the corresponding css code......where do I start from here?
Thanks
A
html code
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/101.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/101.jpg" width="405px" height="585px"/></span></a>
<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/102.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/102.jpg" width="405px" height="585px"/></span></a>
<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/103.jpg" width="56px" height="80px" border="0" /><span><img src="images/gallery/1one/103.jpg" width="405px" height="585px"/></span></a>
<a class="thumbnail" href="#thumb"><img src="images/gallery/1one/104.jpg" width="56px" height="80px"border="0" /><span><img src="images/gallery/1one/104.jpg" width="405px" height="585px"/></span></a>
<br />
</div>
css code
.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid grey;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
Heres a simple start with jquery.
http://jsfiddle.net/8GKXM/
$('.thumbnail').each(function(){
$(this).click(function() {
$('.thumbnail span').hide();
$(this).find('span').show('slow');
});
});
This is what the jquery says basically:
On every individual .thumbnail click:
hide .thumbnail span ( as in every span it finds )
then
find clicked .thumbnail's span and show that
I would probably move the bigger images into their own container though...
You can use jQuery along with blockUI plugin:
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb" class="imgthumb"><img src="images/gallery
/1one/101.jpg" width="56px" height="80px" border="0" /></a>
<a class="thumbnail" href="#thumb" class="imgthumb"><img src="images/gallery
/1one/102.jpg" width="56px" height="80px" border="0" /></a>
</div>
And then you can use the window onload event to attach the onclick event to fire the large image with blockUI:
$(function(){
$(".imgthumb").onclick(function() {
$.blockUI({
message: "<div><img src=" + $(this + " > img").attr("src") + " width='405' height='585' /></div>";
css: { border: '1px solid grey'}
});
});
});
I have the following code
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#Pictures {
position:absolute;
width:591px;
height:214px;
z-index:1;
left: 17%;
top: 30%;
text-align:center;
}
#Links {
width:600px;
height:30px;
z-index:2;
top: 184px;
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.links2 {
font-family: Broadway;
color: #FFFFFF;
text-decoration: none;
}
a:links2, a:visited {
color: #ffffff;
}
a:hover, a:active {
color: #333333;
}
#Main {
position:absolute;
width:800px;
height:600px;
z-index:2;
left: 15%;
top: 10%;
right: 15%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#Logo {
position:absolute;
float: left;
width:104px;
height:100px;
z-index:2;
}
</style>
</head>
<body>
<div id="Main">
<div id="Pictures">
<div>
<a href="1.html" ><img src="1.gif" alt="x" width="181" height="173" border="0" /></a>
1
</div>
<div>
<img src="2.gif" alt="x" width="181" height="173" border="0" align="top" />
2
</div>
<div>
<img src="3.gif" alt="3" width="181" height="173" border="0" />
3
</div>
</div>
</div>
<div id="Logo"><img src="logo.gif" alt="x" width="104" height="100" border="0"/></div>
</div>
</body>
</html>
Which is displaying the picture layers vertically.
I am trying to make it o the 3 images are aligned horizontally with the text centered underneath them. Why are they defaulting to vertical, and can I change this behavior?
You don't actually need that much code to achieve what your're after. For example:
<style>
body {
background-color: #000;
color: #FFF;
}
a {
font-family: "Broadway", Broadway, monospace;
font-size: 14px;
color: #FFF;
}
#images a {
width: 24.99%;
display: block;
float: left;
text-align: center;
}
</style>
<div id="images">
<a href="1.html" >
<img src="1.gif" alt="x" width="181" height="173" border="0" /><br />
One
</a>
<a href="2.html" >
<img src="2.gif" alt="x" width="181" height="173" border="0" /><br />
Two
</a>
<a href="3.html" >
<img src="3.gif" alt="x" width="181" height="173" border="0" /><br />
Three
</a>
<a href="4.html" >
<img src="4.gif" alt="x" width="181" height="173" border="0" /><br />
Four
</a>
</div>
The trick to get the items to align horizontally rather than vertically is to "float" the containers (left or right). By setting the links to display: block; you can use them as the containers instead of wrapping everything in extra <div>s. I have set the width to 25% (or 24.99% to avoid a rounding error in some browsers) so that they're spread out evenly across the page but you might want a different alignment which is easily done using margins/padding and/or a different width on the containers. Note also that when you set a text colour on the body {} you do not need to specify it again elsewhere apart from for links. Same thing goes for font-family, allthough this is also inherited by links. Good luck with the project!
Look at this code and test it: you can do the same thing in a more efficient, semantic and clean way:
Css:
div.imageBox {
float: left;
margin-right: 10px;
}
div.imageBox p {
text-align: center;
}
Html:
<div class="imageBox">
<a href="#">
<img src="image1.gif" width="100" height="100"
alt="image 1" /></a>
<p>1</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image2.gif" width="100" height="100"
alt="image 1" /></a>
<p>2</p>
</div>
<div class="imageBox">
<a href="#">
<img src="image3.gif" width="100" height="100"
alt="image 1" /></a>
<p>3</p>
</div>
That's all you need!
If you want to keep your code, there are no reasons to use the attribute align inside the img tag. You can use span instead of div, but in this case is better to keep using div and give them a width:
div#Pictures div
{
float: left;
margin-right: 5px;
}
This code:
a:links2
has no sense. links2 is a class made by you, not a pseudo-class or a pseudo-element.
I think a display: block; on your links2 class should put the links under the images correctly.
Also, to get the images to line up horizontally, use <span>s instead of <div>s inside the 'Pictures' div, and float them left.
#Pictures span
{
float: left;
margin-right: 5px;
}