« anterior próximo »
Páginas: [1]

Autor Tema: CSS y HTML: alinear varios div en horizontal Propiedades float y clear CU01035B  (Leído 4524 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
CSS y HTML: alinear varios div en horizontal Propiedades float y clear CU01035B
« en: 01 de Febrero 2016, 02:32 »
Hola!! A todos. Pongo el ejercicio porque no estoy seguro:


Código html:

Código: [Seleccionar]
<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:

Código: [Seleccionar]
/* 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!!
« Última modificación: 03 de Febrero 2016, 09:10 por Ogramar »
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2662
    • Ver Perfil
Re:CSS y HTML: alinear varios div en horizontal Propiedades float y clear CU01035B
« Respuesta #1 en: 03 de Febrero 2016, 09:10 »
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
En línea

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Re:CSS y HTML: alinear varios div en horizontal Propiedades float y clear CU01035B
« Respuesta #2 en: 08 de Febrero 2016, 20:10 »
Hola! Ogramar. Disculpa no entendí que los diferentes apartados deberían ir separados.
Ahí va el ejercicio corregido:


html:

Código: [Seleccionar]
<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:

Código: [Seleccionar]
/* 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!
« Última modificación: 10 de Febrero 2016, 09:30 por Mario R. Rancel »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:CSS y HTML: alinear varios div en horizontal Propiedades float y clear CU01035B
« Respuesta #3 en: 10 de Febrero 2016, 09:32 »
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):

Código: [Seleccionar]
<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
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".