Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 01 de Febrero 2016, 02:32
-
Hola!! A todos. Pongo el ejercicio porque no estoy seguro:
Código html:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01035DB.css">
</head>
<body>
<div id="wrapper">
<div class="peque" id="caja1"></div>
<div class="peque" id="caja2"></div>
<div class="peque" id="caja3"></div>
<div class="peque" id="caja4"></div>
<div class="peque" id="caja5"></div>
<div class="peque" id="caja6"></div>
<div class="peque" id="caja7"></div>
<div class="peque" id="caja8"></div>
<div class="texto">Div texto</div>
Curso CSS aprenderaprogramar.com
<div class="grande" id="caja9"></div>
<div class="grande" id="caja10"></div>
<div class="grande" id="caja11"></div>
</div>
</body>
</html>
Código css:
/* Ejercicio 1035*/
#wrapper {clear:both; background-color:#DEB887;
float:left;}
.peque {margin-right:5px; height:50px; width:50px;
float:left;}
.grande{height:200; width:50; margin-right:5px;
float:right;}
.texto{background-color:yellow;
margin-top:20px; margin-bottom:20px;}
#caja1{background-color:aqua;}
#caja2{background-color:azure;}
#caja3{background-color:beige;}
#caja4{background-color:bisque;}
#caja5{background-color:khaki;}
#caja6{background-color:gold;}
#caja7{background-color:tan;}
#caja8{background-color:teal;}
#caja9{background-color:lime;}
#caja10{background-color:silver;}
#caja11{background-color:linen;}
Un saludo!!
-
Buenas Boletos
No tienes bien resuelto el ejercicio. El ejercicio pedía "Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño...". En tu código realmente no estás usando clear (de hecho si lo eliminas el resultado es el mismo).
La idea es crear los distintos elementos que proponen los apartados uno debajo de otro (usando la propiedad clear) evitando que se produzcan superposiciones de lo que indica cada uno de los apartados. Inténtalo, si tienes problemas mira otras propuestas en los foros por ejemplo https://www.aprenderaprogramar.com/foros/index.php?topic=3737.0
Salu2
-
Hola! Ogramar. Disculpa no entendí que los diferentes apartados deberían ir separados.
Ahí va el ejercicio corregido:
html:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01035DB.css">
</head>
<body>
<div id="wrapper">
<div class="peque" id="caja1"></div>
<div class="peque" id="caja2"></div>
<div class="peque" id="caja3"></div>
<div class="peque" id="caja4"></div>
<div class="peque" id="caja5"></div>
<div class="peque" id="caja6"></div>
<div class="peque" id="caja7"></div>
<div class="peque" id="caja8"></div>
<div id="limpiador"></div>
<div class="texto">Div texto</div>
<div class="grande" id="caja9"></div>
<div class="grande" id="caja10"></div>
<div class="grande" id="caja11"></div>
<div id="limpiador"></div>
Curso CSS aprenderaprogramar.com
</div>
</body>
</html>
css:
/* Ejercicio 1035*/
#wrapper {background-color:#DEB887;}
#limpiador{clear:both;}
.peque {margin-right:5px; height:50px; width:50px;
float:left;}
.grande{height:200px; width:50px; margin-right:5px;
float:right;}
.texto{background-color:yellow;
margin-top:20px; margin-bottom:20px;}
#caja1{background-color:aqua;}
#caja2{background-color:azure;}
#caja3{background-color:beige;}
#caja4{background-color:bisque;}
#caja5{background-color:khaki;}
#caja6{background-color:gold;}
#caja7{background-color:tan;}
#caja8{background-color:teal;}
#caja9{background-color:lime;}
#caja10{background-color:silver;}
#caja11{background-color:linen;}
Espero haber cogido la idea. Un saludo!
-
Buenos días
El ejercicio está bien:
Ten en cuenta que cuando se da un valor como 200x50 píxeles esto normalmente se refiere a anchoxalto, por tanto debería ser width:200px; y height: 50px; y no al revés.
El color #DEB887 se pedía para el último div, no como fondo para todos los div. Por ello debería delimitarse.
Un id no debe repetirse porque su finalidad es que sea único, igual que un número de documento nacional de identidad no puede repetirse. Por ello limpiador sería preferible definirlo como class en lugar de como id
Con estos cambios el código quedaría (uniendo html y css en un solo archivo por simplificar):
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
#final {background-color:#DEB887;}
.limpiador{clear:both;}
.peque {margin-right:5px; height:50px; width:50px;
float:left;}
.grande{ width:200px; height:50px; margin-right:5px;
float:right;}
.texto{background-color:yellow;
margin-top:20px; margin-bottom:20px;}
#caja1{background-color:aqua;}
#caja2{background-color:azure;}
#caja3{background-color:beige;}
#caja4{background-color:bisque;}
#caja5{background-color:khaki;}
#caja6{background-color:gold;}
#caja7{background-color:tan;}
#caja8{background-color:teal;}
#caja9{background-color:lime;}
#caja10{background-color:silver;}
#caja11{background-color:linen;}
</style>
</head>
<body>
<div id="wrapper">
<div class="peque" id="caja1"></div>
<div class="peque" id="caja2"></div>
<div class="peque" id="caja3"></div>
<div class="peque" id="caja4"></div>
<div class="peque" id="caja5"></div>
<div class="peque" id="caja6"></div>
<div class="peque" id="caja7"></div>
<div class="peque" id="caja8"></div>
<div class="limpiador"></div>
<div class="texto">Div texto</div>
<div class="grande" id="caja9"></div>
<div class="grande" id="caja10"></div>
<div class="grande" id="caja11"></div>
<div class="limpiador"></div>
<div id="final">
Curso CSS aprenderaprogramar.com
</div>
</div>
</body>
</html>
Saludos