View Full Version : Expert help needed with hover etc. NOW SORTED.

10-21-2007, 08:45 PM


If you go to the first url, you will see what I am trying for. I have collected the relevant parts as far as I can and they are to be found in the second url.

It is promising, but I cannot get the hyperling illustration to show visibly although if one seeks one can find them.

What I am looking for is what is needed to show the hyper links so that they can be accessed.

Help gladly received.


Screenshot included

10-22-2007, 06:00 AM
Well, i couldn't find the "jump out and bite you in the butt" culprit, but after looking it over for about 10 minutes, i notice two possibilities:

1) You have so much CSS in there that is from the main stylesheet on CSSplay. Most of it isn't being used at all... maybe ditch everything before ".right_col {float:right; display:inline; width:250px;}" in your code to see if that will help clear it up.

2) You don't have a doctype set, and the sample was XHTML 1.0 Strict. That will make a rendering difference.

Hope one of those helps for the hover part of it.

However, you don't have the "hover.gif" file on your site, at least not in the path that the CSS is looking for it in.

10-22-2007, 10:06 AM
Thanks for your help. It has been invaluable.
As you can see, most of the program is working.
The only thing that is lacking is the picture appearing on hover.

Have you any pointers as to what is wrong/lacking.

I am a complete novice in this area.




10-22-2007, 10:57 AM
When debugging css its useful to wipe sections(or build up form nothing) of it until the problem appears or dissappears

10-22-2007, 12:56 PM

Made much headway. Almost ready for customisation.
Still needs help for validation.
I don't understand the validators remarks.

NOTE: This is a crib from a CSSPLAY.co.uk program.
If you use it, please give them credit.


10-22-2007, 04:29 PM
This is the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
body {font-family:verdana, arial, helvetica, sans-serif; font-size:76%; color:#000; padding:0; border:0; margin:0; background:#fff url(../pro/cssplay/body_back.gif) repeat-x 0 10px; text-align:center;}
a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}
#wrapper {width:1000px; background:#fff url(../background.gif) repeat-y; margin:10px auto; text-align:left;}
#header {width:1000px; height:120px; float:left; background:#fff url(../graphic/back.gif); position:relative;}

#main_menu li a:hover {color:#fff; background:url(../pro/cssplay/cssplay_1.gif);}
#main_menu li a.chosen, #main_menu li a.chosen:visited, #main_menu li a:active, #main_menu li a:focus {color:#fff; background:url(../pro/cssplay/cssplay_2.gif);}

#content {width:750px; background:transparent; float:left;}
a.adbanner, a:visited.adbanner {text-align:center;color:#fff; font-size:11px; text-decoration:none;}
a.adbanner:hover {text-decoration:underline;}
p.cite {color:#008080; display:list-item; padding:0 5px; list-style-image: url(../graphic/open_quotes.gif); background: url(../graphic/close_quotes.gif) bottom right no-repeat;}

#left_column {width:468px; background:transparent; float:left; padding:0 32px 0 0;}
* html #left_column {width:500px; w\idth:468px;}
#left_column ol li {font-size:11px; line-height:16px; font-family:verdana, sans-serif; margin:5px 0;}
#left_column dl.sitemap dd a {text-decoration:none; color:#069;}
#left_column dl.sitemap dd a:hover {color:#fff; background:#069;}
#left_column dl.sitemap {margin-left:50px;}
#left_column dl.sitemap dd {margin:0;}

#right_column {width:230px; background:transparent; float:left; padding:0 5px 0 10px;}
* html #right_column {width:245px; w\idth:230px;}

#content p {font-size:11px; line-height:16px; margin:5px 0 8px 0;}
#content h3, #far_right h3 {margin:15px 0 5px 0; font-size:18px; color:#000; font-family:"times new roman", serif;}
#content img {border:0;}
.clear {clear:both;}
.css {font-family:"times new roman", serif; font-weight:bold; padding-right:2px;}
.play {font-family:"trebuchet ms", sans-serif;}
.hiddenfromview {display:none;}
.date {font-weight:bold; color:#008080;}
.bold {font-weight:bold;}
.image img {border:0; margin-left:5px;}
pre {font-size:11px; color:#006699;}

p.highlight {color:#cc0000; font-weight:bold;}

#album {width:600px; height:400px; position:relative; margin:0 auto; text-align:left; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
#pad_left {width:400px; height:400px; float:left;}
#pad_left p {text-indent:1em; font-size:0.75em; position:relative; z-index:200;}
#pad_top {width:200px; height:200px; float:right;}
#holder {width:200px; height:200px; background: transparent url(graphics/grid.gif); float:right;}
.button {width:50px; height:50px; float:left;}
.button a {display:block; width:50px; height:50px; position:relative; z-index:200; background:#fff url(hover.gif);}
.button a em {display:none;}
.button a:hover {position:absolute; top:0; left:400px; width:200px; height:400px; z-index:20;}
.button a:hover#img01 {background:url(alice_t1.gif) no-repeat;}
.button a:hover#img02 {background:url(alice_t2.gif) no-repeat;}
.button a:hover#img03 {background:url(alice_t3.gif) no-repeat;}
.button a:hover#img04 {background:url(alice_t4.gif) no-repeat;}
.button a:hover#img05 {background:url(alice_t5.gif) no-repeat;}
.button a:hover#img06 {background:url(alice_t6.gif) no-repeat;}
.button a:hover#img07 {background:url(alice_t7.gif) no-repeat;}
.button a:hover#img08 {background:url(alice_t8.gif) no-repeat;}
.button a:hover#img09 {background:url(alice_t9.gif) no-repeat;}
.button a:hover#img10 {background:url(alice_t10.gif) no-repeat;}
.button a:hover#img11 {background:url(alice_t11.gif) no-repeat;}
.button a:hover#img12 {background:url(alice_t12.gif) no-repeat;}
.button a:hover#img13 {background:url(alice_t13.gif) no-repeat;}
.button a:hover#img14 {background:url(alice_t14.gif) no-repeat;}
.button a:hover#img15 {background:url(alice_t15.gif) no-repeat;}
.button a:hover#img16 {background:url(alice_t16.gif) no-repeat;}
.button a:active, .button a:focus {position:absolute; width:0; height:0; top:0; left:0; z-index:5;}
.button a:active em, .button a:focus em {position:absolute; display:block; width:600px; height:400px; z-index:10;}
.button a:active em img, .button a:focus em img {position:absolute; z-index:10; border:0; cursor:default;}

<div id="showcase">

<div id="wrapper">
<div id="info">

<div id="album">
<div id="pad_top"><img src="book.gif" alt="Sir John Tenniel's illustrations" title="Sir John Tenniel's illustrations" /></div>
<div id="pad_left"><img src="cover.jpg" alt="ALICE'S ADVENTURES IN WONDERLAND" title="ALICE'S ADVENTURES IN WONDERLAND" /></div>
<div id="holder">
<div class="button"><a id="img01" href="#nogo1" title="thumb 01"><em><img src="alice_f1.gif" alt="sketch 01" title="sketch 01" /></em></a></div>
<div class="button"><a id="img02" href="#nogo2" title="thumb 02"><em><img src="alice_f2.gif" alt="sketch 02" title="sketch 02" /></em></a></div>
<div class="button"><a id="img03" href="#nogo3" title="thumb 03"><em><img src="alice_f3.gif" alt="sketch 03" title="sketch 03" /></em></a></div>
<div class="button"><a id="img04" href="#nogo4" title="thumb 04"><em><img src="alice_f4.gif" alt="sketch 04" title="sketch 04" /></em></a></div>
<div class="button"><a id="img05" href="#nogo5" title="thumb 05"><em><img src="alice_f5.gif" alt="sketch 05" title="sketch 05" /></em></a></div>
<div class="button"><a id="img06" href="#nogo6" title="thumb 06"><em><img src="alice_f6.gif" alt="sketch 06" title="sketch 06" /></em></a></div>
<div class="button"><a id="img07" href="#nogo7" title="thumb 07"><em><img src="alice_f7.gif" alt="sketch 07" title="sketch 07" /></em></a></div>
<div class="button"><a id="img08" href="#nogo8" title="thumb 08"><em><img src="alice_f8.gif" alt="sketch 08" title="sketch 08" /></em></a></div>
<div class="button"><a id="img09" href="#nogo9" title="thumb 09"><em><img src="alice_f9.gif" alt="sketch 09" title="sketch 09" /></em></a></div>
<div class="button"><a id="img10" href="#nogo10" title="thumb 10"><em><img src="alice_f10.gif" alt="sketch 10" title="sketch 10" /></em></a></div>
<div class="button"><a id="img11" href="#nogo11" title="thumb 11"><em><img src="alice_f11.gif" alt="sketch 11" title="sketch 11" /></em></a></div>
<div class="button"><a id="img12" href="#nogo12" title="thumb 12"><em><img src="alice_f12.gif" alt="sketch 12" title="sketch 12" /></em></a></div>
<div class="button"><a id="img13" href="#nogo13" title="thumb 13"><em><img src="alice_f13.gif" alt="sketch 13" title="sketch 13" /></em></a></div>
<div class="button"><a id="img14" href="#nogo14" title="thumb 14"><em><img src="alice_f14.gif" alt="sketch 14" title="sketch 14" /></em></a></div>
<div class="button"><a id="img15" href="#nogo15" title="thumb 15"><em><img src="alice_f15.gif" alt="sketch 15" title="sketch 15" /></em></a></div>
<div class="button"><a id="img16" href="#nogo16" title="thumb 16"><em><img src="alice_f16.gif" alt="sketch 16" title="sketch 16" /></em></a></div>

10-22-2007, 10:33 PM
Well, this has gone to the point where my brain doesn't quite process exactly whats happening.

What it looks like though, is that the z-index needs to be tweaked for the hover, and that the padding/margin for the divs are uneven, or the non-hover div is not sized properly. I don't know if that helps at all...

10-23-2007, 09:22 AM
Thanks to everyone for their help. The program now validates.:thumbsup:
I actually started on this to help alex5857 and got taken over by the project.
Most enjoyable.



the source of the original program