Hola,
Sin el diseño y sin ver las imágenes con las que pretendes
trabajar me ha costado algo "adivinar" el efecto que
verdaderamente presigues. Pero basándome en el concepto
y tu código, te comento.
Si persigues repetir este esquema para todos los items:
<li id="registroactivo" class="registro"><a href="#">
<img src="item1.png" alt="Item 1"/></a></li>
La solución pasa por asignar al elemento < a > las dimensiones
adecuadas (y no al li), según el tamaño de tu background
para el rollover:
.registro:link,
.registro:active,
.registro:visited {
width: 122px;
height:47px;
background-image: url(../images/tab_register_00.png) no-repeat;}
.registro:hover {
background-image: background:url(../images/tab_register_01.png)
no-repeat; }
Te recuerdo que definas también las pseudoclases :active y :visited
por si es otro factor del problema. Y añadir a todo esto la pseudoclase
:focus, como comentaba Jorge, para conseguir el efecto de "elemento
seleccionado".
Espero que te sirva de ayuda.
Si no es la solución, a ver si nos puedes referenciar gráficamente el
efecto en el caso de que exista otra solución que no requiera JS :)
Un saludo!
--
Abel Sutilo
Creativo / Freelancer
* +34 637 794 847 (ES)
* [EMAIL PROTECTED]
* www.abelsutilo.com
----- Original Message -----
From: "Reynier Perez Mira" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <[email protected]>
Sent: Friday, May 26, 2006 9:48 PM
Subject: Re: [Ovillo] Tabs con rollover
Gente:
Me esta dando problemas el rollover, pense que lo habia hechado a andar pero
nada. Miren el código del CSS:
#cabecera {
position: absolute;
width: 760px;
height: 106px;
background: url(../images/banner.png) no-repeat; }
#cabecera ul {
position: absolute;
top: 51%;
left: 19.5%;
list-style: none;
margin: 0;
padding: 0;
}
#cabecera li {
padding: 0;
list-style: none;
display: block;
float: left;
width: 122px;
height: 47px
}
#cabecera li.registro, #cabecera li.registro a:link{
background:url(../images/tab_register_00.png) no-repeat; }
#cabecera li.captura, #cabecera li.captura a:link { background:
url(../images/tab_capture_00.png) no-repeat; }
#cabecera li.impresion, #cabecera li.impresion a:link { background:
url(../images/tab_print_00.png) no-repeat; }
#cabecera li.entrega, #cabecera li.enterga a:link { background:
url(../images/tab_delivery_00.png) no-repeat; }
#cabecera li.reportes, #cabecera li.reportes a:link { background:
url(../images/tab_reports_00.png) no-repeat; }
#cabecera li.registro a:hover {
background:url(../images/tab_register_01.png) no-repeat; }
#cabecera li.captura a:hover{ background: url(../images/tab_capture_01.png)
no-repeat; }
#cabecera li.impresion a:hover{ background: url(../images/tab_print_01.png)
no-repeat; }
#cabecera li.entrega a:hover{ background: url(../images/tab_delivery_01.png)
no-repeat; }
#cabecera li.reportes a:hover{ background: url(../images/tab_reports_01.png)
no-repeat; }
Y el HTML:
<div id="contenedor">
<div id="cabecera">
<ul id="tab">
<li id="registroactivo" class="registro"><a href="#"> </a></li>
<li id="capturaactivo" class="captura"> </li>
<li id="impresionactivo" class="impresion"> </li>
<li id="entregaactivo" class="entrega"> </li>
<li id="reportesactivo" class="reportes"> </li>
</ul>
</div>
</div>
Se preguntaran para que son los ID y es para luego trabajar con el elemento
seleccionado segun anduve indagando en Google. Que pasa que no lotro el
rollover correctamente? A y como poner enlace a los LI que estan arriba? Son
Imagenes simplemente no tienen texto por ningun lado
--
ReynierPM | Kubuntu 5.10 | Linux User:#310201
Hay dos cosas infinitas: el Universo y la estupidez humana. Y del Universo
no estoy seguro.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
