Comunidad de diseño web y desarrollo en internet online

color de div desaparece

Citar            
MensajeEscrito el 24 Abr 2014 12:07 am
hola chicos, tengo el siguiente problema: cuando quiero pone el color de fondo a un div, el mismo no aparece. peo cuando cambio a float: left el fono si se ve.
el problema en cuestion es el div llamado "caja". gracias por la ayuda

Código HTML :

<div id="content">
  <div class="banner"></div><!-- FIN banner. -->
<div class="banner-content">
      <div class="logo"><img src="img/logo.png" width="157" height="140" alt="logo" /></div>
      <div class="botonera"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','img/boton_inicio-over.png',1)"><img src="img/boton_inicio.png" name="inicio" width="140" height="80" border="0" id="inicio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('empresa','','img/boton_empresa-over.png',1)"><img src="img/boton_empresa.png" name="empresa" width="140" height="80" border="0" id="empresa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('productos','','img/boton_productos-over.png',1)"><img src="img/boton_productos.png" name="productos" width="140" height="80" border="0" id="productos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacto','','img/boton_contacto-over.png',1)"><img src="img/boton_contacto.png" name="contacto" width="140" height="80" border="0" id="contacto" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('face','','img/facebook-over.png',1)"><img src="img/facebook.png" name="face" width="32" height="80" border="0" id="face" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('skype','','img/skype-over.png',1)"><img src="img/skype.png" name="skype" width="32" height="80" border="0" id="skype" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twit','','img/twit-over.png',1)"><img src="img/twit.png" name="twit" width="32" height="80" border="0" id="twit" /></a></div><!-- FIN banner botonera. -->
  </div><!-- FIN banner content. -->
  <div class="slide"><img src="img/slide.jpg" width="1000" height="420" alt="slide" /></div>
  <div class="caja">
    <div class="cajita-larga"><h1>Bienvenidos</h1><br />
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dolor eget odio bibendum interdum. Donec eget mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. Vivamus sodales dui quis lorem suscipit, eget tempor augue pretium. Donec ac enim ante. Ut faucibus ante id ornare aliquam.</h2></div><!-- FIN cajita larga. -->
<div class="cajita-01"><img src="img/img-01.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3>
      <p>Donec eg   et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br />

    <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-02.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3>
      <p>Donec eg   et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br />

      <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-03.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3>
      <p>Donec eg   et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br />

      <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-04.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3>
      <p>Donec eg   et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br />

      <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><!-- FIN divs cajitas. -->
  </div><!-- FIN caja. -->
  <div class="footer">
    <div class="footer-content">
      <div class="foot-01">
        <ul>INICIO<br />
          EMPRESA<br />
          PRODUCTOS<br />
          CONTACTO
        </ul>
      </div>
    <div class="foot-01">
        
        </ul>
      </div><div class="foot-01"> </div><div class="foot-01"> </div></div><!-- FIN FOOTER_content. -->
  </div><!-- FIN FOOTER. -->
</div><!-- FIN CONTENEDOR. -->


y acá el css:

Código CSS :

body {
   background-attachment: fixed;
   background-image: url(img/fondo.jpg);
   background-repeat: repeat;
   margin: 0px;
   height: 100%;
   width: 100%;
}
#content {
   text-align: center;
   width: 100%;
   height: 100%;
}
.banner {
   background-color: #000000;
   height: 80px;
   width: 100%;
   position: relative;
   opacity: 0.7;
   filter: alpha(opacity=20);
}
.banner-content {
   position: absolute;
   float: left;
   height: 157px;
   width: 1000px;
   margin-left: -500px;
   z-index: 1;
   left: 50%;
   top: 0px;
}
.logo {
   height: 140px;
   width: 157px;
   position: absolute;
   float: left;
   z-index: 3;
   left: 5px;
}
.botonera {
   height: 80px;
   width: 843px;
   position: relative;
   float: right;
   text-align: left;
}
.slide {
   height: 420px;
   width: 1000px;
   position: relative;
   margin: 0 auto;
}
.caja {
   height: auto;
   width: 1000px;
   background-color: #000;
   background-attachment: fixed;
   background-repeat: repeat;
   position: relative;
   margin: 0 auto;
   ;
}
.cajita-larga {
   background-color: #CCC;
   height: auto;
   width: 980px;
   text-align: left;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   padding-top: 20px;
   padding-right: 10px;
   padding-bottom: 20px;
   padding-left: 10px;
   position: relative;
}
.cajita-01 {
   float: left;
   height: auto;
   width: 210px;
   position: relative;
   text-align: left;
   padding-top: 20px;
   padding-right: 20px;
   padding-bottom: 10px;
   padding-left: 20px;
}

h1 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 24px;
   color: #666;
   text-decoration: none;
   display: inline;
   font-weight: lighter;
}
h2 {
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #333;
   text-decoration: none;
   display: inline;
   font-weight: lighter;
}
h3 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #333;
   text-decoration: none;
   display: block;
   padding-top: 5px;
   padding-bottom: 0px;
}
p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #333;
   text-decoration: none;
   display: block;
   line-height: 14px;
   font-style: normal;
}
.leer-mas {
   display: block;
   float: left;
   padding-top: 10px;
}

.footer {
   background-color: #000000;
   height: auto;
   width: 100%;
   position: relative;
   float: left;
   margin: 0 auto;
   text-align: center;
   opacity: 0.9;
   filter: alpha(opacity=20);
}
.footer-content {
   height: auto;
   width: 1000px;
   text-align: center;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
.foot-01 {
   float: left;
   height: auto;
   width: 240px;
   position: relative;
   text-align: left;
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
}
ul {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #FFF;
   list-style-type: none;
   margin-left: -30px;
   line-height: 20px;
}

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 24 Abr 2014 02:45 pm

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

firefox
Citar            
MensajeEscrito el 24 Abr 2014 05:59 pm
muchas gracias ELPORFIRIO, lo solucioné. no entendí la explicación sobre este ejemplo... pero ya la encontraré. gracias nuevamente

Por walter

68 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.