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

    Image hyperlink does nothing

    I bought a template. I wanted to create a hyperlink in one of the images. However, when click the link nothing happens. It will only work when click outside of the image border.

    html:

    Code:
    <div class="img-bord v1"><a title="Ibiza" href="index-1.html"><img src="images/ibiza.jpg" alt="Ibiza"></a></div>

    css:

    Code:
    .img-bord.v1 { margin-right: 26px; margin-top: 2px;}
    Any advice is appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Your top code is correct for an image link. If it does not bring up the HTML page then maybe "index-1.html" is not where you think it is or it does not exist.

    But your CSS is wrong. If your going to use both classes that you assigned to the DIV that holds your image you don't use one definition to style both.
    So use one class
    Code:
    <div class="img-bord">
    or two definitions
    Code:
    <style type="text/css">
    .v1 {
    	width: 200px;
    	height: 300px;
    }
    .img-bord {
    	padding-right: 26px;
    	padding-top: 2px;
    }
    </style>
    That's just for explanation.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The CSS is not necessarily wrong. There may be other .img-bord elements that have no .v1 class. In those cases, the rule will not be applied.

    For example:

    Code:
    .foo { color: black; border: 1px solid green; }
    .foo.bar { color: red; }
    
    <div class="foo">this box is black</div>
    <div class="foo bar">this box is red</div>


  •  

    Tags for this Thread

    Posting Permissions

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