How do you do this?

[Steveg]

I've come across a great techique in a web site but I can't see how it is done. I suspect some of it is hidden in the CSS. Anyway here is the site:

Northern Catholic Conference 2009

If you hover over the list of speakers on the right, for each speaker (or most of them) a box appears with a picture and information.

It looks really good and I'd like to use the idea on a web site I'm building for someone.

Any suggestions. Please don't be technical I'm just getting the hang of CSS.

Thanks

Steve

[gibby]

Just looking at the source code and this is what I see for each item in the list:

<a href="#">Delia Smith
<span>
Delia Smith<br /><br />
<img src="/img/speakers/deliasmith.gif" alt="Delia Smith" title="Delia Smith" />
Delia Smith will join us over the weekend to share
her faith and some of her spiritual insights. Best known
to millions as queen of the kitchen through her popular
cookery books and TV shows, Delia is also a committed
Catholic who has written spiritual books, including
"A Feast for Advent" and "A Feast for Lent".</span>

[gibby]

Still digging....

It appears they used this template here:
Website Template: Colorvoid | Arcsin Web Templates

but I cannot figure out what CMS system they are using (Joomla, Wordpress, etc.) Anyway, you could probably just install a Joomla CMS and use the same template if you are trying to reproduce that effect.

Here's their style sheet from that template:
http://www.northerncatholic.co.uk/css/style.css

Hope this helps!

[Steveg]

Thanks gibby,

I could see the HTML code but I didn't know how to get at the CSS.

Never heard of CMS before but I had a look at Joomla and will investigate further. However I have already build the web site (not complete though) and so just need the technique for the box.

God bless

Steve

Added - I think the trick lies in this bit of CSS

ul#speakers {position: relative;}
ul#speakers a span {display:none;}
ul#speakers a:hover {background: #DAE3E9 none repeat scroll 0 0; text-decoration: none;}
ul#speakers a:hover span {display:block; position: absolute; right: 20em; top: 0; text-align: left; padding: 1.5em; width: 30em; background: #C5DEF0 url(../img/site_title.jpg) repeat-x scroll left top; color:#000; border:9px solid #C6D2DB;}
ul#speakers img {border:3px solid #fff; float:left; margin:0.25em 1em 0.5em 0;}
ul#speakers a:hover span:first-line {font-weight: bold; font-size: 2em; color: #608AAA;}

[Steveg]

Got it sorted.

Thanks for your help gibby

Steve

[gibby]

I have built a few websites using Joomla. Love it.

Life Fellowship Fort Morgan, Colorado
Morgan County Sheriff's Office - Colorado
Real Driving LLC

[Steveg]

I have built a few websites using Joomla. Love it.

Life Fellowship Fort Morgan, Colorado
Morgan County Sheriff's Office - Colorado
Real Driving LLC

Great websites. I'll have to look into Joomla

Here is the one I am developing:

http://www.wordandspiritministries.co.uk/

It's the first one I've done that is totally without frames or tables, just HTML & CSS.

[gibby]

Looks really good so far. Cool logo.