Foros del Web » Creando para Internet » CSS »

Divs no se superponen

Estas en el tema de Divs no se superponen en el foro de CSS en Foros del Web. Buenas noches, tengo 1 problemita que la verdad ya no se como arreglarlo, tengo 2 etiquetas div, una arriba de la otra, la de arriba ...
  #1 (permalink)  
Antiguo 12/09/2009, 17:58
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Divs no se superponen

Buenas noches, tengo 1 problemita que la verdad ya no se como arreglarlo, tengo 2 etiquetas div, una arriba de la otra, la de arriba despliega un menu y la de abajo solo muestra contenido, el problema, es que cuando se despliega el menu, me mueve la etiqueta del contenido!


aca les dejo el codigo del index y del css

Index.php
Código:
<div id="cabecera">
<div id="digitalglobe">
Digital Globe<br />
Santa Fe
</div>
<div id="fecha">
<?php echo date("m.d.y"); ?></div>
</div>
<div id="contenedor">
<ul>
<li>Ofertas</li>
<li>Nuestros Productos
	<ul>
   		<li>Micros</li>            
		<li>Mothers</li>
		<li>Memorias</li>
        <li>Pendrives</li>
        <li>Discos</li>
        <li>Cd/Dvd/Disk</li>
        <li>Notebooks</li>
        <li>Gabinetes</li>
        <li>Fuentes</li>
        <li>Teclados</li>
        <li>Parlantes</li>
        <li>Monitores</li>
        <li>Placas de Video</li>
        <li>Web Cams</li>
        <li>Impresoras</li>
        <li>Conectividad</li>
        <li>Placas de Sonido</li>
        <li>Consolas</li>
        <li>Joysticks</li>
        <li>Auriculares</li>
        <li>Mouses</li>
        <li>Proyectores</li>
        <li>Camaras Digitales</li>
        <li>Lector/Memorias</li>
        <li>Mp3/Mp4</li>
        <li>Gps</li>
    </ul>
</li>
<ul>
	<li>Sobre nosotros</li>
</ul>
<li>Contacto</li>
<li>Newsletter
	<ul>
    	<li>Alta</li>
        <li>Baja</li>
    </ul>
</li>
<li>Formas de Pago</li>
</ul>

<div id="contenedor">
Este es el div que no se deberia superponer, pero se mueve -.-
</div>



css.css
Código:
@charset "utf-8";

body{
width:80%;
margin: 0 auto;

}

#contenedor{
margin: 0 auto;
margin-left:16%;
margin-right:auto;

}

#cabecera{
background-image:*********;
background-repeat:no-repeat;
background-position:center;
border-style:solid;
border-width:1px;
border-color:#000000;
margin: 0 auto;
width:80%;
height:100px;
}

#digitalglobe{
text-align:left;
color:#666666;
font-size:18px;
margin-top:25px;
margin-left:80px;
}

#fecha{
text-align:right;
color:#666666;
font-size:18px;
margin-top:-40px;
}


/*Aca le doy estilo a todo lo que este contenido dentro de la primer etiqueta UL*/
ul {
font-family: Arial, Verdana;
font-size: 17px;
margin:0;
padding:0;
list-style: none;
}

/*Aca les doy el estilo todas las etiquetas LI dentro de UL*/
ul li {
font-size: 17px;
margin:0;
padding:0;
display: block;
position: relative;
float:left;

}

/*Aca mantengo ocultos los menues desplegables*/
li ul {
display: none;
font-size: 17px;
 
}

/*Aca le doy estilo a los href en las listas li*/
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;

}

/*Aca le doy estilo a los href cuando pasa el mouse por encima del link*/
ul li a:hover { 
background:#FF0066; 

}

/*Aca le doy estilo aL despliegue de los botones*/
li:hover ul {
  display: block;
  
}


/*Aca le doy estilo a los botones*/
li:hover li {
  float: none;
  font-size: 15px;

  
}

li:hover a {
background: #617F8A;

}

/*Aca le doy estilo a los botones cuando paso el mouse por encima*/
li:hover li a:hover {
background:#00FF00;
}

#index{
width:80%;
margin: 12 auto;
border-style:solid;
border-width:1px;
border-color:#000000;

}
ya probe de todo pero seguro es una pavada lo que me falta y que no hice.
probe de ver si el problema era porque los dos divs se llamaban igual, pero tampoco es eso, al contenido lo separe por un <br /> y lo deje sin <div> y tampoco.

Desde ya muchas gracias.
  #2 (permalink)  
Antiguo 12/09/2009, 19:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Divs no se superponen

Hola Kadas
a la segunda lista (ul li ul) de tu menú deberías posicionarla absolutamente cuando la muestres ("position:absolute) y ajustar su posición con valores para "left" y "top" si fuese necesario.
Con el valor "absolute" lo que haces es que su existencia (cuando lo muestras) no influya en el resto de elementos.

Un par de apuntes no solicitados por ti:
En el html tienes un error. Todo lo que esté en una lista (ul) debe estar contenido en su respectivo li. O dicho de otra forma: el único elemento hijo directo de ul debe ser un li, y dentro de éste lo que quieras. Y tú tienes:
Código html:
Ver original
  1. <ul>
  2.   <li>Ofertas</li>
  3.   <li>Nuestros Productos
  4.     <ul>
  5.        <li>Micros</li>            
  6.        <li>Mothers</li>
  7.         ...
  8.        <li>Gps</li>
  9.     </ul>
  10.   </li>
  11.         <ul><!-- este ul está fuera de un li -->
  12.        <li>Sobre nosotros</li>
  13.        </ul>
  14. ...etc

Segundo: en un vistazo rápido a tu css (y con los códigos que muestras) ya te adelanto que tu menú no funcionará en ie6. La razón: la pseudoclase ":hover" sólo la sabe aplicar a los enlaces y tú la aplicas a los li. Por ejemplo: "li:hover ul {...}
Tercero: lo más lógico y lo que cabría esperar en un menú es que el contenido de los li fuesen enlaces:
Código html:
Ver original
  1. <li><a href="#" title="Nuestras ofertas">Ofertas </a></li>

En las faq's de css tienes una amplia colección de menús por si quieres echarles un vistazo.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 13/09/2009, 11:03
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: Divs no se superponen

Muchas gracias por todos los consejos, ahora mismo lo voy a probar, te comento rapido nomas que las etiquetas a href no las inclui ahora en el mensaje porque no me dejaba postear por temas de "spam" y pense que si encontraba las etiquetas a href me daria ese error, por lo demas muchas gracias, lo pruebo y comento!
  #4 (permalink)  
Antiguo 13/09/2009, 11:41
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: Divs no se superponen

Nuevamente te agradezco la ayuda, ahi vi el error de la etiqueta <ul> que esta fuera de una etiqueta <li>.

sobre el position:'absolute' no me queda mas nada que volver a agradecerte, ahora se ve perfecto!
  #5 (permalink)  
Antiguo 13/09/2009, 12:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Divs no se superponen

Hola:

Además tienes un error, defines el id contenedor y lo usas dos veces (una de ellas sin cerrar </div>) cuando si lo defines como id (#contenedor) es obligatorio usarlo exclusivamente una vez sola, si lo vas a usar más de una vez deberás hacerlo como <div clas="contenedor"> y en el css definirlo como clase (.contenedor).

Saludos.


Última edición por jomaruro; 14/09/2009 a las 15:27
  #6 (permalink)  
Antiguo 14/09/2009, 06:34
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: Divs no se superponen

si eso me olvide de preguntar en el 1er post! si se podia o no utilizarlo dos veces, pero veo que como id no, pero si como class.

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 21:37.