rollover div link problem

[singedpiper]

the below code is implemented on an image in a div class picdiv in an href. it won't hover. what dumn thing did i do wrong??



.picdiv {
height:104px;
width:104px;
display:block;
float: left;
text-align:center;
background-color: #fff;
border: 1px solid #ddd;

}
.picdiv a{
height:104px;
width:104px;
display:block;
background-color:#fff;
}
.picdiv a:visited {
height:104px;
width:104px;
display:block;
background-color:#fff;
}
.picdiv a:hover, .picdiv a:focus {
height:104px;
width:104px;
display:block;
background-color: #800;
}

[_Aerospace_Eng_]

Can't tell ya without your html coding.

[singedpiper]

<div class="imgwrapper" style="height:140px;width:104px;text-align:center">
<a href="/gallery/sp_index.php?file=./pic26.jpg">
<div class="picdiv">
<img src="cache/39e74fedbf70c4f12c5055b1b8b04891.jpg" alt="" />
</div>
<span>pic26.jpg</span>
</a>
</div>

there's an offending line

see the site in progress at gschoppe.grahamhighlanders.com

the big error is on gallery, where i need the div bg behind the thumbs to change colour

btw ignore the flash player, its a test for an other site

[sesshyzkidz]

You are specifying .picdiv a:hover with <a><div class="picdiv"></div></a> which is actually a:hover .picdiv .

Also, you can't have block or list elements (<table>, <div>, <p>, <ul>, etc.) inside anchors (<a> tags). You can only have <span>, <img/>, and other inline elements. Try this:<div class="picdiv">
<a href="/gallery/sp_index.php?file=./pic26.jpg">
<img src="cache/39e74fedbf70c4f12c5055b1b8b04891.jpg" alt="" />
<span>pic26.jpg</span>
</a>
</div>

[singedpiper]

thanks, i had to adapt the idea a little, as the span can't be in the inner div, but it works now..

however, this leads me to another question. is there a simple way to center the images vertically inside the div...

i know this is the hard question that normally means hacking it, but is there a good simple solution? preferrably not nested divs with -50%s flying around

[rmedek]

img {
display: block;
margin: 0 auto;
}


should do the trick...

[singedpiper]

never quite understood that one, and its still not workin... check out the link... any ideas?

[rmedek]

An image is "display: inline" by default (because it's an, um, inline element :))... so to center it first we make it a block level element:

img {
display: block;
}

Now it take up height and width, and can receive margins and padding. So next we give equal margins to both sides:

img {
display: block;
margin: 0 auto;
}

In other words, the top and bottom margins are zero, the left and right margins are equal... making both margins equal effectively centers the image.

Since it's in a <div> (another block-level element), the image should be centered in the div. As far as checking out the link... what link? :confused:

Oh, I just reread... you mean center vertically. Whoops!

You can "sort of" do that with an image by using giving the link inside the div a line-height of the div, but usually you'll have to fudge those numbers to get the right effect. I think the best way is to use absolute positioning/negative margins like you mentioned...

[singedpiper]

gschoppe.grahamhighlanders.com (http://gschoppe.grahamhighlanders.com)

i believe i implemented what you said, but it doesn't work

[rmedek]

hey, it's actually pretty simple:

http://richardmedek.com/temp/example15.htm

Hope it helps...

[singedpiper]

ah, i understand the misunderstanding now... i need it to work in ie as well as compliant browsers... apparently (judging by my cursory view of the example) the margins way doesn't work in i.e.

[singedpiper]

ok, so i can't absolutely position, becajuse its a php thumbnail gallery... with all the problems thus contained... could i do the following with a span rather than a div:


<span style="background-image: url('url of image'); background-repeat: no-repeat; background-position: center; width: 100px; height: 100px">
</span>

[rmedek]

I'm not using margins, I'm using line-height...

and you're on your own with Internet Explorer. The problem with using absolute positioning/negative margins is that you have to know the height of each image...

[rmedek]

ok, so i can't absolutely position, becajuse its a php thumbnail gallery... with all the problems thus contained... could i do the following with a span rather than a div:


<span style="background-image: url('url of image'); background-repeat: no-repeat; background-position: center; width: 100px; height: 100px">
</span>

You'd have to give the link and the span "display: block"...I guess it would work, you should try it out and see. :)

[singedpiper]

yay, it worked!!!