Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to add link to image without misaligning

    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.

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mmm think I may need a web designer. This is a bit too complex for myself. Many thanks for your efforts anyway.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •