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: JurreNawijn en 17 de Enero 2016, 06:15
-
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%;}
-
Buenas JurreNawijn
Parece que tienes un error al escribir <div id="publicdad"> te falta la letra i
Luego tienes #publicidad donde sí tienes la letra i
Las cajas inferiores (contacta con nosotros y aviso legal) no se ven bien delimitadas como pedía el ejercicio.
Para estos temas de maquetación donde intervienen muchos factores la forma de ir comprendiéndolos es practicar, revisar código creado por otros compañeros, hacer pruebas, etc.
Aquí tienes algunos hilos donde hay comentarios sobre este ejercicio que te pueden servir para revisar y practicar y de este modo mejorar tu diseño:
https://www.aprenderaprogramar.com/foros/index.php?topic=1647.0
https://www.aprenderaprogramar.com/foros/index.php?topic=3739.0
https://www.aprenderaprogramar.com/foros/index.php?topic=3367.0
https://www.aprenderaprogramar.com/foros/index.php?topic=2585.0
https://www.aprenderaprogramar.com/foros/index.php?topic=2870.0
https://www.aprenderaprogramar.com/foros/index.php?topic=2453.0
Salu2
-
Gracias, intenté mejorar el código y pude resolver algunos problemas. Visualizado en Google Chrome y Microsoft Edge con una pantalla de 1366x768. Editor de texto usado: Brackets.
Lo que no comprendo es que al cabo de un momento sin haber modificado nada, la página se deforma y debo bajarle el ancho a #publicidad para que encaje.
HTML:
<!DOCTYPE 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="publicidad">
<p>Reservado para publicidad</p>
</div>
<div class="contenido2">
<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">
<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>
CSS:
* { padding: 0; margin:0; font-family: arial; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
h1, h2 {margin: auto; text-align: center; padding: 10px;}
header {background-color:#DEB887; border: 2px solid #008080;}
div { border: 2px solid;}
a {text-decoration: none; color:crimson;}
#menu {float:left; border-color:red; height:430px;}
#menu_titulo {text-align: center;}
#nav_menu ul {list-style: none;}
#nav_menu {border-style:hidden;}
#nav_menu ul li{margin:20px; border-color:#008080;}
.contenido {width: 70.2%; float:left; background-color: #ADD8E6; border-color:green;}
.informacion p, #publicidad p {text-align: center; margin: 30px;}
#publicidad {float: right; border-color:blueviolet; width:19.70%; height:430px;}
#contacto{margin:20px;}
#legal, #contacto {display: inline-block; margin: 20px 20px 20px 15%; border-style: hidden;}
.contenido2 {background-color:#90EE90; width: 70.2%; float:left; border-color:darkorange;}
#footer {width: 100%; float: left; clear:both; border-color: fuchsia; background-color:#DDA0DD;}
-
Buenas
Yo he logrado verlo correcto bajándole el ancho asignado a publicidad dejándolo como
#publicidad {float: right; border-color:blueviolet; width:18.60%; height:430px;}
El problema con los anchos creo que está en que no tienen en cuenta los grosores de los bordes y eso lleva a que lo que supuestamente tendría que cuadrar con exactitud no cuadre
Salu2