[SOLUCIONADO] Problemas con img y div

carlos__333 · #1 (**permalink**) 06/08/2015, 14:25

Buenas tengo dos problemas el primero radica en q tengo una img y las dimensiones de ella son inmensas quiero ponarla como img de arriba aki el codigo cm lo tengo

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="center_div" >
		<div class="header">
	    	<div class="banner"><img src="img/venbanner.jpg"  /></div>
	    	</div>
	    </div>
	    <div class="b-content">
		    <div class="b-menu">
                        CONTIDO 1 PARA EL MENU
		    </div>
		    <div id="b-a">
		    	CONTENIDO 2
		    </div>
	    </div>
	</div>
</body>
</html>

mi css lo tengo

.center_div{
background:#FFF;
color:#000;
width: 80%;
margin:0 auto;
border-radius: 15px;
border:1px solid black;
}
.header{
width: 100%;
height: auto;
}

.banner img{
width:100%;
height: 40%;
padding:5%;
box-sizing:border-box;
display: block;
margin-left: auto;
margin-right: auto;
border:none;
}

bien ahora no se como hacer para q esa img tome undas medidas proporcionales al tamaño de la pantalla pq se q si lo coloco en pixels esta listo la pongo en las dimensioes q desee sin embargo me gustaria hacer algo mas responsive me darian alguna alternativa??

el segundo punto es q en ese mismo codigo html hay dos div de contenido 1 y 2 ambos los kiero poner uno al lado de otro sin embargo aparecen debajo buscando en internet lei q la propiedad float me ayudaria a posicionarlo en efecto lo hiso pero ests div salen del contendor mas grandde es decir quedan por afuera... no encuentro como hacer q kede uno al lado del otro y dentro del contenedor, muchas gracias y espero sus comentarios sean productivos

fede5426 · #2 (**permalink**) 06/08/2015, 18:40

Para lo de la imagen, si querés que sea responsive, una forma es usar "max-width" en lugar de "width".. Otra es usar porcentajes, y otra es cambiar el tamaño con media queries, segun el ancho del dispositivo.

Y para lo de colocar un div al lado del otro, se puede de varias formas, flotando los elementos como decis vos es una, para que no se salgan del "contenedor grande" tenes que ponerle "overflow:hidden;" a ese contenedor. O crear un div vacio debajo de los otros dos que flotaste y colocarle "clear:both;".

Saludos

carlos__333 · #3 (**permalink**) 06/08/2015, 18:44

Cita:

Iniciado por fede5426

Para lo de la imagen, si querés que sea responsive, una forma es usar "max-width" en lugar de "width".. Otra es usar porcentajes, y otra es cambiar el tamaño con media queries, segun el ancho del dispositivo.

Y para lo de colocar un div al lado del otro, se puede de varias formas, flotando los elementos como decis vos es una, para que no se salgan del "contenedor grande" tenes que ponerle "overflow:hidden;" a ese contenedor. O crear un div vacio debajo de los otros dos que flotaste y colocarle "clear:both;".

Saludos

overflow:hidden cn esto funciono de manera perfecta gracias