Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Lorenzo31 en 17 de Febrero 2016, 13:09
-
Buenos días, dejo mi respuesta al ejercicio y una pregunta.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="estilos131D.css"/>
</head>
<body>
<div id="primera"></div>
<div id="segunda"></div>
<div id="tercera"></div>
<div id="cuarta"></div>
</body>
</html>
estilos131D.css
/*Estilos CSS Ejercicio131D.css*/
body {width:90%; margin:auto; border:solid;}
div {width:400px; height:400px; margin:40px; padding:40px; display:inline-block;}
#primera {border:dashed 2px #F4FA58; background-color:#FF0000; background-image:url(http://tienda.bricogeek.com/2860-home_default/matriz-de-led-i2c-8x8-bicolor-pixel-cuadrado.jpg);
background-repeat:no-repeat; background-position:50% 50%;}
#segunda {border:solid 3px #0101DF; background-color:#00FF00; background-image:url(http://www.movieonmovil.com/data/thumbf/Kids/Little_Child.jpg);
background-repeat:no-repeat; background-position:center center;}
#tercera {border:dotted 1px #81F7F3; background-color:#FFFF00; background-image:url(http://www.eleconomista.es/CanalPDA/files/pixels-580px-220x135.png);
background-repeat:no-repeat; background-position:50% 50%;}
#cuarta {border: groove 5px #045fb4; background-color:#FA58f4; background-image:url(http://ecx.images-amazon.com/images/I/61PFBsQeh9L._SL246_SX190_CR0,0,190,246_.jpg);
background-repeat:no-repeat; background-position:50%;}
La pregunta que quiero hacer, es que en anteriores entregas, y comprobandolo me funciona (pero en esta ocasión no logro hacerlo) con
body {width85%; margin:auto;}
deberia alinearme las cajas interiores centradas con el body pero no lo logro hacer,
hago algo mal? o lo que deberia hacer es un div global para las cuatro imagenes y ese es el que saldria centrado con el body?
Cuando le pongo un div general a todos los divs, y pongo un 100% de width se me desborda del body, puede que sea por el border del body que pongo, pero no acaba de cuadrar ni a 94%, dejo el codigo para más facil visualización.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="estilos131D.css"/>
</head>
<body>
<div id="global">
<div id="primera"></div>
<div id="segunda"></div>
<div id="tercera"></div>
<div id="cuarta"></div>
</div>
</body>
</html>
estilos131D.css
/*Estilos CSS Ejercicio131D.css*/
body {width:90%; margin:auto; border:solid;}
div {width:400px; height:400px; margin:40px; padding:40px; display:inline-block;}
#global { background-color:grey; margin:auto; width:94%; height:100%;}
#primera {border:dashed 2px #F4FA58; background-color:#FF0000; background-image:url(http://tienda.bricogeek.com/2860-home_default/matriz-de-led-i2c-8x8-bicolor-pixel-cuadrado.jpg);
background-repeat:no-repeat; background-position:50% 50%;}
#segunda {border:solid 3px #0101DF; background-color:#00FF00; background-image:url(http://www.movieonmovil.com/data/thumbf/Kids/Little_Child.jpg);
background-repeat:no-repeat; background-position:center center;}
#tercera {border:dotted 1px #81F7F3; background-color:#FFFF00; background-image:url(http://www.eleconomista.es/CanalPDA/files/pixels-580px-220x135.png);
background-repeat:no-repeat; background-position:50% 50%;}
#cuarta {border: groove 5px #045fb4; background-color:#FA58f4; background-image:url(http://ecx.images-amazon.com/images/I/61PFBsQeh9L._SL246_SX190_CR0,0,190,246_.jpg);
background-repeat:no-repeat; background-position:50%;}
-
Buenos días, estás utilizando la propiedad display, que cronológicamente con el programa del curso todavía no debe usarse. El ejercicio está bien.
El problema que comentas no entiendo bien lo que quieres decir, elimina margin:40px; padding:40px; y comprueba lo que ocurre, puede que te oriente.
Saludos