Hola,
Estoy siguiendo el curso (¡es genial!) y paralelamente voy creando mi pagina web.
En el ejemplo del curso, en el div "contenido" introduce un div "menu" y ya está, y queda la mar de chulo... En mi pagina he intentado crear un div "menu" y un div "cuerpo" porque quiero que el menú ocupe toda la parte izquierda del "contenido" y el "cuerpo" toda la parte derecha (el resto, vamos).
Mi problema es que no queda dentro del contenido, si no que aparece a la izquierda el "menu" (bien) a la derecha el "cuerpo" (bien...) ¡Y en el centro pone "Pie de pagina"! Y han desaparecido los bordes del "contenido"... Vamos, que se ha mezclado todo.
He probado con diferentes medidas, pero no me aclaro...
Codigo html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera"></div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu"><ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2 </a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<div id="cuerpo">
<p>Esta será la zona principal de la web</p> <p>parrafo 2</p>
<p>Parrafo 3</p>
<p>Parrafo 4 ...</p>
</div>
</div>
<div id="pie">Pie de la pagina</div>
</div>
</body>
</html>
Codigo CSS:
* {margin:0px ; padding:0px ; border: 0px}
body {
background-color:#BBFFFF;
background-image:url(objetos/naranja.jpg);
text-align: center
}
.centrado {text-align:center}
#global {width:800px ; margin: 4px auto }
#cabecera { background-image:url(objetos/CABECERA-CAMIÓN-BORDE.jpg); width: 100%; height:125px ; margin: 20px 0px 0px 0px }
#navegacion {background-color: #CDC9C9 ; border-left: black 1px solid ; border-right: black 1px solid; border-bottom: black 1px solid}
#contenido {background-color:blue; border-left: black 1px solid ; border-right: black 1px solid}
#menu {background-color:silver; width: 150px ; float:left; text-align:left ; margin: 3px 10px 3px 3px }
#menu li { list-style:none ; font-weight: bold }
#cuerpo {background-color:white; width: 600px; float:right}
#cuerpo p {padding: 5px 10px 5px 10px}
#pie {background-color: #6495ED; border: black 1px solid}
a {color: #D2691E; text-decoration: none; display: block}
a:link {}
a:visited {}
a:hover {color: blue; text-decoration: underline; background-color: #CAE1FF}
p {text-align: justify}
Estoy siguiendo el curso (¡es genial!) y paralelamente voy creando mi pagina web.
En el ejemplo del curso, en el div "contenido" introduce un div "menu" y ya está, y queda la mar de chulo... En mi pagina he intentado crear un div "menu" y un div "cuerpo" porque quiero que el menú ocupe toda la parte izquierda del "contenido" y el "cuerpo" toda la parte derecha (el resto, vamos).
Mi problema es que no queda dentro del contenido, si no que aparece a la izquierda el "menu" (bien) a la derecha el "cuerpo" (bien...) ¡Y en el centro pone "Pie de pagina"! Y han desaparecido los bordes del "contenido"... Vamos, que se ha mezclado todo.
He probado con diferentes medidas, pero no me aclaro...
Codigo html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="cabecera"></div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu"><ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2 </a></li><li><a href="#">Enlace 3</a></li></ul>
</div>
<div id="cuerpo">
<p>Esta será la zona principal de la web</p> <p>parrafo 2</p>
<p>Parrafo 3</p>
<p>Parrafo 4 ...</p>
</div>
</div>
<div id="pie">Pie de la pagina</div>
</div>
</body>
</html>
Codigo CSS:
* {margin:0px ; padding:0px ; border: 0px}
body {
background-color:#BBFFFF;
background-image:url(objetos/naranja.jpg);
text-align: center
}
.centrado {text-align:center}
#global {width:800px ; margin: 4px auto }
#cabecera { background-image:url(objetos/CABECERA-CAMIÓN-BORDE.jpg); width: 100%; height:125px ; margin: 20px 0px 0px 0px }
#navegacion {background-color: #CDC9C9 ; border-left: black 1px solid ; border-right: black 1px solid; border-bottom: black 1px solid}
#contenido {background-color:blue; border-left: black 1px solid ; border-right: black 1px solid}
#menu {background-color:silver; width: 150px ; float:left; text-align:left ; margin: 3px 10px 3px 3px }
#menu li { list-style:none ; font-weight: bold }
#cuerpo {background-color:white; width: 600px; float:right}
#cuerpo p {padding: 5px 10px 5px 10px}
#pie {background-color: #6495ED; border: black 1px solid}
a {color: #D2691E; text-decoration: none; display: block}
a:link {}
a:visited {}
a:hover {color: blue; text-decoration: underline; background-color: #CAE1FF}
p {text-align: justify}