Hola a todos, estoy haciendo el curso del ejemplo con capas y en paralelo estoy intentando diseñar mi web, que en un principio es casi igual a la del curso, jeje, ya la modificaré.
En el internet explorer se me ve bien, el problema es que en el google chrome me aparece un espacio indeseado entre la capa de cabecera y la capa de la barra de navegación, es como si en medio hubiera una fila en blanco de unos pixeles de grosor.
Os pongo ambos códigos para ver si alguien me puede decir como solucionarlo: Mil gracias de antemano. Si a alguien ademas se le ocurre cualquier otra cosa que me pueda resultar de interes lo aceptaré de buen grado
estilos.css
*{text-indent:0px ; margin:0px ; padding:0px ; border:0px}
/*si no pongo lo de abajo, no se me centra la web*/
body {text-align:center}
#global {width:800px ; margin:4px auto}
#cabecera {background-color:red ; border:2px black solid ; height:100px}
#logotipo {background-color:yellow ; float:left ; width:300px ; height:100px }
#textocabecera { width:496px ; float:right ; margin-top: 40px ; font-size:20px}
#barranavegacion {background-color:grey ; height:40px ; border-left:2px black solid ; border-right:2px black solid}
#barranavegacion ul{margin-left:60px ; margin-top:10px}
#barranavegacion li{font-size:15px ; list-style:none ; margin:10px 20px 0px 20px ; float:left}
#barranavegacion a {color:blue ; text-decoration:none}
#barranavegacion a:link {}
#barranavegacion a:visited {}
#barranavegacion a:hover {font-size:18px}
#barranavegacion a:active {}
#contenido {background-color:orange ; border:black 2px solid}
#contenido p{padding:5px 10px 0px 10px ; text-indent:15px ; text-align:left}
#menulateral {background-color:green ; text-align:left ; margin:3px 10px 3px 3px ; width:200px ; float:left ; border:black 2px solid}
#menulateral li {list-style:none ; margin: 4px 8px 4px 6px}
#menulateral a {color:white ;text-decoration:none}
#menulateral a:link {}
#menulateral a:visited {}
#menulateral a:hover {font-size:18px}
#menulateral a:active {}
#pie {background-color:brown ; height:40px ; border-left:2px black solid ; border-right:2px black solid; border-bottom:2px black solid}
plantilla.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>NOVADOMOTICA</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CABECERA -->
<div id="cabecera">
<div id="logotipo">
<p>Aquí irá el logotipo</p>
</div>
<div id="textocabecera">
<p>EMPRESA DEDICADA A LA DOMITIZACIÓN DE VIVIENDAS Y EDIFICIOS</p>
</div>
</div>
<!-- INICIO BARRA NAVEGACION -->
<div id="barranavegacion">
<ul>
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a></li>
<li><a href="#">Enlace4</a></li>
<li><a href="#">Enlace5</a></li>
</ul>
</div>
<!-- INICIO CONTENIDO -->
<div id="contenido">
<div id="menulateral"
<ul>
<li><a href="#">Menu lateral</a></li>
<li><a href="#">Menu lateral</a></li>
<li><a href="#">Menu lateral</a></li>
</ul>
</div>
<p>Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido.Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
</div>
<!-- INICIO PIE -->
<div id="pie">
<p>Pie de pagina</p>
</div>
</div>
</body>
</html>
En el internet explorer se me ve bien, el problema es que en el google chrome me aparece un espacio indeseado entre la capa de cabecera y la capa de la barra de navegación, es como si en medio hubiera una fila en blanco de unos pixeles de grosor.
Os pongo ambos códigos para ver si alguien me puede decir como solucionarlo: Mil gracias de antemano. Si a alguien ademas se le ocurre cualquier otra cosa que me pueda resultar de interes lo aceptaré de buen grado
estilos.css
*{text-indent:0px ; margin:0px ; padding:0px ; border:0px}
/*si no pongo lo de abajo, no se me centra la web*/
body {text-align:center}
#global {width:800px ; margin:4px auto}
#cabecera {background-color:red ; border:2px black solid ; height:100px}
#logotipo {background-color:yellow ; float:left ; width:300px ; height:100px }
#textocabecera { width:496px ; float:right ; margin-top: 40px ; font-size:20px}
#barranavegacion {background-color:grey ; height:40px ; border-left:2px black solid ; border-right:2px black solid}
#barranavegacion ul{margin-left:60px ; margin-top:10px}
#barranavegacion li{font-size:15px ; list-style:none ; margin:10px 20px 0px 20px ; float:left}
#barranavegacion a {color:blue ; text-decoration:none}
#barranavegacion a:link {}
#barranavegacion a:visited {}
#barranavegacion a:hover {font-size:18px}
#barranavegacion a:active {}
#contenido {background-color:orange ; border:black 2px solid}
#contenido p{padding:5px 10px 0px 10px ; text-indent:15px ; text-align:left}
#menulateral {background-color:green ; text-align:left ; margin:3px 10px 3px 3px ; width:200px ; float:left ; border:black 2px solid}
#menulateral li {list-style:none ; margin: 4px 8px 4px 6px}
#menulateral a {color:white ;text-decoration:none}
#menulateral a:link {}
#menulateral a:visited {}
#menulateral a:hover {font-size:18px}
#menulateral a:active {}
#pie {background-color:brown ; height:40px ; border-left:2px black solid ; border-right:2px black solid; border-bottom:2px black solid}
plantilla.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>NOVADOMOTICA</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CABECERA -->
<div id="cabecera">
<div id="logotipo">
<p>Aquí irá el logotipo</p>
</div>
<div id="textocabecera">
<p>EMPRESA DEDICADA A LA DOMITIZACIÓN DE VIVIENDAS Y EDIFICIOS</p>
</div>
</div>
<!-- INICIO BARRA NAVEGACION -->
<div id="barranavegacion">
<ul>
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a></li>
<li><a href="#">Enlace4</a></li>
<li><a href="#">Enlace5</a></li>
</ul>
</div>
<!-- INICIO CONTENIDO -->
<div id="contenido">
<div id="menulateral"
<ul>
<li><a href="#">Menu lateral</a></li>
<li><a href="#">Menu lateral</a></li>
<li><a href="#">Menu lateral</a></li>
</ul>
</div>
<p>Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido.Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido. Aqui irá el contenido.</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
<p>Aqui irá el contenido</p>
</div>
<!-- INICIO PIE -->
<div id="pie">
<p>Pie de pagina</p>
</div>
</div>
</body>
</html>