Autor Tema: Diseño web CSS con dos, tres o mas columnas. Uso de float problema % CU01036D  (Leído 3014 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!! les dejo mi ejercicio CU01036D del tutorial básico de desarrollo web con CSS. Aunque a mi se me ve bastante bien, espero que los que saben, me marquen todos los errores u HORRORES que cometí  ;)

Saludos!!!!!

CU01036D.html
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Diseño web CSS con dos, tres o mas columnas - Curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Clear CSS Float" />
    <meta name="keywords" content="curso, aprender a programar, html, css, clear, float,(CU01036D)" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01036D.css"/>
  </head>
  <body>
    <div class="cabecera">
      <p>Bienvenidos a aprenderaprogramar.com</p>
    </div>
    <div class="cuerpo">
      <div id="C1">
        <br/>
        <p>Menu</p>
        <p><a href="#" title="Los cursos que brindamos">- Cursos</a></p>
        <p><a href="#" title="La vida no solo es trabajo">- Humor</a></p>
        <p><a href="#" title="No somos chismosos, pero...">- Divulgación</a></p>
      </div>
      <div id="C2">
        <div>Conoce las ultimas novedades del lenguaje JavaScript.</div>
        <div>Artículo sobre GIMP, un programa de software libre para el diseño gráfico.</div>
      </div>
      <div id="C3">
        <br/><br/><br/><br/>
        Espacio reservado para publicidad
      </div>
    </div>
    <div class="pie">
      <div><a href="#" title="Prometemos responder a la brevedad...">Contacta con nosotros</a></div>
      <div>Aviso Legal</div>
    </div>
    <div class="limpiador"></div>
    Se supone que aca no va mas texto :-)
  </body>
</html>

CU01036D.css
Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega Nº 36
aprenderaprogramar.com (CU01036D)*/

*{
  font-family: Arial, sans-serif;
}

body{
  background-color: beige;
}

div{
  text-align: center;
}

a{
  text-decoration: none;
}

.cabecera{
  width: 100%;
  height: 50px;
  background-color: #DEB887;
  padding-top: 5px;
}

.cuerpo{
  width: 100%;
  height: 200px;
}

#C1{
  background-color: white;
  float: left;
  width: 25%;
  height: 200px;
}

#C2{
  background-color: green;
  float:left;
  width: 50%;
  height: 200px;
}
#C2 div:nth-child(1){height: 60px; background-color: #ADD8E6;padding: 20px;}
#C2 div:nth-child(2){height: 60px; background-color: #90EE90;padding: 20px;}

#C3{
  background-color: white;
  float: left;
  width: 25%;
  height: 200px;
}

.pie{
  width: 100%;
  height: 50px;
}

.pie a{color: black;}
.pie div:nth-child(1){width: 50%;float: left;background-color: #DDA0DD;padding: 15px 0px;}
.pie div:nth-child(2){width: 50%; float: left;background-color: white;padding: 15px 0px;}

.limpiador{clear:both;padding: 0px;border-style: none;}
« Última modificación: 14 de Septiembre 2016, 09:27 por Alex Rodríguez »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Diseño web CSS con dos, tres o mas columnas (CU01036D)
« Respuesta #1 en: 10 de Septiembre 2016, 12:11 »
Hola hymsoft.

Muy buena solución, pero faltan los bordes, ¿no?, lo ¿probaste con ellos?

En los estilos que aplicas en la parte de "#C2" y ".pie", podrías ahorrarte algo de código que estás repitiendo. En este caso son solo dos repeticiones, pero tienes que pensar siempre en que en vez de afectar a dos "div" pudiese afectar a 30.

Saludos. ;D

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Re:Diseño web CSS con dos, tres o mas columnas. Uso de float. (CU01036D)
« Respuesta #2 en: 11 de Septiembre 2016, 22:35 »
Hola Pedro, buenas tardes, vamos por parte :-)

Como no había especificación de grosor ni color en los bordes, supuse que eran solo para ver la maquetación.

Ahi le coloque bordes, pero fuaa se desarmo todo al trabajar con % se me complico un poco, así que lo hice lo mejor posible. me falta un pelin para llegar a alinear todos los bordes, CONSULTA se puede poner 24,85??? porque esos 05 son los que me faltan, jajajajaja.

Iba a correjir lo de la repeticion que me decias, pero ahora como tambien se modifican los % ahi, como que ya no se justifica, pero si que lo hice en mi solución de los bordes...

el css actualizado... Pero antes del código: Esta buenisimo ver unos menues como los que tiene la página de aprenderaprogramar.com y saber como hacerlos solo con CSS y lo aprendido hasta aca  ;) Muchas Gracias!!!!!

CU01036D.css

Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega Nº 36
aprenderaprogramar.com (CU01036D)*/

*{
  font-family: Arial, sans-serif;
}

body{
  background-color: beige;
}

div{
  text-align: center;
}

a{
  text-decoration: none;
}

.cabecera{
  width: 100%;
  height: 50px;
  background-color: #DEB887;
  padding-top: 5px;
}

.cuerpo{
  width: 100%;
  height: 200px;
}

#C1{
  background-color: white;
  float: left;
  width: 24.90%;
  height: 200px;
}

#C2{
  background-color: green;
  float:left;
  width: 49.9%;
  height: 200px;
}
#C2 div:nth-child(1){height: 60px; background-color: #ADD8E6;padding: 20px;}
#C2 div:nth-child(2){height: 59px; background-color: #90EE90;padding: 20px;}

#C3{
  background-color: white;
  float: left;
  width: 24.9%;
  height: 200px;
}

.pie{
  width: 100%;
  height: 50px;
}

/* atributos para que se vean los margenes */

.pie a{color: black;}
.pie div:nth-child(1){width: 49.8%;float: left;background-color: #DDA0DD;padding: 15px 0px;}
.pie div:nth-child(2){width: 49.9%; float: left;background-color: white;padding: 15px 0px;}

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

/* para que se vean los bordes */
.cabecera{border-style: solid;border-width: 1px 1px 1px 1px;}
#C1,.pie div:nth-child(1){border-style: solid;border-width: 0px 1px 1px 1px}
#C2,#C3,.pie div:nth-child(2){border-style: solid;border-width: 0px 1px 1px 0px}
#C2 div:nth-child(2){border-style: solid;border-width: 1px 0px 1px 0px}

"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Diseño web CSS con dos, tres o mas columnas. Uso de float. (CU01036D)
« Respuesta #3 en: 12 de Septiembre 2016, 09:42 »
Buenas.

Te comenté lo de los bordes para que vieras las dificultades que aparecen. Puedes dar tu ejercicio como bueno, según vayas avanzando en el curso verás más formas de solucionar estos problemas.

Te dejo tú código con algún retoque.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseño web CSS con dos, tres o mas columnas - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Clear CSS Float" />
<meta name="keywords" content="curso, aprender a programar, html, css, clear, float,(CU01036D)" />   
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<style>
/* Estilos aplicados al ejercicio entrega Nº 36
aprenderaprogramar.com (CU01036D)*/

*{
font-family: Arial, sans-serif;
}

body{
background-color: beige;
}

div{
text-align: center;
}

a{
text-decoration: none;
}

#contenedor{
border: solid 1px black;
}

.cabecera{
border-bottom: solid 1px black;
width: 100%;
height: 50px;
background-color: #DEB887;
padding-top: 5px;
}

.cuerpo{
border-bottom: solid 1px black;
width: 100%;
height: 200px;
}

#C1{
border-right: solid 1px black;
background-color: white;
float: left;
width: 24.9%;
height: 200px;
}

#C2{
background-color: green;
float:left;
width: 50%;
height: 200px;
}
#C2 div:nth-child(1){height: 59px; background-color: #ADD8E6;padding: 20px;border-bottom: solid 1px black;}
#C2 div:nth-child(2){height: 60px; background-color: #90EE90;padding: 20px;}

#C3{
border-left: solid 1px black;
background-color: white;
float: left;
width: 24.9%;
height: 200px;
}

.pie{
width: 100%;
height: 50px;
}
.pie a{color: black;}
.pie div{
width: 49.9%;
height: 100%;
float: left;
}
.pie div:nth-child(1){
border-right: solid 1px black;
background-color: #DDA0DD;
}
.pie div:nth-child(2){
background-color: white;
}
.limpiador{
clear:both;
padding: 0px;
border-style: none;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="cabecera">
<p>Bienvenidos a aprenderaprogramar.com</p>
</div>
<div class="cuerpo">
<div id="C1">
<br/>
<p>Menu</p>
<p><a href="#" title="Los cursos que brindamos">- Cursos</a></p>
<p><a href="#" title="La vida no solo es trabajo">- Humor</a></p>
<p><a href="#" title="No somos chismosos, pero...">- Divulgación</a></p>
</div>
<div id="C2">
<div>Conoce las ultimas novedades del lenguaje JavaScript.</div>
<div>Artículo sobre GIMP, un programa de software libre para el diseño gráfico.</div>
</div>
<div id="C3">
<br/><br/><br/><br/>
Espacio reservado para publicidad
</div>
</div>
<div class="pie">
<div id="pie1"><a href="#" title="Prometemos responder a la brevedad...">Contacta con nosotros</a></div>
<div>Aviso Legal</div>
</div>
<div class="limpiador"></div>
</div>
Se supone que aca no va mas texto :-)
</body>
</html>

También puedes ver el siguiente enlace:
https://www.aprenderaprogramar.com/foros/index.php?topic=1647.msg8621#msg8621

Saludos y a seguir avanzando. ;D

 

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".