html/css clickable image

Acer / 45t6
January 16, 2011 at 06:16:27
Specs: Windows vista, 1gb
Hi!
I try to do a clickable image link, I found some codes in the internet but when I click on image it looks different with different web browsers.

See More: html/css clickable image

Report •


#1
January 16, 2011 at 14:12:43
How do I change the position of the images for ex, top:250px;
<html>
<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="http://www.google.com">
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="http://www.google.com">
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="http://www.google.com">
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="http://www.google.com">
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>


Report •

#2
January 16, 2011 at 18:01:19
To set top: 250px you need one of:

position: relative;

or

position: absolute;


Relative will move the item 250px from where it would normally be, Absolute will move it 250px from the top of the document.

This is not the best practice though, you should use margin/padding to get them in the right spot, and positioning as a last resort.



Report •

Related Solutions


Ask Question