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

hymsoft · « **en:** 09 de Septiembre 2016, 16:47 »

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;}

pedro,, · « **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.

hymsoft · « **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}

pedro,, · « **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.

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

Noticias:

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

hymsoft

Diseño web CSS con dos, tres o mas columnas. Uso de float problema % CU01036D

pedro,,

Re:Diseño web CSS con dos, tres o mas columnas (CU01036D)

hymsoft

Re:Diseño web CSS con dos, tres o mas columnas. Uso de float. (CU01036D)

pedro,,

Re:Diseño web CSS con dos, tres o mas columnas. Uso de float. (CU01036D)

Preguntas y respuestas