Foros del Web » Creando para Internet » CSS »

ayuda con div y su contenido

Estas en el tema de ayuda con div y su contenido en el foro de CSS en Foros del Web. hola tengo este este html Código: <div id="cuerpo"> <div id="contenido"> <div class="thumbs"> <a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); "> <img src="../View/galeria/thumbs/mybaby_thumb.jpg"> </a> </div> </div> </div> este es el ...
  #1 (permalink)  
Antiguo 24/08/2010, 10:26
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
ayuda con div y su contenido

hola tengo este este html

Código:
<div id="cuerpo">
   
<div id="contenido">

<div class="thumbs">
<a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); ">
<img src="../View/galeria/thumbs/mybaby_thumb.jpg">
</a>
</div>

</div>
		
</div>
este es el css...

Código:
#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}
el problema es que las imagenes no me parecen dentro de contenido salen debajo del div , estas imagenes llegan por ajax.

que puede ser.

saludos
  #2 (permalink)  
Antiguo 24/08/2010, 11:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con div y su contenido

Cita:
Iniciado por RIVERMILLOS Ver Mensaje
hola tengo este este html

Código:
<div id="cuerpo">
   
<div id="contenido">

<div class="thumbs">
<a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); ">
<img src="../View/galeria/thumbs/mybaby_thumb.jpg">
</a>
</div>

</div>
        
</div>
este es el css...

Código:
#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}
el problema es que las imagenes no me parecen dentro de contenido salen debajo del div , estas imagenes llegan por ajax.

que puede ser.

saludos
Información insuficiente.
Adjunte un enlace a la página si es posible, y si no lo fuese, facilite, al menos, el código de los elementos afectados/implicados.

Atentamente
  #3 (permalink)  
Antiguo 24/08/2010, 11:10
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con div y su contenido

mira como me aparece ........




y deberia aparecer las imagenes dentro del div negro.....

y este es el codigo

Código:
	<div id="cuerpo">
    <div id="contenido"><div class="thumbs"><a href="#" onclick="mostrarFoto('mybaby_thumb.jpg'); "><img src="../View/galeria/thumbs/mybaby_thumb.jpg"></a></div>
<div class="thumbs"><a href="#" onclick="mostrarFoto('P1000058_thumb.jpg'); "><img src="../View/galeria/thumbs/P1000058_thumb.jpg"></a></div>
<div class="thumbs"><a href="#" onclick="mostrarFoto('P1010333_thumb.jpg'); "><img src="../View/galeria/thumbs/P1010333_thumb.jpg"></a></div></div>
		<div id="paginacion"><a href="#">0</a></div>
	</div>
  #4 (permalink)  
Antiguo 24/08/2010, 11:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con div y su contenido

Rivermillos, enlace o códigos (el css especialmente), por favor.
Me da que es un problema del float de algún elemento (que será la razón de que no crezcan sus ancestros).

En lo que puede complementar la información, busque cómo "limpiar float" (o cadena similar).
Un buen lugar de inicio es la introducción a css de www.librosweb.es

No aventuro ninguna de las posibles solucciones, pues depende de su codificación.

Atentamente
  #5 (permalink)  
Antiguo 24/08/2010, 12:04
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con div y su contenido

mira este es el codigo css completo..


Código:
*{margin:0;padding:0}
td img {display: block;}
img{border:0;}

BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}

#contenedor{
text-align: left;
border: 2px solid #cccccc;
width: 700px;
margin: auto;
background-color : #ffffff;
}  
#contenido{
background-color:#000;
padding:2px;
}

#cabecera{
height : 150px;
width: 700px;
} 
#navegador{
background : #F5F4C3 url(images/fondonav.gif);
border-bottom : 1px solid #cccccc;
} 
#cuerpo{
width:580px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
float:left;
} 
#lateral{
width: 100px;
background-color: #EBF2FE;
border-bottom : 1px solid #cccccc;
border-left : 1px solid #cccccc;
float:right;
} 

#pie{
clear : both;
color : #cccccc;
text-align : right;
margin : 10px 10px 0px 10px;
padding-bottom:10px;
} 
#iframe1{
display:none;	
	}
.thumbs{
float:left;	
margin:5px;	
padding:1px;
background-color:#CCC;
}
.thumbs:HOVER{
background-color:#000;;	
}
saludos
  #6 (permalink)  
Antiguo 25/08/2010, 04:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con div y su contenido

¿Miró en el enlace que le indiqué?
En esa página, si utiliza el buscador con la cadena indicada /limpiar float/ en el primer resultado obtenido ejemplifica un problema y su solución que es exáctamente lo mismo que muestra en su imagen.

Atentamente
  #7 (permalink)  
Antiguo 25/08/2010, 09:01
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con div y su contenido

muchas gracias por tu ayuda la solucion era colocar esto en el css

border: thick solid #000;
overflow: hidden;


o agregar un div que limpie el float...

saludos
  #8 (permalink)  
Antiguo 25/08/2010, 11:15
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: ayuda con div y su contenido

Creo que el problema era que las imagenes flotaban dentro de un div, y que ese div no tenía un alto definido. Una solución posible sería colocar una altura definida para el div contenedor.

Pero como dice el artículo que te señalaron, el overflow es la técnica más recomendada.

Respecto a ponerle un borde... no creo que eso sea necesario. Creo que el artículo lo hace para mostrar visualmente el resultado.

Ah! El artículo propone una propiedad más para tener compatibilidad con IE6:

height: 1%;

Etiquetas: contenido
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 00:25.