Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 04 de Septiembre 2017, 19:22
-
Buenas tardes. Este es el enunciado del ejercicio CU01036D del curso básico de desarrollo web con CSS desde cero:
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:
(https://i.imgur.com/izxKfYo.png)
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="Diseños web css - aprenderaprogramar.com"/>
<meta name="keywords" content="diseño, css, columnas, float, cursos, aprenderaprogramar.com, CU01035D"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01036B.css"/>
</head>
<body>
<div id="cabecera">Bienvenidos a aprenderaprogramar.com</div>
<div id="menu">
<p>Menú</p>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<div id="a1">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="a2">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
<div id="publicidad">Espacio reservado para publicidad</div>
<div id="contacto">Contacta con nosotros</div>
<div id="aviso">Aviso legal</div>
</body>
</html>
Acá la hoja de estilos css:
*{
font-family: arial;
margin:0;
padding:0;
}
div{
border: 2px solid;
padding:4px;
}
#contenedor{
margin: 0 auto;
}
#cabecera{
margin: 2px 2px 0.5px 2px;
border-bottom-width:thin;
width:99%;
background-color:#DEB887;
text-align:center;
}
#menu{
width:20%;
text-align:center;
float:left;
border-width:thin;
padding:15px;
height:126px;
}
#menu p{
margin:4px 0 0 4px;
}
#a1{
width:48.54%;
float:left;
margin-left:0.4px;
border-width:thin;
padding:30px;
text-align:center;
background-color:#ADD8E6;
}
#a2{
width:48.54%;
margin-left:0.4px;
margin-top:0.9px;
float:left;
border-width:thin;
padding:30px;
text-align:center;
background-color:#90EE90;
}
#publicidad{
width:22.1%;
text-align:center;
float:right;
border-width:thin;
padding:15px;
position:relative; bottom:79px;
height:126px;
}
#contacto{
float:left;
width:48.7%;
text-align:center;
position:relative;bottom:1px;
border-width:thin;
background-color:#DDA0DD;
}
#aviso{
float:right;
width:50%;
position:relative; left:335px; bottom:28px;
border-width:thin;
text-align:center;
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola, tú ejercicio esta bien. Pero algunas cajas se salen de dicho lugar.
Aquí te dejo una posible solución: https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775 (https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775)
Un saludo. :) :)
-
Buenas noches. A continuación, la corrección del código:
Acá el código html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="Diseños web css - aprenderaprogramar.com"/>
<meta name="keywords" content="diseño, css, columnas, float, cursos, aprenderaprogramar.com, CU01035D"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01036B.css"/>
</head>
<body>
<div id="contenedor">
<header>
<p>Bienvenidos a aprenderaprogramar.com</p>
</header>
<div id="cuerpo">
<div id="menu">
<p>Menú</p>
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul>
</div>
<div id="c1">
<p>Conoce las últimas novedades del lenguaje JavaScript.</p>
</div>
<div id="c2">
<p>Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</p>
</div>
<div id="publi">
<p>Espacio reservado para publicidad</p>
</div>
</div>
<footer>
<div id="contacto">
<p>Contacta con nosotros</p>
</div>
<div id="aviso">
<p>Aviso legal</p>
</div>
</footer>
</div>
</body>
</html>
Acá la hoja de estilos CSS:
/*Estilos para el ejercicio CU01036D*/
*{
margin:0;
padding:0;
}
header{
margin:10px 10px 1px;
padding:25px;
text-align:center;
border:solid thin black;
background-color:#DEB887;
}
#menu{
float:left;
text-align:center;
margin:-1px 9.5px;
border:solid thin black;
width:30%;
height:159px;
line-height:1.5;
}
#menu p{
margin-top:20px;
}
#c1{
float:left;
text-align:center;
width:39.9%;
margin:-1px -10px;
border:solid thin black;
padding:25px;
background-color:#ADD8E6;
}
#c2{
float:left;
width:40.1%;
padding:24px;
margin-top:2px;
margin:1px -10px;
border:solid thin black;
background-color:#90EE30;
}
#publi{
float:left;
border:solid thin black;
width:22.3%;
padding:15px;
height:127.4px;
margin:-70px 10px;
}
#publi p{
width:210px;
text-align:center;
margin:20px 50px;
}
#contacto{
float:left;
border:solid thin black;
padding:10px;
margin:-2px 0px 0 10px;
width:50%;
text-align:center;
background-color:#DDA0DD;
}
#aviso{
float:left;
border:solid 1px black;
padding:10px;
margin:-1.8px 0px 0 -1px;
width:45.4%;
text-align:center;
}
Gracias por la corrección.