Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: jimmorrison en 26 de Abril 2015, 03:47
-
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 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
<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
*{
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
-
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:
<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 ;)
-
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.
-
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!
-
entendido gracias Mastermind