ansaurus

Question

Z-index over an img?

Answer 1

A:

will

    <div class="column-header">
     <a class="grow" href="http://www.google.com"&gt;Google&lt;/a&gt;  
        <h2>What's On</h2>
     <a href="http://www.google.com"&gt;
      <img src='http://www.bloodbone.ws/images/mainHeader.jpg' alt='boo' />
     </a>
    </div>

do?

lock 2009-09-09 05:50:30

It does, but it's invalid HTML

brendo 2009-09-09 05:51:53

oh yes im sorry i didnt check that myself lols

lock 2009-09-09 05:53:46

i edited the code, it seems you're trying to make it work for SEO right? i guess two anchors with different labels wont hurt...

lock 2009-09-09 05:56:30

Yeah, it wouldn't hurt, but it doesn't completely fix the problem because the `h2` text 'breaks' the overlay as well.It's just one of these where you mind boggles because it SHOULD work and does (in Safari/FF) but for some reason IE trips up.

brendo 2009-09-09 06:06:05

At the risk of sounding silly, but for the sake of expanding knowledge, what makes it invalid HTML?

Zoe 2009-09-09 06:20:08

Delilah, I'm not aware of what you guys are talking about, but anchor doesn't allow img tags inside it, by "w3c laws".

yoda 2009-09-09 06:22:19

Answer 2

+2 A:

Hi,

To have it "SEO compatible", you have 2 options:

Aplly several anchor tags to cover all your div;
Use a framework like JQuery to make the div clickable (and when clicked follow the anchor href), and mantain the anchor inside the div for SEO purposes.

yoda 2009-09-09 06:15:38

I use jQuery to do it in the end for IE.Still baffles me why a CSS solution isn't possible.

brendo 2009-09-09 06:34:20

Well, css is possible actually, but its kinda risky .. The only w3c valid option with css is by creating a anchor tag with position absolute above the area you want, but that requires you to set a fixed position on the div (top and left always fixed) or use javascript to calculate the position of the div (not 100% loyal due to redimension of pages)

yoda 2009-09-09 06:39:18

Why can't the `div` be set to `position: relative` and then the anchor element be given it's dimensions?

brendo 2009-09-09 07:17:43

That would only work if the only thing inside the div were the anchor .. think about a cup full off water: if you put a grape inside of the cup, that grape will occupe a certain space inide the cup that can't be occuped at the same time by the water. Its pretty much the same in html / css

yoda 2009-09-09 09:28:29

Sorry to be persistent, but I'm not quite sure why this example doesn't apply to the code I posted. The `a.grow` is inside the `div.column-header` and I want it to 'bubble up' over the `h2` and `img` elements. Because it has no `background` set, ie. transparent, the other elements can be seen, but the `a.grow` should be the only thing that has focus when the mouse is over.What part of my reasoning is flawed?

brendo 2009-09-09 22:55:50

The problem is that all the elements that you have inside that div are at the same "level". If you really want to put only one anchor element to "catch" all the div elements, you must use javascript, but that sollution has so much "complications" and "issues" that most of the programmers don't use it. Anyway, if that div has fixed position (relative to top and left of the browser), I can give you the code to make ir possible.

yoda 2009-09-10 23:42:11

Yes I'd like that code, if for nothing then to learn more :)

brendo 2009-09-11 04:41:16

#anchor_over_div {position:absolute;top:100px;left:100px;} - just switch the top and left attributes to the absolute margin from the top and left of the browser into the anchor, and apply also the width and height of the div into that anchor.

yoda 2009-09-11 04:51:01

ansaurus

tags:

views:

answers:

Z-index over an img?

related questions