Estoy haciendo el ejemplo de Divs de CCTW, por cierto quiero felicitar a su(s) creador(es) ya que han echo un trabajo genial.
Bueno el problema es que al agregar texto a la capa de contenido mi menu se va al final de la capa, de la siguiente manera:
Mi codigo HTML es:
Y mi codigo CSS es:
Gracias por su ayuda.!
Bueno el problema es que al agregar texto a la capa de contenido mi menu se va al final de la capa, de la siguiente manera:
Mi codigo HTML es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento de plantilla</title>
<link href="ePlantilla.css" rel="stylesheet" type="text/css" />
</head>
<body id="global">
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<p>Esta será la zona principal de la web</p>
<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>
<p>Ups, los párrafos se ven centrados y eso parece una poesia más que una web, je je je. Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para todos los párrafos de la web. Si más tarde nos interesa alguno con otra alineación, lo crearemos en su momento.</p>
<div id="menu">
<ul>
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a></li>
</ul>
</div>
</div>
<div id="pie">Este es el pié de página</div>
</body>
</html>Y mi codigo CSS es:
* {
margin:0px;
padding:0px;
border:0px;
}
body {
text-align:center
}
#global {
width: 800px;
margin: 4px auto;
}
#cabecera {
background-color: #FF33FF;
}
#navegacion {
background-color:gray;
}
#contenido {
background-color:orange;
width:800px;
float:left;
}
p{
text-align:justify;
}
#contenido p {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
text-indent:15px;
}
#menu {
background-color:#FFFF00;
width: 150px;
float:left;
text-align:left;
margin-right:10px;
}
#menu li {
list-style:none;
margin-left: 6px;
margin-bottom:4px;
margin-top:4px;
margin-right: 0px;
}
#menu a {
display:block;
color:blue;
text-decoration:none;
}
#menu a:visited {
color:blue;
text-decoration:none;
}
#menu a:hover {
background-color:silver;
}
#pie {
background-color: brown;
}Gracias por su ayuda.!