I want to insert some pictures in my website which "float" in the page... even while I scroll my page.
So with the following code I can make an object float on my website... but how do I make an image float which also acts like an hyperlink?
<div style="position: fixed; bottom: 10px; left: 0px"> </div>
<img src="pic.jpg" height: 32px; width:32px;> </img>
But how do I merge them both?
As Terry sayd in the comment you can just move the code up in the div. Cause the link will ned something which has a position set. Which is the case with your div.
Also, the <img> tag is a self closing tag. So </img> will not be needed. Also if you write height and or width directly on the <img> tag it has to be
<img src="your/src.url.jpg" width="100px" height="100px" />
and not
<img src="your/src.url.jpg" width:100px; height:100px; />
this will not work!
So here your working example.
img {
width: 32px;
height: 32px;
}
<div style="position: fixed; bottom: 10px; left: 0px">
<a href="www.google.com">
<img src="http://www.planwallpaper.com/static/images/adirondacks-sun-beams-640x300.jpg" />
</a>
</div>
This is what you need keep the anchor tag inside the div. And also while specifying the height and width of the image you should use quotes like width="25px" or use css style.
<div style="position: fixed; bottom: 10px; left: 0px">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png" style="width:25px;height:25px;"/>
</div>
Related
I'm trying to edit a DotNetNuke webpage and I have an image that I need to display. On TOP of the image, I'd like to place an anchor. The trouble is that I don't want the entire image to be clickable, JUST the anchor, and I can't seem to get it to work.
Additionally, because it's a DNN site I'm not sure if I can edit the CSS, so I'm hoping for a solution that's pure html. I've tried all sorts of combinations but none of them seemed to work. Thanks
Below is my test html:
<div class="c_head h2_title_container">
<img alt="" width="600" height="151" style="width: 356px; height: 101px;" src="/portals/224/img/blue-arrow-small.png"></img><span style="font-size: 18px;"><strong>Name Goes Here</strong></span>
<br></br>
<p class="team_bio" style="text-align: justify;"><span style="font-size: 16px;">Here is my test text.</span>
</p>
</div>
You should be able to set the parent element to position: relative, then add your anchor's parent element positioned absolutely:
<div class="c_head h2_title_container" style="position: relative;">
<img ...></img>
<div style="... position: absolute; top: 20px; left: 30px;">
...
</div>
...
</div>
Please consider the jsfiddle demo where I've laid out 7 cards with transform effects.
Now I would like to apply a different margin to individual images such that the card2 is for example 15px lower, card3 is 5px higher etc.
However, when I apply for example margin-top: 15px to card2, all cards in the div are rendered with margin-top: 15px
Another issue is that the centered div is not really centered when applying width: 100% to it.
<div class="centered">
<div class="container">
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card1" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card2" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card3" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card4" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card5" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card6" />
<img src="http://oi61.tinypic.com/2r7x1ch.jpg" class="card7" />
</div>
</div>
http://jsfiddle.net/kristofvhren/wtDE4/
Try this:
Remove inline-block property from images and use
img {
width: 125px;
display:block;
float:left;
}
instead..
Use 'float:left' property in 'img' tag and you can use margin in '.card2'
I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;
Hi I have the following code to have few links on top of img. It works well in FF but not in IE. It seems IE is not clickable if you put link on top of img
<div style="z-index:-6755;"><img alt="October Offer" src="images/offers/october-offer.jpg" /></div>
<a href="#" onclick="window.parent.SqueezeBox.close();">
<div style="display:block; width: 185px; height: 32px; position: relative; bottom: 50px; left: 260px;border:1px solid blue; "> </div>
</a>
are you just trying to make the image clickable?
you can't have <href> that's not a correct html tag.
either place <img> inside <a> like so: <img />
another way is to set a div with a background image of your image and then a link inside there, make the link display : block and make it the entire width and height of the div and the whole thing will be clickable.
You can add an on-click function to img-tag.
Example:
<img src="images/logo.png" alt="logo" onclick="home()">
and then redirect it to a page.
function home(){ location.replace("/index.html") }
I need to put some text over a series of images in a gallery. I found many tutorials about the text part however the images need to be floated.
Whenever I add float:left though the trick no longer works. My code (css inline for sack of brevity):
<a href="/photos/photo1.php" title="photo1">
<span style="position: relative; width: 100%;">
<img src="/photos/photo1.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
<a href="/photos/photo2.php" title="photo2">
<span style="position: relative; width: 100%;">
<img src="/photos/photo2.jpg" alt="" />
<span style="position: absolute; top: 10px; left: 0; width: 100%;">Text over image</span>
</span>
</a>
This way the images are one under another but like I said I need to float them without breaking everything else.
You will want to float the entire outer <span> or the <a>. My guess is that you are currently trying to float the <img> specifically, which causes the elements to end up in unexpected positions. If this assumption is incorrect, you might want to update with more details.