I need some help with my website

[polar-blair]

Hi I am designing a website at the moment and I have been asked to add a profile page for all the employees. I am really a designer and not a developer, and normally I will design a web page visually then worry about the practicality of it later.

I wanted to have a "wall" of profile images on the page making up a grid, then when the user hovers over one image a box drops down below revealing the information, name, job, short description ect...

Now I sort of have the first profile working and I am using adobes new incontext editing service to allow the client to edit the pages as I have now experience with other CMS services.

The problem I am having is that when I add more of the profiles - set up as a repeating region, Only the first drop down box appears no matter which image I hover over.

Its hard to explain so here is the link to the page.
http://www.munchshop.net/bunch.html

Has anyone got any ideas of how I can either get this to work or another solution to my problem. I was thinking of using Dream weavers spry data sets to gather the information and display.

If all fails Ill just have it so all the info is displayed at once, but I would kinda like it to work.


Also any feed back on the rest of the site would be appreciated - it isn't finished yet and most of the final content hasn't been inserted yet.

Thank you

 

[Dunmail]

Cripes! that's a lot of code for a simple effect. I've done this the other way round so the stuff below is a guess but should give you something to go on.

Simply give your images markup like this:

<div class="thumbnail"><img src ="xxx.jpg" alt="Jo or whatever"><span>Your text here</span></div>

The CSS:

.thumbnail span{position: absolute;padding: 0px;left: -1000px;visibility: hidden;color: black;text-decoration: none;}
.thumbnail:hover span{visibility: visible;}
.thumbnail:hover img{visibility: hidden;left: -1000px}

You'll need to work out the positioning but that's simply a case of trial and some error

HTH

 

[polar-blair]

Cripes! that's a lot of code for a simple effect. I've done this the other way round so the stuff below is a guess but should give you something to go on.

Simply give your images markup like this:

<div class="thumbnail"><img src ="xxx.jpg" alt="Jo or whatever"><span>Your text here</span></div>

The CSS:

.thumbnail span{position: absolute;padding: 0px;left: -1000px;visibility: hidden;color: black;text-decoration: none;}
.thumbnail:hover span{visibility: visible;}
.thumbnail:hover img{visibility: hidden;left: -1000px}

You'll need to work out the positioning but that's simply a case of trial and some error

HTH

Ahh thats a good idea. I thought about using pseudo selectors but thought I could only use them on a link. Thanks for the advice Ill try using that.

 

[Dunmail]

Here's the spec: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes though the examples are concerned with links the text indicates that it may be applied to any element.

One way to do it would be effectively the reverse of what you are currently doing: have the details in place with the images over the top of them then when the user hovers over the image/details have the image move out of the way.

 

[polar-blair]

Here's the spec: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes though the examples are concerned with links the text indicates that it may be applied to any element.

One way to do it would be effectively the reverse of what you are currently doing: have the details in place with the images over the top of them then when the user hovers over the image/details have the image move out of the way.

Yeah I thought that at first but Im not sure why I discarded that idea at the beginning - I guess I over complicated it Thanks for that idea though I actually quite like it.

 

[polar-blair]

Ok I have now got it working

Thanks for your help guys.