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>
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.