Css y a, span
Muy buenas y feiz año a todos, espero que los reyes les hayan dejado muxas cositas, a mi me dejaron entre otras cosas, un pequeño problemilla con Css que no se como solucionar. Resulta que tengo un menu, en el que los enlaces están en rojo y sin subrayar, si el puntero pasa sobre ellos se ilumina el fondo y se subrayan por encima y por debajo, a la vez que debajo del menú aparece una capa, la cuestión es que en IE y en Opera no consigo quitarle el subrayado (encima y debajo) del texto que sale en la capa, aqui tengo mi código, a ver si me pueden echar una mano.
<code><div id="contentMenu">
<a href="includes/PHPBB2/index.php">Foro<span>hola</span></a>
</div>
#contentMenu a:hover {background: #eee; text-decoration: underline overline;}
#contentMenu a {
color: #900;
text-decoration: none;
}
#contentMenu a span {
top: 280px;
left: 10px;
width: 125px;
display: none;
}
div#contentMenu a:hover span {
color: #000;
display: block;
position: absolute;
text-decoration: none;
}</code>
helenp
No te entiendo muy bien, que quiere,
pero lo veo raro,
text-decoration: underline overline;}????
y lo de span?
Has mirado instrucciones en este link:? http://www.w3schools.com/css/css_pseudo_classes.asp
orange
Mola, es curioso como has utilizado CSS aqui para conseguir el efecto
Puede ser que esos navegadores tengan problemas al interpretar correctamente la declaración, porque mi IE (6.0.2800) me muestra el superior, pero no el inferior (del hola)
¿Has tratado de conseguir lo mismo de otra manera?
meddle
prueba esto:
<code>#contentMenu a:hover {background: #eee; border-top: 1px solid red; border-bottom: 1px solid red; text-decoration: none;}
.
.
.
div#contentMenu a:hover span {
color: #000;
display: block;
position: absolute;
border: 0px;
text-decoration: none;
}
</code>
orange
jejeje ..... me gusta tu capacidad de buscar alternativas Sergi
XD
meddle
gracias, felicitame cuando sepamos que funciona ;)
por cierto lo he editado, era border:0px y no border-top:0px (en span)
orange
ondia, creía que lo habías probado
XXD
de todas formas tiene buena pinta
meddle
no, mormalmente lanzo las ideas y quien tenga el problema que lo pruebe. a no ser que sea algo mas serio y me interese darle otro enfoque al asunto no me pongo a escribir codigo realmente.
dirarck
Gracias orange, las ganas mias que hubiera sido idea mia:P, eso es de erik meyer (que para eso es el AS), con respecto a la forma de sergi, creo que me vo a decantar por ella, al fin y al cabo furula en todos los navegadores y desapareció un fallo que se producia en netscape y mozilla (guay) :P, sólo hago unas pequeñas modificaciones para ahorrar código.
<code>#contentMenu a {
color: #900;
text-decoration: none;/*se aplica la herencia, por lo que no tengo que volver a especificarlo en más reglas*/
}
#contentMenu a:hover {
background: #eee;
border-top: solid 1px;/*asume el color de la letra, por lo k no tengo k especificar color*/
border-bottom: solid 1px;
}
#contentMenu a span {
top: 280px;
left: 10px;
width: 125px;
display: none;
}
div#contentMenu a:hover span {
color: #000;
display: block;
position: absolute;
}</code>
Creo k está guay esta forma de utilizar Css, cuando lo vi en el ejemplo de erik meyer me gustó bastante, y más todavía cuando se lo ví utilizandolo con imágenes (aki no hace falta javascript).
orange
Lo cierto es que con las posibilidades que abre el uso inteligente de CSS se va a poder elminar mucho código JavaScript
meddle
veo que estais viniendo a mi terreno... al final caereis todos y dominaré el mundo :)
por cierto erik no es el AS, es el PUTO AMO
dirarck
y tanto, el otro día vi un menú desplegable en css (sin nada de javascript), la pega es que utilizaba tablas, lo siento no me acuerdo de la url, la verdad k estaba bastante bien, a ver si lo encuentro de nuevo e intento hacerlo con capas.
meddle
estos no llevan tablas pero IE no soporta selectores CSS correctamente, asi que son solo para navegadores buenos ;)
dirarck
uyyy ¿quién habra sido el que hizo copy paste con ese código??:D:D