+ Reply to Thread
Results 1 to 8 of 8

Thread: How do you do this?

  1. #1
    Steveg's Avatar
    Steveg is offline Lampstand Senior Member Steveg is on a distinguished road
    Join Date
    Jun 2009
    Location
    England
    Posts
    2,812
    Rep Power
    5

    Default How do you do this?

    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

  2. #2
    gibby's Avatar
    gibby is offline Are we there yet? gibby is on a distinguished road
    Join Date
    Oct 2007
    Location
    Colorado
    Posts
    4,850
    Blog Entries
    3
    Rep Power
    9

    Default

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

    Code:
    <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>
    
    Genesis 1:1 - In the beginning God created the heavens and the earth.
    Lampstand Christian Forum - A Place for Christ-Centered Relationships

  3. #3
    gibby's Avatar
    gibby is offline Are we there yet? gibby is on a distinguished road
    Join Date
    Oct 2007
    Location
    Colorado
    Posts
    4,850
    Blog Entries
    3
    Rep Power
    9

    Default

    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!
    Genesis 1:1 - In the beginning God created the heavens and the earth.
    Lampstand Christian Forum - A Place for Christ-Centered Relationships

  4. #4
    Steveg's Avatar
    Steveg is offline Lampstand Senior Member Steveg is on a distinguished road
    Join Date
    Jun 2009
    Location
    England
    Posts
    2,812
    Rep Power
    5

    Default

    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;}
    Last edited by Steveg; 07-11-2009 at 02:14 PM.

  5. #5
    Steveg's Avatar
    Steveg is offline Lampstand Senior Member Steveg is on a distinguished road
    Join Date
    Jun 2009
    Location
    England
    Posts
    2,812
    Rep Power
    5

    Default

    Got it sorted.

    Thanks for your help gibby

    Steve

  6. #6
    gibby's Avatar
    gibby is offline Are we there yet? gibby is on a distinguished road
    Join Date
    Oct 2007
    Location
    Colorado
    Posts
    4,850
    Blog Entries
    3
    Rep Power
    9

    Default

    Genesis 1:1 - In the beginning God created the heavens and the earth.
    Lampstand Christian Forum - A Place for Christ-Centered Relationships

  7. #7
    Steveg's Avatar
    Steveg is offline Lampstand Senior Member Steveg is on a distinguished road
    Join Date
    Jun 2009
    Location
    England
    Posts
    2,812
    Rep Power
    5

    Default

    Quote Originally Posted by gibby View Post
    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.

  8. #8
    gibby's Avatar
    gibby is offline Are we there yet? gibby is on a distinguished road
    Join Date
    Oct 2007
    Location
    Colorado
    Posts
    4,850
    Blog Entries
    3
    Rep Power
    9

    Default

    Looks really good so far. Cool logo.
    Genesis 1:1 - In the beginning God created the heavens and the earth.
    Lampstand Christian Forum - A Place for Christ-Centered Relationships

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts