elementos flotantes y fondo

[KaozC9]

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


mi css es este

Código CSS:

#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 HTML:

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

[KaozC9]

¿nadie? por favor alguien que me ayude con esto

[Anaep]

Hola
Comprueba que las imágenes las has exportado en png con transparecia alpha

[KaozC9]

como hago eso en photoshop?

[Anaep]

Das a guardar como dispositivo web y eliges la opción png-8 y con que esté pinchada la opción de transparencia lo tienes

[KaozC9]

aun asi no se soluciona
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

[dots3r]

Eso pasa porque los contenedores que tiene las imágenes de la orilla están flotando y por consiguiente el contenedor del fondo tiende a ocupar su lugar. Prueba flotar el contenedor del fondo y reducir un poco si tamaño.

[KaozC9]

no, no funciona eso de flotar la imagen del medio, qe otra cosa podria hacer?

[Anaep]

Creo que no lo estás plantando bien. Pero igual te suelto un rollo y no he entendido lo que quiers hacer, pero te cuento.

Imagino que esa imagen es la imagen de fondo del menú, no???

Pues yo lo plantearía así. Yo no soy dada a tanto div, así que los menús los hago con listas. Sólo necesitas una imagen de fondo para todo el menú y luego cada apartado del menu con otra, si es que vas a usar una tipografía en imagen.

Bueno, como me explico como un libro abierto, casi mejor te paso un ejemplo y así lo ves :)

Código HTML:

<ul id="menu03">
  <li id="menu3_ini"><a href="#">inicio</a></li>
  <li id="menu3_pro"><a href="#">productos</a></li>
  <li id="menu3_eje"><a href="#"> ejemplos</a></li>
  <li id="menu3_ayu"><a href="#"> ayuda</a></li>
  <li id="menu3_con"><a href="#">contacto</a></li>
</ul>
 

Código CSS:

#menu03 {
    background-image: url;
    width: 960px;
    float: left;
}
#menu03 li {
    float: left;
}
#menu03 li a {
    line-height: 2.5;
    color: #FFF;
    text-decoration: none;
    float: left;
    width: 191px;
    text-align: center;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFF;
}
#menu03 li a:hover {
    background-color: #C9F;
}
 

Espero que se solucionen tus problemas

Pero pon sólo una imagen de fondo con el tamaño del menu que quieras y luego juegas con los li, mejor que ir dando a cada div una imagen, vamos creo yo...