My image-links won't work

Question

I am trying to link an image, in html looks like this:

<a href="#" class="image"><img src="logo.png"></a>

and in CSS I have:

.baraMeniu a.image{
    display:block;
}

Yeah... display:block is just an awkward try to make the image clickable. I am begginer so please take it step by step.

Edit:I forgot to say that my image has the following properties:

.baraMeniu img{
    width:100%;
    height:40em;
    position:absolute;
    z-index:0;/*the image*/
}
.baraMeniu a.image{
    /*the clickable image*/
}
.baraMeniu .st{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:left;
}
.baraMeniu .dr{
    font-size:2em;
    padding-top:0.15em;
    padding-left:0.7em;
    padding-right:0.5em;
    color:orange;
    font-family:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    display:inline;
    text-decoration:none;
    float:right;
}

.baraMeniu #ind{
    text-indent:20px;
}

TRose · Accepted Answer · 2015-06-11T20:30:40.390

0

If you're trying to wrap an <a> tag around your images, you don't need any special tricks.

<a href="SomeLink.html"><img src="logo.png"></a>

That would work fine.

You can alter its appearance, hover effects, etc with CSS or JS later.

EDIT for clarity. Instead of targeting your image through elements on a page, e.g. a.img.classwhatever{} I would just give it a class of its own or slap it in a div for simplicity's sake. Apply CSS to the class or ID.

<div class="ImageLink">
<a href="SomeLink.html"><img src="logo.png"></a>
</div>

As for the Z-index, please be careful. Negative means it's behind everything else.

edited Jun 11 '15 at 20:30

answered Jun 11 '15 at 20:23

TRose

1,718
1
16
32

If I set the z-index for the image to 0, and all the other stuff to 1, why is the image covering the stuff? – the_young_programmer Jun 11 '15 at 20:37
Now that is a good question. Usually when people have trouble with things pertaining to z-index, it's because they aren't totally familiar with the relations between "parent" divs and "child" divs. My guess is you have a div within a div and tried to set separate z-indexes for them both. Can I see your code? – TRose Jun 11 '15 at 20:39
For personal reasons I can't give you the code :( , I know what the DOM is, the image is in a link, the link is in a div with the class "baraMeniu", and the div is in the body (body in html). Edited question with CSS code, – the_young_programmer Jun 11 '15 at 20:44
Gotcha. But... regarding this: `.baraMeniu img{ width:100%; height:40em; position:absolute; z-index:0;/*the image*/ } .baraMeniu a.image{ /*the clickable image*/ }` FYI you shouldn't need to target images like this...it can only mess you up. I insist you put them in separate classes. Without seeing the rest of your HTML output I can't do much for you. Is it safe to assume that `.baraMeniu` is a section on a web page, like a header, or content box, that is surrounded by other elements relying on it or vice versa? – TRose Jun 11 '15 at 20:54
@the_young_programmer to add to this, if you could even give me a dummy document that mimicks whatever you're working on, we could plug it into JSFiddle and see what's up. – TRose Jun 11 '15 at 20:55

My image-links won't work

1 Answers1