Problema con elementos flotantes y su fondo

KaozC9 · 3 Junio 2010, 18:26 PM

ara que al hacer un menu transparente no suceda esto, que debo hacer?

mi css es este

#menul {
float: left;
width: 25px;
height: 55px;
background: url('images/mbar_l.png') no-repeat;
}
#menur {
float: right;
width: 25px;
height: 55px;
background: url('images/mbar_r.png') no-repeat;
}
#menum {
width: 100%;
height: 55px;
background: url('images/mbar_m.png') repeat-x;
}

y el html

Código (html4strict) [Seleccionar]

<div id="menul">
</div>
<div id="menur">
</div>
<div id="menum">
</div>

Gorky · 4 Junio 2010, 00:24 AM

Que no suceda el que?

KaozC9 · 4 Junio 2010, 00:55 AM

ves que son tres div, con tres fondos, uno es el de la esquina derecha, otro es el de la izquierda, y el del medio que se va repitiendo a lo largo del eje X, bueno, las esquinas son transparentes, por lo cual se ve tambien lo que se esta repitiendo.. quiero que se vea asi

y NO asi

MinusFour · 4 Junio 2010, 03:10 AM

Creo que es porque menuM esta al 100% en width.

KaozC9 · 4 Junio 2010, 03:55 AM

Cita de: MinusFour en 4 Junio 2010, 03:10 AM
Creo que es porque menuM esta al 100% en width.

claro, esto es porque quiero que sea dinamico, pero debe haber una forma para que no se muestre lo que esta "bajo" menur y menul

Cygog · 4 Junio 2010, 04:24 AM

la verdad es que no he entendido bien lo que preguntastes.. pero si creo que es que quieres tener tres divs juntos con un background el problemas lo tienes en el tamaño de los divs o tambien puedes modificar los float para que quede bien posisionado...

---- ---- ----

KaozC9 · 4 Junio 2010, 04:34 AM

quiero que sea asi

como ves, donde esta marcado rojo, el elemento menum interfiere con menul, y eso no quiero que pase, tanto en la izq como en la derecha, porque si coloco un margin: 0 25px; por ejemplo, desaparece solo en la izq, pero en la derecha sigue habiendo esa interferencia

Cygog · 4 Junio 2010, 04:52 AM

aaa yaya creo que ya entendi tu pregunta.. agrega un padding a el div cental de 10px y ya..
si no lo haz podido arreglar subi el source como fichero adjunto asi lo arreglo y te lo paso

KaozC9 · 4 Junio 2010, 05:01 AM

bueno aqui esta el link a mediafire
http://www.mediafire.com/?n3zdtnmwddn
es asi

menu.html
mbar_r.png
mbar_l.png
mbar_m.png

Cygog · 4 Junio 2010, 22:30 PM

he visto lo que deceas hacer.. y el problema que tienes es que al div centro no le haz puesto el float..

<html>
<head>

<style type="text/css">
       #cont {
          padding:10px;
          width:100%;
          height:65px;

             }
#izquierda {
            width:25px;
            height:55px;
            float:left;
            background-image:url(mbar_l.png)
             }
                    #centro {
                      width:90%;
                      height:55px;
                       float:left;
                      background-image:url(mbar_m.png)


                     }
                     #derecho {
                        width:25px;
                        height:55px;
                        float:left;
                        background-image:url(mbar_r.png)
                        }



</style>
</head>

<body>

<div id="cont">
<div id="izquierda"></div>

<div id="centro"></div>

<div id="derecho"></div>
</div>

</body>
</html>

lo recomendable seria que uses para el div centro px en vez de %