Foros del Web » Creando para Internet » CSS »

Replica de Botones en Vertical

Estas en el tema de Replica de Botones en Vertical en el foro de CSS en Foros del Web. Hola: Por fin he conseguido un sistema para establecer botones rollover con un enlace de texto subyacente que se mostraría en caso de que el ...
  #1 (permalink)  
Antiguo 08/09/2006, 05:27
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 4 meses
Puntos: 8
Replica de Botones en Vertical

Hola:

Por fin he conseguido un sistema para establecer botones rollover con un enlace de texto subyacente que se mostraría en caso de que el ordenador visitante tuviese desabilitadas las imágenes o, simplemente, funcionase sin estilos.

He realizado un código para un sólo botón y ahora quiero hacer toda la UL con hasta un número de ocho en vertical.

Funciona perfectamente en IE y FF. Los demás navegadores, ya se verán en su momento.

Lo que no sé es si deberé replicar toda la DIV id=alttext para cada botón o cómo hacerlo para optimizar lo mejor posible el CSS.

Os muesto el código para que alguien con más experiencia que yo me pueda aconsejar.

Gracias


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Rollovers con texto debajo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
.alt {
DISPLAY: block;
FONT-WEIGHT: bold;
LINE-HEIGHT: 10px;
FONT-SIZE: 10px;
TEXT-ALIGN: center;
MARGIN: 2px;
TEXT-DECORATION: none
}
A:link {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:active {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: center;
PADDING-BOTTOM: 0px;
MARGIN: -6px -9px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
#img1 A {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
FLOAT: left;
POSITION: relative;
HEIGHT: 24px;
TEXT-DECORATION: none
}
#img1 A {
BACKGROUND: url(LAWEB.gif) no-repeat;
WIDTH: 86px
}
#img1 A SPAN.img {
BACKGROUND: url(LAWEB-hover.gif) no-repeat;
MARGIN: 0px;
WIDTH: 86px;
POSITION: absolute;
HEIGHT: 24px
}
#img1 A:hover SPAN.img {
BACKGROUND: none transparent scroll repeat 0% 0%;
HEIGHT: 24px
}
.skolpres {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BACKGROUND: none transparent scroll repeat 0% 0%;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -1px -29px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BORDER-RIGHT-WIDTH: 0px;
left: 39px;
}
#alttext {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -7px -7px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BACKGROUND-COLOR: #0066ff;
BORDER-RIGHT-WIDTH: 0px
}
</STYLE>
<!--[if IE]>
<STYLE type=text/css>
#img1 A SPAN.img {
MARGIN: 0px 0px;
CURSOR: pointer
}
#img1 A:hover SPAN.img {
BACKGROUND: none transparent scroll repeat 0% 0%;
HEIGHT: 24px
}
.skolpres {
MARGIN: -8px -38px;
}
#alttext {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -14px -9px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BACKGROUND-COLOR: #0066ff;
BORDER-RIGHT-WIDTH: 0px
}
</STYLE>
<![endif]-->
<META content="MSHTML 6.00.2800.1555" name=GENERATOR>
</HEAD>
<BODY>
<DIV id=alttext><A href="http://www.LAWEB.com"><SPAN
class=alt>El Enlace Debajo</SPAN></A></DIV>
<UL class=skolpres>
<LI id=img1><A href="http://www.LAWEB.com"><SPAN
class=img></SPAN></A></LI>
</UL>
</BODY>
</HTML>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:34.