Autor Tema: Ejemplo float del Tutorial básico del programador web: CSS desde cero. CU01036D (Leído 2696 veces)

3skai · « **en:** 01 de Diciembre 2016, 04:04 »

Hola buenas noches a todos! Espero se encuentren bien!

.

Aqui el ejercicio resuelto de la entrega nro 36 del programador web CSS.

Enunciado:

Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto.

Código: [Seleccionar]

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Daniel" />
  <meta name="description" content="Ejercicio" />
  <meta name="keywords" content="CU01036D" /> 
  <meta name="robots" content="index, follow" />
  <link rel="stylesheet" type="text/css" href="CU01036D.css" />
  <title>Ejercicio De La Unidad</title> 
</head>
<body>
  <div class="welcome">Bienvenidos a aprenderaprogramar.com</div>  
  <div class="menu">Menú:<br />
  -Cursos<br />
  -Humor<br />
  -Divulgación<br /></div>
  <div class="news">Conoce las últimas novedades del lenguaje JavaScript.</div>
  <div class="article">Artículo sobre Gimp, un programa de software libre para el diseño gráfico </div>
  <div class="publicidad"><br/> Espacio reservado para publicidad</div>
  <div class="limpiador"></div>
  <div class="contact">Contacta con nosotros</div>
  <div class="legal">Aviso legal</div>
</body>
</html>

Y el css.

Código: [Seleccionar]

/*Ejercicio de la actividad*/
body {width:700px;}

div {border-style: groove; border-width:1px;text-align:center; background-color: #FEED9A;}

.welcome {background-color:#DEB887;}

.news {width:479px; position:fixed; left:100px; height:35px; background-color:#ADD8E6;}

.article {width:479px; position:fixed; left:100px; top:65px; height:63px; background-color:#90EE90;}

.menu {width:90px; height:100px; float:left;}

.publicidad {width:125px; height:100px; float: right;}

.contact {float:left; width:300px; background-color:#DDA0DD;}

.legal {float:right; width:396px;}

.limpiador {clear:right; padding:0; border-style:none;}

Espero su respuesta! Y gracias por el tiempo dedicado!
Feliz semana!

pedro,, · « **Respuesta #1 en:** 01 de Diciembre 2016, 20:45 »

Hola 3skai.

El ejercicio está bien resuelto y da el resultado esperado.

Ya que usas la etiqueta "<!DOCTYPE>" deberías especificar el tipo de documento, para que cumpla con el estándar xhtml, podrías dejarla de la siguiente forma "<!DOCTYPE html>"

Sobre el ejercicio también recomendarte que intentes resolverlo usando porcentajes como pide el ejercicio y así comprobar la dificultad que esto tiene.

Saludos.

3skai · « **Respuesta #2 en:** 03 de Diciembre 2016, 04:13 »

Ok Pedro! voy a por ello, intentare usarlo con %.
Gracias y saludos
Feliz fin de semana

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: