Hola, buenas noches. Aquí traigo la posible solución al ejercicio CU01036D. Me ha costado bastante crear la web, quisiera que me ayuden a entender más a fondo esto del float y el position dándome su opinión personal y explicandome con algunos ejemplos. Gracias.
Index.html <html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bienvenidos a aprenderaprogramar.com</h1>
</header>
<div id="menu">
<div id="menu_titulo">Menu</div>
<div id="nav_menu">
<ul>
<li><a href="#">- Cursos</a></li>
<li><a href="#">- Humor</a></li>
<li><a href="#">- Divulgación</a></li>
</ul>
</div>
</div>
<div class="contenido">
<div class="informacion">
<h2>Javascript 1.7</h2>
<p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores, comprensión de arrays, sentencias let y asignación desestructurada. Evidentemente también incluye todas las características de JavaScript 1.6.
El soporte para JavaScript 1.7 estará disponible a partir de Firefox 2 Beta 1, así como en compilaciones actuales.
Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a construir o utilizar esta consola, lee Introducción al shell de JavaScript.</p></div>
</div>
<div id="publicdad">
<p>Reservado para publicidad</p>
</div>
<div class="contenido" style="background-color:#90EE90">
<div class="informacion">
<h2>GMP</h2>
<p>GIMP (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits, tanto dibujos como fotografías. Es un programa libre y gratuito. Forma parte del proyecto GNU y está disponible bajo la Licencia pública general de GNU y GNU Lesser General Public License1
Es el programa de manipulación de gráficos disponible en más sistemas operativos (Unix, GNU/Linux, FreeBSD, Solaris, Microsoft Windows y Mac OS X, entre otros).
La interfaz de GIMP está disponible en varios idiomas, entre ellos: español, inglés (el idioma original), catalán, gallego, euskera, alemán, francés, italiano, ruso, sueco, noruego, coreano y neerlandés.
</p> </div>
</div>
<div id="footer" style="background-color:#DDA0DD;">
<div id="contacto">
<p>Contacta con nosotros: <a href="mailito:ejemplo@ejemplo.com">ejemplo@ejemplo.com</a></p>
</div>
<div id="legal">
<p>Apartir de acá, el aviso legal © 23 a.C - 3871</p>
</div>
</div>
</body>
</html>
style.css
* { padding: 0; margin:0; font-family: arial;}
h1, h2 {margin: auto; text-align: center; padding: 10px;}
header {background-color:#DEB887; border-style: solid; border-width: 2px; border-color: blue; }
div { border-style:solid; border-width: 2px;}
a {text-decoration: none; color:crimson;}
#menu {float:left; border-color:red; clear:left; height: 62.7%;}
#menu_titulo {text-align: center;}
#nav_menu ul {list-style: none;}
#nav_menu ul li{margin:20px;}
.contenido, #footer {width: 80%; float:left; background-color: #ADD8E6; border-color:green;}
.informacion p, #publicidad p {text-align: center; margin: 30px;}
#publicidad {float: both; border-color:blueviolet; height:700px; display:block;}
#contacto{margin:20px;}
#legal, #contacto {position:relative; left: 20%; display: inline-block; margin-left: 50px; float:both;}
#footer {width:100%;}
Tema: Maquetación de páginas web con float ejercicio CU01036D del curso de CSS (Leído 2739 veces)
RSS -
WAP2