www.webdeveloper.com
Results 1 to 2 of 2

Thread: two independent text-links within disjointed rollover

  1. #1
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    two independent text-links within disjointed rollover

    I have a text-rollover where an address-block appears on rollover. The address-block itself has two independent rollover links.
    Here's it is (I isolated the relevant top menu for simplification reasons). Please roll over the "contact" menu to see what I mean:

    http://raphaelzwyer.com/testRapha/in...lovertest.html

    The email link works fine but I can't figure out how to make the phone link independent from the email link so that if you rollover the email link it leeds you to your email browser and if you rollover the phone line it dials the respective phone number (with href="tel:917-650...." etc.). If I have both links within their respective paragraph tags the contact rollover doesn't work anymore. Looks like the link tag needs to be wrapped around the address-block for the contact-rollover work, and nested links won't be the solution either. How can I resolve that?

    The HTML:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>raphaelzwyer</title>
    <link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
    <script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
    </head>
    
    <body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
    
    <div id="container">
    
    	<div id="topmenu">
        	<ul id="menulist">
    			<li class="menubuttonactive"><a href="portfolio.html">portfolio</a></li>
                <li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
    			<li class="menubuttons"><a href="about.html">about</a></li>
    			<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
    			<li class="menubuttons"><a href="downloads/raphael_zwyer_CV.pdf" target="_new">resume</a></li>
                <li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
    			<li id="contactrollover">
                	<div class="menubuttons">
                    	<a href="mailto:info@raphaelzwyer.com" target="_new">contact
                        	<span id="addressbox">
                            		<p id="email">info@raphaelzwyer.com</p>
                            		<p id="phone">917-650-9534</p>
                                    <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
                            </span>
                         </a>
                     </div> <!-- end of menubuttons -->
              </li> <!-- end of contactrollover --> 
            </ul> <!-- end of menulist --> 
          </div> <!-- end of topmenu --> 
        </div>  <!-- end of header --> 
    </body>
    </html>


    The relevant CSS:

    Code:
    .menubuttons {
    		position: relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg.png");
    		background-repeat: repeat-x;
    		padding-top: 10px;
    		float: left;}
    .menubuttons:hover {
    		position: relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg_h.png");
    		background-repeat: repeat-x;
    		padding-top: 10px;
    		float: left;}
    .menubuttonactive {
    		position :relative;
    		top: 0px;
    		width: 100px;
    		height: 36px;
    		background-image: url("../images/menubg_a.png");
    		background-repeat: repeat-x;
    		padding-top: 10px;
    		float: left;}
    .menubuttonactive a {
    		color: #be1f2d;}
    .buttonspaces {
    		height: 36px;
    		list-style: none;
    		float: left;}
    #contactrollover {
    		position: relative;
    		top: 0px;
    		margin-bottom: -36px;
    		width: 100px;
    		left: 0px;
    		float: left;}
    #contactrollover div {
    		width: 100px;
    		height: 50px;
    		float: left;}
    #contactrollover a span {
    		display: none;}
    #contactrollover a {
    		display: block;}
    #contactrollover a:hover span {
    		display: block;
    		position: absolute;
    		top: 0px;
    		left: -560px;
    		padding-right: 12px;}
    #addressbox {
    		position: absolute;
    		top: 0px;
    		width: 548px;
    		left: 212px;
    		height: 60px;
    		background-image: url("../images/menubg.png");
    		background-repeat: repeat-x;
    		padding-top: 10px;
    		letter-spacing: 0.062em;
    		text-align: right;
    		float: left;
    		z-index: 800;
    		color: #a9a9a9;
    		background-color: white;}
    #addressbox:hover {
    		float: left;
    		z-index: 900;}
    #phone:hover, #email:hover {
    		color: #be1f2d;}
    #address {
    		position: relative;
    		width: 548px;;
    		height: 22px;
    		float: left;
    		z-index: 900;
    		color: #a9a9a9;}

  2. #2
    Join Date
    Mar 2011
    Posts
    1,134
    The problem is probably here:
    Code:
                  	<a href="mailto:info@raphaelzwyer.com" target="_new">contact
                        	<span id="addressbox">
                            		<p id="email">info@raphaelzwyer.com</p>
                            		<p id="phone">917-650-9534</p>
                                    <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
                            </span>
                         </a>
    You've enclosed <p> tags inside your <a>nchor tag and a <span> tag, which is invalid, but the point is that you also can't nest <a>nchor tags. You need to separate them with something like:
    Code:
                  	contact
                        	<div id="addressbox">
                            		<p id="email"><a href="mailto:info@raphaelzwyer.com">info@raphaelzwyer.com</a></p>
                            		<p id="phone"><a href="tel:9176509534">917-650-9534</a></p>
                                    <p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
                            </div>
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

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

Tags for this Thread

Posting Permissions

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



Recent Articles