Hola, he usado el buscador para ver si ya estaba posteado mi problema, pero veo que no. Así que me he obligado a postear.
El caso es que los bordes de la cabecera me engloban todos los divs, es decir que el border-bottom me cubre el bottom del pie de página, y también me cubre ambos laterales (en vez de cubrir sólo su única línea de cabecera).
Código CSS (A pesar de vuestros avisos de no-personalización de la página de ejemplo, tengo que confesar que peco de ello :roll: , no me echéis a la hoguera!)
*{margin: 0px; padding: 0px; border: 0px}
a {color: blue;
text-decoration: none;
display: block}
a:link {}
a:visited: {}
a:hover {background-color: silver;}
a:active {}
h1 {font-size: 1.5em;
font-weight: bold;
text-decoration: underline;
text-align: justify}
h2 {font-size: 1.1em;
font-weight: bold;
text-decoration: none;
text-align: justify}
p {text-align: justify}
body {text-align: center}
#global {width: 800px;
margin: 4px auto}
#cabecera {background-color: white;
border: 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: 20px}
#menu {background-color: yellow;
width: 120px;
float: left;
text-align:left;
margin: 3px 10px 3px 2px}
#menu li {list-style: none;
margin: 3px 10px 3px 10px}
#pie {background-color: brown;
/*border-top: black 1px solid*/}
/*#curva-superior {background-image: url(objetos/curva-superior.gif);
background-repeat: no-repeat;
width: 800px;
height: 12px;
overflow: hidden}
#curva-inferior {background-image: url(objetos/curva-inferior.gif);
background-repeat: no-repeat;
width: 800px;
height: 12px;
overflow: hidden}*/
He comentado lo prescindible para este caso, y os marco en negrita la parte chunga (o lo que considero que es la parte chunga)
Código HTML (Aquí os he sido más fiel :wink: )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
"<div id="curva-superior"></div>
<div id="cabecera">Cabecera<div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>Enlace 1 Enlace 2 Enlace 3 Enlace 4
</div>
<h1>Titulo molongo</h1>
Morbi volutpat luctus diam non aliquet. Nunc rhoncus metus ut nisi porta ac dignissim sem cursus. Donec porttitor turpis fringilla lorem ultrices sed malesuada metus eleifend.</p>
Curabitur posuere euismod eros, ac cursus mauris tempus et. Donec lacinia, ante cursus laoreet rutrum, libero magna elementum felis, at porttitor metus libero ut sem. Vestibulum ut lorem dui.</p>
Nunc semper molestie augue id sodales. In a nisi erat. Aliquam erat volutpat. Maecenas vitae velit tempus justo convallis elementum sed ac velit.</p>
<h2>Subtítulo molón</h2>
Bi volutpat luctus diam non aliquet. Nunc rhoncus metus ut nisi porta ac dignissim sem cursus. Donec porttitor turpis fringilla lorem ultrices sed malesuada metus eleifend. Curabitur posuere euismod eros, ac cursus mauris tempus et.</p>
Donec lacinia, ante cursus laoreet rutrum, libero magna elementum felis, at porttitor metus libero ut sem. Vestibulum ut lorem dui. Nunc semper molestie augue id sodales. In a nisi erat. Aliquam erat volutpat. Maecenas vitae velit tempus justo convallis elementum sed ac velit.</p>
</div>
<div id="pie">Pie</div>
"<div id="curva-inferior"></div>
</div>
</body>
</html>
He comentado la parte de los gifs, totalmente prescindibles, porque quiero que veáis que la cabecera está loca.
Captura de cómo queda.
[contenido no disponible]
Es así tanto en la preliminar, como en el Chrome, como en IE, como en Firefox.
Muchas gracias. Tienes/Tenéis una web muy completa, excelentemente bien explicada. Agradezco y aprecio tu trabajo. Un saludote :wink: 8)
El caso es que los bordes de la cabecera me engloban todos los divs, es decir que el border-bottom me cubre el bottom del pie de página, y también me cubre ambos laterales (en vez de cubrir sólo su única línea de cabecera).
Código CSS (A pesar de vuestros avisos de no-personalización de la página de ejemplo, tengo que confesar que peco de ello :roll: , no me echéis a la hoguera!)
*{margin: 0px; padding: 0px; border: 0px}
a {color: blue;
text-decoration: none;
display: block}
a:link {}
a:visited: {}
a:hover {background-color: silver;}
a:active {}
h1 {font-size: 1.5em;
font-weight: bold;
text-decoration: underline;
text-align: justify}
h2 {font-size: 1.1em;
font-weight: bold;
text-decoration: none;
text-align: justify}
p {text-align: justify}
body {text-align: center}
#global {width: 800px;
margin: 4px auto}
#cabecera {background-color: white;
border: 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: 20px}
#menu {background-color: yellow;
width: 120px;
float: left;
text-align:left;
margin: 3px 10px 3px 2px}
#menu li {list-style: none;
margin: 3px 10px 3px 10px}
#pie {background-color: brown;
/*border-top: black 1px solid*/}
/*#curva-superior {background-image: url(objetos/curva-superior.gif);
background-repeat: no-repeat;
width: 800px;
height: 12px;
overflow: hidden}
#curva-inferior {background-image: url(objetos/curva-inferior.gif);
background-repeat: no-repeat;
width: 800px;
height: 12px;
overflow: hidden}*/
He comentado lo prescindible para este caso, y os marco en negrita la parte chunga (o lo que considero que es la parte chunga)
Código HTML (Aquí os he sido más fiel :wink: )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
"<div id="curva-superior"></div>
<div id="cabecera">Cabecera<div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido">
<div id="menu">
<ul>
</div>
<h1>Titulo molongo</h1>
Morbi volutpat luctus diam non aliquet. Nunc rhoncus metus ut nisi porta ac dignissim sem cursus. Donec porttitor turpis fringilla lorem ultrices sed malesuada metus eleifend.</p>
Curabitur posuere euismod eros, ac cursus mauris tempus et. Donec lacinia, ante cursus laoreet rutrum, libero magna elementum felis, at porttitor metus libero ut sem. Vestibulum ut lorem dui.</p>
Nunc semper molestie augue id sodales. In a nisi erat. Aliquam erat volutpat. Maecenas vitae velit tempus justo convallis elementum sed ac velit.</p>
<h2>Subtítulo molón</h2>
Bi volutpat luctus diam non aliquet. Nunc rhoncus metus ut nisi porta ac dignissim sem cursus. Donec porttitor turpis fringilla lorem ultrices sed malesuada metus eleifend. Curabitur posuere euismod eros, ac cursus mauris tempus et.</p>
Donec lacinia, ante cursus laoreet rutrum, libero magna elementum felis, at porttitor metus libero ut sem. Vestibulum ut lorem dui. Nunc semper molestie augue id sodales. In a nisi erat. Aliquam erat volutpat. Maecenas vitae velit tempus justo convallis elementum sed ac velit.</p>
</div>
<div id="pie">Pie</div>
"<div id="curva-inferior"></div>
</div>
</body>
</html>
He comentado la parte de los gifs, totalmente prescindibles, porque quiero que veáis que la cabecera está loca.
Captura de cómo queda.
[contenido no disponible]
Es así tanto en la preliminar, como en el Chrome, como en IE, como en Firefox.
Muchas gracias. Tienes/Tenéis una web muy completa, excelentemente bien explicada. Agradezco y aprecio tu trabajo. Un saludote :wink: 8)