Foros del Web » Creando para Internet » CSS »

no se el porque de este margen, en este div?

Estas en el tema de no se el porque de este margen, en este div? en el foro de CSS en Foros del Web. Hola a todos. No doy con ello. A ver si alguno me dice algo porque ya estoy bloqueado. Porque se ve la franja azul que ...
  #1 (permalink)  
Antiguo 15/06/2014, 09:09
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 1 mes
Puntos: 5
no se el porque de este margen, en este div?

Hola a todos. No doy con ello. A ver si alguno me dice algo porque ya estoy bloqueado.

Porque se ve la franja azul que hay por debajo de la imagen roja?:

Código HTML:
<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>prueba</title>
	<style>
		#contenedor_temas_sinpadding{
			border-top:1px solid black;
			border-bottom:1px solid black;
			height: auto;
			overflow: hidden;
		}
		.img_left{
			width: 60%;
			float: left;
			height: 100%;
			background-color: blue;
		}
		.acordeones{
			width: 100%;
			background-color: red;
		}
	</style>

</head>
<body>
	<div id="contenedor_temas_sinpadding">
		<div class="img_left">
			<img class="acordeones" src="prueba.jpg">
		</div>
	</div>
</body>
</html> 
No lo entiendo. Os he puesto un ejemplo muy básico del problema que estoy teniendo. Pero aqui se ve igualmente. En realidad lo que veis de rojo es una imagen que va metida dentro de un div y este a la vez dentro de otro. Mas o menos como ahora.

Pero no entiendo que si le he puesto al div img_left, un height de 100%, no se adapte. ¿no se porque no se adapta al 100% de altura?

alguien puede darme un poco de luz en esta tontería en la que estoy metido.


gracias
  #2 (permalink)  
Antiguo 15/06/2014, 10:26
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 1 mes
Puntos: 5
Respuesta: no se el porque de este margen, en este div?

mas simple todavía y sigue pasandome:

Código HTML:
<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>prueba</title>
	<style>

		.img_left{
			background-color: blue;
		}
		img{
			width: 100%;
		}
	</style>

</head>
<body>
	<div class="img_left">
		<img src="prueba.jpg">
	</div>
</body>

</html> 

Última edición por 00israel; 15/06/2014 a las 11:05
  #3 (permalink)  
Antiguo 15/06/2014, 11:49
Avatar de 00israel  
Fecha de Ingreso: enero-2002
Ubicación: madrid
Mensajes: 636
Antigüedad: 22 años, 1 mes
Puntos: 5
Respuesta: no se el porque de este margen, en este div?

bueno, pues realmente no se porque, pero he conseguido solucionarlo flotando la imagen a la izquierda:

Código HTML:
img{
   width: 100%;
   float: left;
}
  #4 (permalink)  
Antiguo 15/06/2014, 13:14
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: no se el porque de este margen, en este div?

Es un problema que tienen los elementos en linea, una imagen por defecto es un elemento en linea. Puedes ponerlo como elemento de bloque:

Código CSS:
Ver original
  1. .img_left img {
  2.   display: block;
  3. }

Flotándolo se soluciona porque display es computado en ese caso con el valor block.

Etiquetas: background, color, html, margen, width
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 05:40.