Autor Tema: Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D) (Leído 6086 veces)

jimmorrison · « **en:** 26 de Abril 2015, 03:47 »

Enunciado

Citar

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 el aspecto indicado en el enunciado del ejercicio.

Nota: los anchos de los elementos serán del 100 % disponible si es todo el ancho (por ejemplo <<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Menú>>) y del 50 % si es una columna doble (por ejemplo <<Artículo sobre Gimp>>).

Respuesta - 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="css/diseño_columnas.css">
</head>
<body>

<body>
<div id="cuerpo">
<header id="cabecera">
Bienvenidos a aprenderaprogramar.com
</header>
<nav>
<ul>
<li>Menú</li>
<li>-Cursos</li>
<li>-Humor</li>
<li>-</li>
<li>Divulgacion</li>
</ul>
</nav>
<section>
<article id="articulo_1" class="articulo">
Conoce las últimas novedades del lenguaje JavaScript.
</article>
<article id="articulo_2" class="articulo">
Artículo sobre Gimp, un programa de software libre para el diseño gráfico.
</article>
</section>
<aside>
Espacio reservado para publicidad
</aside>
<footer>
Contacta con nosotros <a 

href="https://www.aprenderaprogramar.com/">www.aprenderaprogramar.com</a>
</footer>
<div id="aviso">
Aviso legal
</div>
</div>
</body>
</html>

css

Código: [Seleccionar]

*{
margin: 0px;
padding: 0px;
}

#cuerpo{
text-align: center;
text-family: arial;
}

header{
border: solid black;
border-width: 5px;
background-color: #DEB887;
width: 100%;
box-sizing: border-box;
padding: 20px;
}

nav{
border-right: 5px solid black;
border-bottom: 5px solid black;
border-left: 5px solid black;
width: 25%;
float: left;
box-sizing: border-box;
}

section{
border-right: 5px solid black;
border-bottom: solid black 5px;
background-color: red;
width: 50%;
height: 95px;
float: left;
box-sizing: border-box;
}

#articulo_1{
background-color: #ADD8E6;
border-bottom: solid black 5px;
padding: 11px; 
}

#articulo_2{
padding: 14px; 
background-color: #90EE90;
}

aside{
width: 25%;
height: 95px;
border-bottom: solid black 5px;
border-right: solid black 5px;
float: left;
box-sizing: border-box;
}

footer{
width: 50%;
float: left;
background-color: #DDA0DD;
box-sizing: border-box;
border-right: solid black 5px;
border-bottom: solid black 5px;
border-left: solid black 5px;
padding: 10px;
}

#aviso{
width: 50%;
float: left;
border-bottom: solid black 5px;
border-right: solid black 5px;
box-sizing: border-box;
padding: 10px;
}

me podrian apoyar con este tema por favor, no me queda claro todavia lo de porcentajes.

en el ejercicio combine porcentaje con pixeles , en la altura no se como basarme en porcentaje , mi ejercicio creo esta mal podrian acesorarme para mejorar por favor

saludos

Mastermind · « **Respuesta #1 en:** 26 de Abril 2015, 22:27 »

Hola tienes repetida la etiqueta body

Tienes varias cosas que tener en cuenta cuando crees un diseño de este tipo:

- Si usas etiquetas como aside, nav, section... puede que el navegador te genere alguna distorsión, para hacer este ejercicio veo mejor hacerlo todo con div

- Tienes que pensar siempre que los porcentajes están referidos a la caja contenedora. Si la caja contenedora tiene un 50% de width y a otra caja dentro de la contenedora le aplicas otro 50% de width, en realidad tienes un 25% de la pantalla total (la mitad del 50%)

- Cuando quieras romper que los elementos float tienes que hacerlo de alguna manera, yo lo he hecho con un div class="limpia"

- En los anchos y altos tienes que tener en cuenta el borde

Este sería el código con algunos cambios aunque te recomiendo que lo hagas con div:

Código: [Seleccionar]

<html> <head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}

#cuerpo{
text-align: center;
text-family: arial;
}

header{
border: solid black;
border-width: 5px;
background-color: #DEB887;
width: 100%;
box-sizing: border-box;
padding: 20px;
}

nav{
border-right: 5px solid black;
border-bottom: 5px solid black;
border-left: 5px solid black;
width: 25%;
float: left;
box-sizing: border-box;
height:150px;
}

section{
float: left;
border-right: 5px solid black;
border-bottom: solid black 5px;
height:145px;
width: 50%;
/*

background-color: red;

height: 95px;

box-sizing: border-box;*/
}



#articulo_1{
background-color: #ADD8E6;
border-bottom: solid black 1px;
width:50%;
height:50%;
}

#articulo_2{
background-color: #90EE90;
width:50%;
height:50%;
}

aside{
width: 24.5%;
height: 150px;
border-bottom: solid black 5px;
border-right: solid black 5px;
float: left;
box-sizing: border-box;
}

#contacta{
width: 50%;
float: left;
background-color: #DDA0DD;
box-sizing: border-box;
border-right: solid black 5px;
border-bottom: solid black 5px;
border-left: solid black 5px;
padding: 10px;
}

#aviso{
width: 50%;
float: left;
border-bottom: solid black 5px;
border-right: solid black 5px;
box-sizing: border-box;
padding: 10px;
}

.limpia {clear:both;}

</style>
</head>
<body>

<div id="cuerpo">
<header id="cabecera">
Bienvenidos a aprenderaprogramar.com
</header>
<div id="contenedor_central">
<nav>
<ul>
<li>Menú</li>
<li>-Cursos</li>
<li>-Humor</li>
<li>Tutoriales</li>
<li>Divulgacion</li>
</ul>
</nav>
<section>
<article id="articulo_1" class="articulo">
Conoce las últimas novedades del lenguaje JavaScript.
</article>
<article id="articulo_2" class="articulo">
Artículo sobre Gimp, un programa de software libre para el diseño gráfico.
</article>
</section>
<aside>
Espacio reservado para publicidad
</aside>
</div>
<div class="limpia"></div>
<footer>
<div id="contacta">
Contacta con nosotros <a href="https://www.aprenderaprogramar.com/">www.aprenderaprogramar.com</a>
</div>
<div id="aviso">
Aviso legal
</div>
</footer>

</div>
</body>
</html>

Saludos

jimmorrison · « **Respuesta #2 en:** 27 de Abril 2015, 05:49 »

Mastermind gracias por la respuesta

respeto a aside, nav , section puse estas etiquetas por lo que leei fueron creadas para utilizarlas en la estructura del documento html y no usar tantos div.

me podrias decir por que se distorsiona ? no comprendo que me tratas de enseñar

en la parte de los width ya entiendo a que te refieres en los porcentajes me falto utilizar mejor los porcentajes y en la altura vi que usaste al igual que yo pixeles

hay alguna forma de usar porcentajes en la altura?

sobre div class="limpia" tienes mucha razon la omiti por completo
ademas encontre otra forma de utilizar el limpiar lla caja overflow: hidden;

box-sizing: border-box;
sobre esta propiedad leei que sirve para especificar o forzar a la caja con el ancho y altura que se le asignan a la caja, en un tutorial vi que aveces excede lo que especificamos por los bordes paddin y margin.

Mastermind · « **Respuesta #3 en:** 27 de Abril 2015, 09:48 »

Hola lo que me refería es que el navegador a veces introduce cosas, por ejemplo si usas <h1> puede que introduzca un margin o introduce un tamaño de fuente por defecto... No estoy seguro de si con esas etiquetas introduce algo, seguramente por lo que dices no introduzca nada y entonces podrías hacerlo usándolas sin problema. Porcentajes en la altura no se suelen usar, porque la altura de una página web realmente no es la pantalla, sino que después tienes las barras de scroll, por eso en alturas es más frecuente usar pixeles.

Sobre la propiedad box-sizing, en mozilla developer puedes leer que es una propiedad experimental, no compatible con muchos navegadores, por eso pienso que no es recomendable usarla porque puede que te funcione a ti en tu navegador pero a otra persona puede no funcionarle, https://developer.mozilla.org/es/docs/Web/CSS/box-sizing

Saludos!

jimmorrison · « **Respuesta #4 en:** 27 de Abril 2015, 17:26 »

entendido gracias Mastermind

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

Noticias:

Autor Tema: Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D) (Leído 6086 veces)

jimmorrison

Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D)

Mastermind

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

jimmorrison

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

Mastermind

Re:Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D)

jimmorrison

Re:Diseño web CSS dos, tres, cuatro columnas con float Maquetar una web (CU01036D)

Preguntas y respuestas