Foros del Web » Creando para Internet » CSS »

Juntar capa y boton

Estas en el tema de Juntar capa y boton en el foro de CSS en Foros del Web. Hola, tengo unos botones que al pulsarlos muestran una capa que estaba oculta (display: none), el problema es que no doy con la forma de ...
  #1 (permalink)  
Antiguo 01/10/2007, 10:13
Avatar de PosProdukcion  
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 19 años, 3 meses
Puntos: 9
Juntar capa y boton

Hola, tengo unos botones que al pulsarlos muestran una capa que estaba oculta (display: none), el problema es que no doy con la forma de que la capa oculta aparezca pegadita al botón, como en este diálogo el color o tamaño de la fuente...

Aquí os muestro el código:

Código:
div#BotoneraEditor /*CAPA QUE CONTIENE TODA LA FILA DE BOTONES*/
{
    background-color: #ffffcc;
    padding: 3px;
}

.botonAgrupado /*DIV QUE AGRUPA EL BOTON (IMG) DE TAMAÑO Y LA CAPA CON LA LISTA DE TAMAÑOS*/
{
    z-index: 2;
    display: inline;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.icono img /*BOTON*/
{
    border: 1px solid #CCCCCC;
    margin: 0px 1px;
    /*z-index: 1px*/
}

    #listaSize /*CAPA CON LA LISTA DE TAMAÑOS*/
   {
        display: none;
        position: absolute;
        left: 0px;
        top: 20px;
        z-index: 3;
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
    }
El boton tiene una altura de 21px El caso es que en firefox, a pesar de haber puesto top: 20px, al mostrar la lista de tamaños aparece un poco desplazada hacia abajo, como veis en este imagen:



Y en explorer ocurre al revés, que se monta un poco sobre el botón, Y LO QUE ES PEOR, el botón de al lado (color de fuente) está sobre la lista de tamaños, como veis en esta imagen...



Os pongo el código HTML por si os ayuda:

Código:
                        <div class="botonAgrupado">
                        <a class="icono" href="javascript:mostrarSize('')"><img src="clases/img_editor/size.gif" alt="Tamaño de fuente" title="Tamaño de fuente"/></a>
                            <%listaSize()%> <!--ESTE ESCRIBE EL HTML CON LA LISTA DE TAMAÑOS, ES UNA TABLA-->
                        </div>
                        
                        <div class="botonAgrupado">
                        <a class="icono" href="javascript:mostrarPaleta('C', '')"><img src="clases/img_editor/color.gif" alt="Color de fuente" title="Color de fuente" /></a>
                            <%paletaColores("C")%> <!--ESTE ESCRIBE EL HTML CON UNA TABLA DE COLORES-->
                        </div>
La pregunta es como ajustar exactamente la lista de tamaños al borde inferior del botón "tamaño de fuente" en ambos navegadores y como evitar que los botones de al lado se vean por encima de la lista en explorer...

Muchas gracias
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 00:51.