Saludos amigos, soy nuevo en CCTW y la verdad que agradezco y felicitos a los administradores de esta excelente página WEB, he empezado a diseñar mi WEB pero como nada es perfecto ya me ha surgido la primera duda, me encuentro la sección de Ejemplos con Divs en la lección 3 “bordes”.
He podido ya subir mi página al servidor y como verán mi problema está en que no logro juntar la capa div “contenido” de “navegación” ni del “pie” esta queda como flotando.
Copio código html y hoja de estilo:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Recordando como hacer una WEB</title>
<link rel="shortcut icon" href="objetos/avion.ico">
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenido a mi Web</div>
<div id="navegacion">Barra de Navegación"</div>
<div id="contenido">
<div id="menu">
<ul><li><a href="#"target="_blank">Pestaña 1</a></li><li><a href="#"target="_blank">Pestaña 2</a></li><li><a href="#"target="_blank">Pestaña 3</a></li><li><a href="#"target="_blank">Pestaña 4</a></li></ul>
</div>
<h1>Este será el contenido principal de la WEB</h1>
<p>Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamaño de la letra de toda la web, podemos variar los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?</p>
<h2>Esto seria una demostración de un Subtítulo</h2>
<p>Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace, ni ná de ná. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la etiqueta <span class="htmlcode"><p></span> al incio y como no, la etiqueta <span class="htmlcode"></p></span> de cierre al final. Ale, dale al teclado! Ha de quedar así:</p>
</div>
<div id="pie">Barra del Píe de Página"</div>
</div>
</body>
</html>
Código HTML:
*{text-indent:0px; mrgin:0px; padding:0px; border:0px;}
body {text-align: center;}
#global {width:800px; margin:4px auto;}
#cabecera {background-color: pink; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid;}
#navegacion {background-color: gray; border:black 1px solid}
#contenido {background-color: orange; border-left:black 1px solid; border-right:black 1px solid;}
#contenido p{padding:5px 10px 5px 10px; text-indent:15px;}
#menu {background-color: yellow; width:150px; float:left; text-align:left; margin:5px 10px 5px 5px;}
#menu li {list-style:none; margin:4px 0px 4px 6px}
#pie {background-color: brown; border:black 1px solid;}
a {color:brown; font-size:1.1em; text-decoration:none; display:block;}
a:link {}
a:visited {}
a:hover {color:red; text-decoration:underline; background-color:silver;}
a:active {}
p {text-align:justify;}
h1 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:underline; text-align:center;}
h2 {font-size:1.2em; color:blue; font-weight:bold; text-decoration:none; text-align:center;}