Disjointed, clickable text rollover
I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links. Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links. Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?http://raphaelzwyer.com/testRapha/rollover_test.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>
<style type="text/css" >
* {
margin: 0;
padding: 0;
border: none;}
@font-face {
font-family: 'BotonReg';
src: url('fonts/BotonReg.eot');
src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonReg.woff') format('woff'),
url('fonts/BotonReg.ttf') format('truetype'),
url('fonts/BotonReg.svg#BotonReg') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
@font-face {
font-family: 'BotonMed';
src: url('fonts/BotonMed.eot');
src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonMed.woff') format('woff'),
url('fonts/BotonMed.ttf') format('truetype'),
url('fonts/BotonMed.svg#BotonMed') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
html, body {
background-color: #FFFFFF;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
color: #a9a9a9;
height: 100%;
width: 100%;
font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
font-size: 16px;
overflow-y: scroll;
letter-spacing: 0.065em;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: 1em;
text-shadow: 0 1px 1px rgba(255,255,255,.3);}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover {
text-decoration: none;
color: #be1f2d;}
a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
.clear {
clear: both;}
#container {
position: relative;
top: 0px;
margin: 0px auto;
width: 860px;
min-height: 100%;
height: auto !important;
height: 100%;
border: none;}
#topmenu {
position: relative;
top: 0px;
left: 212px;
width: 660px;
height: 48px;}
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_a.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 900;}
#addressbox:hover {
position: relative;
top: 0px;
width: 548px;;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
float: left;
z-index: 900;
color: #be1f2d;}
#addressboxbelow {
position: absolute;
top: 36px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
text-align: right;
float: left;
z-index: 900;}
#contactrollover {
position: relative;
top: 0px;
margin: 0px 0px -36px 0px;
width: 100px;
left: 0px;
float: left;
z-index: 900;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;
color: #a9a9a9;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.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" > contact<span id="addressbox" > <p> 917-650-9534, info@raphaelzwyer.com<br/ > </p> 143 leonard street, apartment 5, brooklyn ny 11206</span> </a> </div> </li>
</ul> <!-- end of menulist --> </div> <!-- end of topmenu --> </div> <!-- end of container --> <script type="text/javascript" src="js/raphaelzwyer.js" > </script>
</body>
</html>
I added padding to the right of the popup so there's no gap between contact and popup. Works fine now. raphaelzwyer.com/testRapha/portfolio.html
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Figured it out
Bookmarks