Foros del Web » Creando para Internet » CSS »

div dentro de div background no responde

Estas en el tema de div dentro de div background no responde en el foro de CSS en Foros del Web. Hola he visto como esta comunidad ayuda a las personas y me parece excelente ... porque cada post que he visto todos intentan que sea ...
  #1 (permalink)  
Antiguo 23/10/2009, 10:17
 
Fecha de Ingreso: octubre-2009
Mensajes: 7
Antigüedad: 8 años, 1 mes
Puntos: 0
Exclamación div dentro de div background no responde

Hola he visto como esta comunidad ayuda a las personas y me parece excelente ... porque cada post que he visto todos intentan que sea didáctico para el que pregunto.

Ahora es mi turno de aprender ... vengo trabajando hace 3 meses con css y divs ... y me costo adaptarme pero al final me pareció mejor.

Ahora tengo un problema les pongo el codigo y la imagen de como se ve.

Código:
<div id="contenido_2">
        <div id="contenido_productos">
        	<div align="center"><img src="img/logo.png" /></div>
      		<div id="texto_productos">
       	    <p class="texto13px">&nbsp;</p>
       	    <p class="texto13px">*Repelente de origen natural extraído por un prodecimiento patenteado<br />
          *Efectividad y tolerabilidad comprobadas<br />
          *Formula sin repelente químico, sin alcohol<br />
          *Para toda la familia, mismo niños</p>
       	    <p>&nbsp;</p>
          <p class="texto16px">Composición : 10% de ACEITE CONCENTRADO </p>
          <p class="texto16px">DE CITRONELA de origen natural </p>
          <p>&nbsp;</p>
          <p class="texto13px">Rechaza los insectos picadores tales como : Los mosquitos,</p>
          <p class="texto13px"> anopheles, aedes, culex, etc. que son vectores de enfermedades</p>
          <p class="texto13px"> como el paludismo, el dengue, el chikungunya, etc. </p>
          <p class="texto13px">tambien los tabanos, avispas, abejas, moscas de la arena, entre otros.</p>
          <p class="texto13px">&nbsp;</p>
          <p class="texto13px">&nbsp;</p>
          <p class="texto13px">*Respetar los consejos de uso : <br />
          En zonas de alta exposicion a mosquitos es aconsejable el uso</p>
          <p class="texto13px"> asimétricamente de 2 brazaletes :uno en la muñeca y el otro en</p>
          <p class="texto13px"> el tobillo. Renovar el brazalete cuando la protección disminuye.</p></div>
          <div id="img_productos"><img src="img/img1_productos.png" /><br />
          							<img src="img/img2_productos.png" /><br />
                                    <img src="img/img3_productos.png" /></div>
        </div>
Este es la parte del css:

Código:
#contenido_2 {
	width:729px;
	border-left-style:solid;
	border-left-color:#82cf33;
	border-left-width:3px;
	border-right-style:solid;
	border-right-color:#82cf33;
	border-right-width:3px;
	margin-left:auto;
	margin-right:auto;
}

#contenido_productos{
	clear:both;
	height: auto!important;
	height:459px;
	min-height: 459px;
	background-image:url(img/fondo_productos.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	text-align:left;
	background-color:#3C866F;
}

#texto_productos{
	float:left;
	width:479px;
	padding-left:21px;
}

#img_productos{
	width:218px;
	float:right;
	text-align:right;
	padding-right:11px;
	padding-top:25px;
}
aca la imagen del problema:

imagengratis.org/images/nomosquito.png

El problema es cuando el div texto_productos se alarga las propiedades del background del div contenido_productos no se aplican.
  #2 (permalink)  
Antiguo 23/10/2009, 10:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div dentro de div background no responde

Añade justo antes de cerrar el div #contenido_productos este otro:

<div class="corte"></div>

y ahora añade al css:

.corte {clear: both;}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 23/10/2009, 10:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div dentro de div background no responde

¿Probaste a "limpiar el flotado" y utilizar las declaraciones "conjuntas" (shorthands)
Código css:
Ver original
  1. #contenido_productos{
  2.     clear:both
  3.     background: #3C866F url(img/fondo_productos.jpg) no-repeat left bottom;
  4.     text-align:left;
  5.     overflow: auto;
  6.     min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/
  7. }

Oppsss! por dormirme. Bueno es otra forma. Ahora ya puedes elegir.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 23/10/2009, 10:32
 
Fecha de Ingreso: octubre-2009
Mensajes: 7
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: div dentro de div background no responde

Cita:
Iniciado por Mikmoro Ver Mensaje
Añade justo antes de cerrar el div #contenido_productos este otro:

<div class="corte"></div>

y ahora añade al css:

.corte {clear: both;}
Sos el Dios del CSS !!!

Muchisimas gracias!!!

Algo tan simple y tan rompe bolas!! jejeje

Muchisimas gracias
  #5 (permalink)  
Antiguo 23/10/2009, 10:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div dentro de div background no responde

De nada, es un placer.

Aprovechando, kseso? (y todo el que lo haya pensado): ¿por qué en este caso no se podría usar el overflow: auto en el contenedor padre? ¿por qué he legido el método del corte?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 23/10/2009, 10:37
 
Fecha de Ingreso: octubre-2009
Mensajes: 7
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: div dentro de div background no responde

Cita:
Iniciado por kseso? Ver Mensaje
¿Probaste a "limpiar el flotado" y utilizar las declaraciones "conjuntas" (shorthands)
Código css:
Ver original
  1. #contenido_productos{
  2.     clear:both
  3.     background: #3C866F url(img/fondo_productos.jpg) no-repeat left bottom;
  4.     text-align:left;
  5.     overflow: auto;
  6.     min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/
  7. }

Oppsss! por dormirme. Bueno es otra forma. Ahora ya puedes elegir.
Esto es un hack para ie6 por eso lo dejo

Código:
height: auto!important;
	height:459px;
	min-height: 459px;
Y el tema de las declaraciones conjuntas ... recien me entero que asi se llama. Yo no se en que orden van por eso no las uso .. yo aprendi de la vida esto ... jejeje. capas que con el tiempo las uso.

Gracias
  #7 (permalink)  
Antiguo 23/10/2009, 10:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div dentro de div background no responde


Cita:
height:459px;
min-height: 459px;/*prescindible si no necesitas ese tamaño mínimo*/




Un saludo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 23/10/2009, 10:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: div dentro de div background no responde

Exacto: en IE6 no crecería y sacaría el scroll, y sólo en IE6 porque "height: auto!important;"
__________________
Visita mi nueva web idplus.org
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 07:55.