How to add link to image without misaligning

parkerdeano · 02-14-2013, 05:20 AM

Ok this may be a very simple question to many here, but for myself I am a novice and stuck on this.

These 2 images are left aligned. When I try to add links to them I lose the alignment. How do I add links to these 2 images without changing anything else?

<div class="left_carpet" style="width: 265px; float: left; margin: 0 0 0 0;"><span style="font-size: x-large;">Carpet Tiles</span> <img style="float: left;" title="View and buy online" src="{{media url="wysiwyg/Buy_carpet_tiles_online.jpg"}}" alt="View and buy online" /> <img title="Online quote" src="{{media url="wysiwyg/fill_in_form_carpet_tiles_page.jpg"}}" alt="Online quote" /></div>

Thanks in advance for any help.

niralsoni · 02-14-2013, 10:00 AM

I am not sure about why its happening... May be some other css written for ANCHOR tag which might be overriding it.

Anyway, if you haven't found a solution yet, I have an alternate option -

make use of the JavaScript onclick event for the images. also add "cursor: pointer" style to the images to moke them as links. It will work !!!

Regards,
Niral Soni

rezfill · 02-15-2013, 06:40 AM

ahmpt, there might be a problem ofcourse, and i guess it some of your codes went wrong, i suggested to use a javascript to avoid mistake and its more easy to use for this case.

parkerdeano · 02-15-2013, 09:00 AM

Mmm think I may need a web designer. This is a bit too complex for myself. Many thanks for your efforts anyway.

Excavator · 02-15-2013, 06:13 PM

Hello parkerdeano,
Some odd things in your markup...plus, it's always better to style with CSS rather than inline.

Look at the two examples here. I've cleaned up the markup for your images in the first, then added anchors in the second (I've assumed a 200x150 px size for your images since you didn't provide a size).
I tried to comment on everything to explain what it's doing.

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
.left_carpet {
	width: 265px;
	margin: 0 0 20px; /*just some separation for the demo*/
	/*float: left; commented out for demo*/
	overflow: auto; /*clears the floats*/
	background: #ccc; /*jus so you can see the size of .left_carpet*/
}
h1 {font-size: 1.2em;} /*adjust as needed*/
a {display: block;} /*makes the anchor the size of the image it contains*/
img {
	float: left;
	display: block; /*demo only*/
	background: #f00; /*demo only*/
}
</style>
</head>
<body>
	<div class="left_carpet">
            <h1>Carpet Tiles</h1> 
      <img src="wysiwyg/Buy_carpet_tiles_online.jpg" alt="View and buy online" width="200" height="150" title="View and buy online" /> 
      <img src="wysiwyg/fill_in_form_carpet_tiles_page.jpg" alt="Online quote" width="200" height="150" title="Online quote" />
    <!--end .left_carpet--></div>
	<div class="left_carpet">
            <h1>Carpet Tiles</h1> 
      <a href="#"><img src="wysiwyg/Buy_carpet_tiles_online.jpg" alt="View and buy online" width="200" height="150" title="View and buy online" /></a>
      <a href="#"><img src="wysiwyg/fill_in_form_carpet_tiles_page.jpg" alt="Online quote" width="200" height="150" title="Online quote" /></a>
    <!--end .left_carpet--></div>
</body>
</html>