Bueno, después de haber luchado para que mi menú se visualizase bien en firefox... resulta que en ie se ve fatal...
Mi mayor problema... trabajo con mac y no puedo ver internet explorer... me he descargado el darwine con el ie6 pero no me funciona bien... así que no puedo probarlo...
Por otra parte no se como utilizar los hacks... es decir que no entiendo... que es exactamente como lo tengo que hacer...
Algun apuesto caballero o bella dama sería tan amable de echarme una mano??
Muchas gracias chicos, gracias a vosotros aprendo un monton!!!! Espero dentro de poquito estar enseñando yo css :D
Anda que... me iba sin poner los códigos:
http://www.asleepbook.com
HTML:
Código:
<div id="menu">
<ul id="navi">
<li><a href="index.html">Home<span class="home">Regresemos al inicio... ¡NO HAY QUE PERDER DETALLE!</span></a></li>
<li><a href="book.html">Portafolio<span class="portfolio">Visita mis proyectos de diseño gráfico y web</span></a></li>
<li><a href="me.html">Currículum<span class="curriculum">Mi historia... ¡Cónoceme!</span></a></li>
<li><a href="contacto.php">Contacto<span class="contacto">Te ha gustado mi portfolio? ¡ Contacta conmigo!</span></a></li>
</ul>
</div><!--Final menu-->
CSS:
Código:
#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li{
float:left;
margin:0;
border-right:solid 3px #CCC;
}
#navi li a{
width:150px;
height:100%;
display:block;
padding-top:15%;
padding-bottom:15%;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
font-size:14px;
text-align:center;
background-color:#000;
}
#navi li a:hover{
background-color:#fff;
color:#000;}
/*Ocultamos la información que aparece al hacer hover en un boton*/
a span.home {display:none;}
a:hover span.home {
display:block;
position:relative;
top:-12px;
left:650px;
width:400px;
color:white;}
a span.portfolio {display:none;}
a:hover span.portfolio {
display:block;
position:relative;
top:-12px;
left:450px;
width:400px;
color:white;}
a span.curriculum {display:none;}
a:hover span.curriculum {
display:block;
position:relative;
top:-12px;
left:250px;
width:400px;
color:white;}
a span.contacto {display:none;}
a:hover span.contacto {
display:block;
position:relative;
top:-12px;
left:155px;
width:400px;
color:white;}