Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Expert help needed with hover etc. NOW SORTED.

    http://www.cssplay.co.uk/menu/hover_click.html

    http://www.exitfegs.co.uk/hovercss.html

    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.

    Frank

    Screenshot included
    Attached Thumbnails Attached Thumbnails Expert help needed with hover etc. NOW SORTED.-screenhunter_02-oct.-21-18.45.jpg  
    Last edited by effpeetee; 10-22-2007 at 06:54 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

  • Users who have thanked dcostalis for this post:

    effpeetee (10-22-2007)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    Frank

    http://www.cssplay.co.uk/menu/hover_click.html

    http://www.exitfegs.co.uk/hovercss.html
    Last edited by effpeetee; 10-22-2007 at 03:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,007
    Thanks
    59
    Thanked 10 Times in 10 Posts
    When debugging css its useful to wipe sections(or build up form nothing) of it until the problem appears or dissappears

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/hovercss.html

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

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

    http://www.cssplay.co.uk/menu/hover_click.html
    Last edited by effpeetee; 10-22-2007 at 03:28 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the code.


    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">
    <head>
    <title></title>
    <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;}
    x
    .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;}
    
    
    </style>
    </head>
    <body>
    <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>
    </div>
    </div>
    </div>
    </body>
    </html>
    Last edited by effpeetee; 10-22-2007 at 03:35 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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...

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks to everyone for their help. The program now validates.
    I actually started on this to help alex5857 and got taken over by the project.
    Most enjoyable.

    Frank.

    http://www.exitfegs.co.uk/hovercss.html

    http://www.cssplay.co.uk/menu/hover_click.html
    the source of the original program
    Last edited by effpeetee; 10-23-2007 at 08:29 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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