I want to put a link on an image. I did it on other pictures aswell and it works properly. Just on that image the link is only clickable below the actual picture.
here is my code:
HTML:
<a href="admin.php">
<img src="steak.png" alt="AdminSteak" class="wrapSteak">
</a>
and CSS:
.wrapSteak {
position: relative;
top: 15px;
left: 45px;
height: 50px;
width: 25px;
}
Anyone knows a solution why the link isn't directly on the image?
Thanks in advance.
Assigned wrapSteak to the parent element a and make it as inline-block.
.wrapSteak {
position: relative;
top: 15px;
left: 45px;
display: inline-block;
height: 50px;
width: 25px;
}
<a href="admin.php" class="wrapSteak">
<img src="steak.png" alt="AdminSteak">
</a>
This should work. making anchor tag inline-block contains the image tag and if you applying position relative on image tag leaves anchor tag to its original position and the only image will be moved.
Related
Having a kind of silly issue where my HTML image won't link to the page and doesn't show up as clickable. I have a cart and icon of a cart that displays the number of items in the cart. The image is included in the CSS. I tried setting the z-index all the way up but nothing happened. Not sure if I'm missing something obvious. Fairly new to this so any help is appreciated! Below is my Code:
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<div class="cart">
</div>
<div id="quantityCount">0</div>
</li>
The link is an inline element by default and - having no content - occupies only very little space inside its container (if any). To change that make it a block element with the full size of its container:
.cart a {
display: block;
width: 100%;
height: 100%;
}
Your tag doesn't have any value, So that it can be made clickable.
You can use it like below:
<li>
<div class="cart">cart</div>
< id="quantityCount">0</div>
</li>
Otherwise if you want to show the count as clicable
<li>
<div class="cart"><span id="quantityCount">0</span></div>
</li>
Try these codes:
background-image: url(../images/shoppingcart.png);
well make sure the anchor tag inside card have same widht and height
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
position: relative;
}
.cart a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 10;
}
make your <a> tag a parent of the <div class="cart"> tag. otherwise, your code works fine for me. perhaps the path to your image is incorrect? i replaced your image path with a hosted image and everything worked fine
It's a fundemental issue. You added a link but with no content (nothing between the tags).
Because of that the link also has nothing that will be shown and therefor uses up no space. Because of that, you cant click it.
The right structuring for that is, to put the div between the tag and the entire div will be a button for the link.
.cart {
background-color: #E55F5F;
background-image: url(images/shoppingcart.png);
background-size: contain;
color: white;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
margin-top: -20px;
border-radius: 50%;
position: fixed;
z-index: 1000;
overflow: hidden;
}
<li>
<a href="/homework_6/cart.html">
<div class="cart">
<id="quantityCount">0</div>
</div>
</a>
</li>
Wrap a link (a href tag) around your icon. Check out this example where I used Font-Awesome's shopping cart icon. see all of code here: https://codepen.io/susanwinters/pen/qBNYdBG
<h1>Shopping Cart Icon</h1>
<p>Go ahead and click the shopping cart icon:
<a href="https://teespring.com/stores/campsitecoders" target="_blank" />
<i class="fa fa-shopping-cart fa-3x"></i><span>5</span>
</a></p>
I'm trying to put an image inside a div of the same dimension but for some reason the image keeps appearing to right of the div even though it's inside the div in my html:
<div>
<img width="16" height="16"></img>
</div>
I created a JSfiddle that shows what's going on: https://jsfiddle.net/5q0s3y1j/
Can anybody help me understand how to put the image inside the div?
The issue is with left: 20px; in your .userFlair css. It's telling the image to shift 20 pixels left from the start of the container, which is larger than the container itself.
Changing this to left: 0; or omitting it completely will put the image in the div.
Here's an updated fiddle.
Remove the left: 20px on your image class.
.userFlair {
position: absolute;
bottom: 50%;
// left: 20px;
transform: translateY(50%);
}
See updated fiddle: https://jsfiddle.net/5q0s3y1j/2/
You don't need to position your img separately. You can simplify your code to just this css.
.lobbyFlair {
border: 1px solid red;
height: 16px;
width: 16px;
display: inline-block;
position: relative;
}
<div class="lobbyFlair">
<img class="userFlair" width="16" height="16" src='http://66.media.tumblr.com/avatar_2dde66f8a62c_16.png'/>
</div>
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
i missed you
can you help me? i have such style
.lorry{
background: url(../img/lorry.png);background-repeat:no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
height: 143px;
width: 385px;
float: left;
margin: 39px 0 0 0;
}
I want to add usemap on image, is it possible?
You can't put an imagemap in a background. If you need this functionality you will have to layer objects to achieve the same thing:
First layer: just your image (not bound to imagemap)
Second layer: the contents of the container that you want to appear over the
"background"
Third layer: another copy of the image bound to the
image map, but transparent.
Here's an example: http://jsfiddle.net/jamietre/fgeee/1/
Below is the general construct to achieve this effect. It works by having an imagemap on the topmost layer (so it will be active), but bound to a transparent image. The actual image you see is behind everything, and is not transparent.
You can also do this with two layers by skipping the first image, and assigning it as a background to the layer2 div. This will only work if you are going to display the image at its native resolution, so may be fine, but this answer is more general purpose.
<div id="wrapper">
<img id="layer1" src="some/image.jpg">
<div id="layer2" style="position: absolute; top: 0; left: 0;">
Your content here
</div>
<img id="layer3"
style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);"
usemap="#your-map" src="some/image.jpg">
</div>
Notes:
The wrapper is required to make the absolute positioning work
the *filter: .. css is to supporter IE <8 which doesn't understand opacity.
I just come up here because I was trying do the same, and I found one one to use "map" without image.
As the other folks said, isn't possible use maps without image, but we can use DIV instead.
What you do is, you place a div over the main image and create a link for that DIV, below follows my code:
HTML
<div id="progress">
<a id="link1" title="Symbol Link" href="#">Symbol Link</a>
<a id="link2" title="Stack Link" href="#">Stack Link</a>
<a id="link3" title="Overflow Link" href="#">Overflow Link</a>
</div>
CSS
#progress {
width: 257px;
height: 84px;
background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
position:relative;
}
a#link1, a#link2, a#link3 {
display: block;
overflow: hidden;
position: absolute;
background: transparent;
text-indent: -9999px;
}
#link1 {
left: 10px;
width: 45px;
height: 84px;
}
#link2 {
left: 55px;
top: 45px;
width: 70px;
height: 39px;
}
#link3 {
top: 45px;
left: 124px;
width: 130px;
height: 39px;
}
jsFiddle of my example.
Reference: CSS image maps
Using an imagemap on an object with a background-image is not possible. The usemap attribute requires an image (img tag).
Reference: http://www.w3schools.com/tags/att_img_usemap.asp
check out the site wplayout.com. In home page I have a gallery. I would like to place a "premium" tag image on top of each image shown on home page gallery. Currently the premium image is shown on top right corner of the home page. how to achieve that?
so far i have
.ribbon {
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: absolute;
top: -3px;
right: -3px;
z-index:500;
display: block;
}
and in html I have
<span class="ribbon"></span>
Thanks in advance
i think that the position:relative has to be applied to ribbon and not the container div.
Try putting
.ribbon
{
background: url("images/premium.png") no-repeat top right;
width: 100px;
height: 102px;
overflow: hidden;
/*text-indent: -9000px;*/
position: relative; /*changed*/
right: -204px; /*changed*/
top: -230px; /*changed*/
z-index:500;
display: block;
}
tried this using firebug & it worked. Hope it works for you.
Make sure the div containing the 'premium' image has position: relative set on it, like so:
Markup:
<div class="my-image">
<img src="whatevs.jpg">
<span class="ribbon"></span>
</div>
CSS:
.my-image {
position: relative;
}
Divs with absolute positioning (your ribbon) are positioned relative the first parent that has position: relative, or relative to the body if no such parent exists.
Use the z-index selector in css
For your premium content add z-index:999; and on the image below use z-index:0;