Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 24 de Febrero 2017, 02:15
-
Ejercicio CU01036D del tutorial de programación web con CSS desde cero.
Código HTML
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS-5(37).css">
</head>
<body>
<div id="bienvenidos">
Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)
</div>
<div id="publicidad">
<div id="letra"> Espacio reservado para la publicidad </div>
</div>
<div id="menu">
<div id="letras2">
<ul>
<li> <a href="https://www.aprenderaprogramar.com"> Cursos </a> </li>
<li> <a href="https://www.aprenderaprogramar.com"> Humor <//a> </li>
<li> <a href="https://www.aprenderaprogramar.com"> Divulgación </a> </li>
</ul>
</div>
</div>
<div id="javascript">
Conoce las últimas novedades del lenguaje JavaScript (color de fondo: #ADD8E6)
</div>
<div id="gimp">
Artículo sobre Gimp, un programa de software libre para el diseño gráfico (color de fondo: #90EE90)
</div>
<div id="contacta">
Contacta con nosotros (color de fondo: #DDA0DD)
</div>
<div id="legal">
Aviso legal
</div>
</div>
</body>
</html>
CSS
/* Curso CSS estilos aprenderaprogramar.com*/
div#letra
{margin-top:25px;
}
div#letras2
{margin-bottom:20px;
}
div#bienvenidos
{text-align:center;
border-style:solid; border-width:1px;
width:99.88%; height:20px;
background-color:#DEB887;
}
div#menu
{text-align:left;
border-style:solid; border-width:0 1 1 1;
float:left;
width:10%; height:80px;
background-color:yellow;
}
div#javascript
{text-align:center;
border-style:solid; border-width:0 1 1 1;
float:none;
width:75%; height:30px;
background-color:#ADD8E6;
padding-top:9px;
}
div#publicidad
{text-align:center;
border-style:solid; border-width:0 1 1 1;
display:inline;
float:right;
width:25%; height:80px;
background-color:yellow;
}
div#gimp
{text-align:center;
border-style:solid; border-width:0 0 1 0;
float:none;
width:80%; height:31px;
background-color:#90EE90;
padding-top:9px;
}
div#contacta
{text-align:center;
border-style:solid; border-width:0 0 1 1;
float:left; display:inline;
width:50%; height:20px;
background-color:#90EE90;
padding-top:2px;
}
div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:20px;
float:right;
background-color:#90EE90;
padding-top:2px;
}
Si la visualización la dejo en mi monitor de 1080 x 1920 se ve correctamente. Al achicar la pantalla el diseño se rompe. Como puede solucionarse?
Muchas gracias.
-
Hola alefaletti.
Revise tu ejercicio y note un error en el código HTML. En el menú la segunda de las listas "<li>", cuando cerraste la etiqueta "<a>", cerraste con dos //. Y cuando vizualiso tu código en el navegador el contenedor de "Aviso Legal" se sale para bajo, eso lo podes solucionar con la propiedad position: relative o absolute, aunque absolute no se usa cuando utilizas float.
Tambien podes cambiar la alura del contenedor "Contacta con nosotros (color de fondo: #DDA0DD) " por 30px, y el de aviso legal también. Y hay podes usar la propiedad relative por ejemplo: position:relative; bottom:33px;.
Ve a este link como lo resolvio unos de tus compañero:https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775 (https://www.aprenderaprogramar.com/foros/index.php?topic=5215.msg20775#msg20775)
Un saludo. :D
-
Muchas gracias Jorgito por tu ayuda!
Probé lo que me dijiste, el tema es que ahora cuando agrando mi navegador se rompe el esquema. Te paso mi codigo CSS:
div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:30px;
display:inline;
float:right;
position:relative; bottom:33px;
background-color:#90EE90;
padding-top:2px;
}
Si podes te agradecería tu respuesta. Muchas gracias!
-
Hola de nuevo.
Bueno con el código que dejaste note que esta la propiedad "display" y, con valor "inline". Pero la caja se sale igual.
Entonces probe esta manera y se me acomodo la caja, te paso el código para que lo pruebes.
div#legal
{text-align:center;
border-style:solid; border-width:0 1 1 0.1;
width:49.82%; height:20px;
float:right;
background-color:#90EE90;
padding-top:2px;
position: relative; bottom: 23px;
}Normalmente la propiedad position se usa para el elemento padre.
-
Gracias Jorgito de nuevo por tu ayuda.
Vos sabes que lo pruebo y al irme al %100 del explorador, se rompe.
Estoy haciéndolo de nuevo a ver si puedo encontrar finalmente la solución.
Gracias y lo subo si tengo éxito.
pd; me dicen algunos con mayor experiencia que arreglar estas cosas es mas facil con bootstrap