Hola qué hay!
Estoy intentando hacer mi primera página web con el HTML-Kit después de haber completado el curso "Paso a paso" y casi nada más empezar ya tengo una problema que no sé cómo resolver: me queda un espacio pequeño pero indeseado entre la capa del logotipo y la capa navegación.
Estas dos capas (con fondo blanco) están "encima" de la capa cabecera (con fondo gris) y salen algo separadas de tal modo que entre ellas se ve un espacio en gris que no quiero. Me gustaría que se juntasen de manera que el logotipo parezca estar fusionado con la capa navegación.
Os dejo una captura de la pantalla y los códigos html y css que he usado.
Muchas gracias de antemano!
Código html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Curvados Travet. Curvado de tubos y perfiles metálicos.</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="encabezamiento"> Tel: 91 676 56 03</div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logo-travet.jpg" height="43" width="174" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="navegacion">
<ul>
<li><a href="empresa.html">La empresa</a></li><li><a href="curvados.html">Tipos de curvado</a></li><li><a href="trabajos.html">Trabajos</a></li><li><a href="noticias.html">Noticias</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="localizacion.html">Localización</a></li>
</ul>
</div>
</div>
<h1>TRAVET</h1>
<p>Empresa dedicada al curvado de tubos y perfiles metálicos por conformación en frío.<p>
<p>Con más de 50 años de experiencia y gracias al esfuerzo y dedicación de nuestros
profesionales, TRAVET es una empresa líder del sector caracterizada por ofrecer la máxima
calidad en sus trabajos y soluciones efectivas a cualquier clase de curvado.</p>
</div>
</body>
</html>
Código CSS
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {background-color: #63B8FF ;
text-align: center ;
font-family: arial ;
font-size: 14 px}
h1 {font-size: 1.2em; color:white ; font-weight: bold ; font-style: italic ; text-decoration: none ;
text-align: center}
h2 {font.size: 1.1em; color:white ; font-weight: bold ; text-decoration: none ;
text-align: center}
#global {width:800px }
#encabezamiento {background-color: #63B8FF ; text-align: right ;
font: italic ; font-size: 12 px}
#cabecera {background-color: gray ; height:43px }
#logotipo {background-color: white ; float:left }
#navegacion { margin: 23px 0px 0px 0px ; background-color: white ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 2px 12px 0px 12px }
#navegacion ul {margin-left: 30px}
a {color: gray ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color: #63B8FF ; font-weight: bold }
a:active {}
Estoy intentando hacer mi primera página web con el HTML-Kit después de haber completado el curso "Paso a paso" y casi nada más empezar ya tengo una problema que no sé cómo resolver: me queda un espacio pequeño pero indeseado entre la capa del logotipo y la capa navegación.
Estas dos capas (con fondo blanco) están "encima" de la capa cabecera (con fondo gris) y salen algo separadas de tal modo que entre ellas se ve un espacio en gris que no quiero. Me gustaría que se juntasen de manera que el logotipo parezca estar fusionado con la capa navegación.
Os dejo una captura de la pantalla y los códigos html y css que he usado.
Muchas gracias de antemano!
Código html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>Curvados Travet. Curvado de tubos y perfiles metálicos.</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<div id="encabezamiento"> Tel: 91 676 56 03</div>
<div id="cabecera">
<div id="logotipo"><a href="index.html"><img src="objetos/logo-travet.jpg" height="43" width="174" alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="navegacion">
<ul>
<li><a href="empresa.html">La empresa</a></li><li><a href="curvados.html">Tipos de curvado</a></li><li><a href="trabajos.html">Trabajos</a></li><li><a href="noticias.html">Noticias</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="localizacion.html">Localización</a></li>
</ul>
</div>
</div>
<h1>TRAVET</h1>
<p>Empresa dedicada al curvado de tubos y perfiles metálicos por conformación en frío.<p>
<p>Con más de 50 años de experiencia y gracias al esfuerzo y dedicación de nuestros
profesionales, TRAVET es una empresa líder del sector caracterizada por ofrecer la máxima
calidad en sus trabajos y soluciones efectivas a cualquier clase de curvado.</p>
</div>
</body>
</html>
Código CSS
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
body {background-color: #63B8FF ;
text-align: center ;
font-family: arial ;
font-size: 14 px}
h1 {font-size: 1.2em; color:white ; font-weight: bold ; font-style: italic ; text-decoration: none ;
text-align: center}
h2 {font.size: 1.1em; color:white ; font-weight: bold ; text-decoration: none ;
text-align: center}
#global {width:800px }
#encabezamiento {background-color: #63B8FF ; text-align: right ;
font: italic ; font-size: 12 px}
#cabecera {background-color: gray ; height:43px }
#logotipo {background-color: white ; float:left }
#navegacion { margin: 23px 0px 0px 0px ; background-color: white ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 2px 12px 0px 12px }
#navegacion ul {margin-left: 30px}
a {color: gray ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color: #63B8FF ; font-weight: bold }
a:active {}