Espacios en el <HEADER>

siamatnekerm · #1 (**permalink**) 05/10/2012, 16:22

Hola ante todo gracias a la gente que esta aqui dando sus conocimientos, empiezo con estos de html 5, estoy realizando un curso de grado superior en web, estoy haciendo un sitio web algo sencillito pero amplio para mi ya que soy algo inexperto.

Al empezar con la etiqueta HEADER de html5 realizo todo bien es decir un fondo de header con el respectivo logo pero en el header quedan espacios en blanco alguien me save decir que propiedades debo introducir? esto es lo que tengo:

<!DOCTYPE HTML>
<html>
<head>
<style>
header{
background:
url("img/botones_descripcion.png") no-repeat center,
url("img/fondo_header.png");
height:171px;
}
</style>
</head>
<body>
<header>
<div id="logo" align="center"><a href="#inicio"><img src="img/logo_ingles_uy.png"></a></div>
</header>
</body>
</html>

Muchas gracias a todos!

flashmax · #2 (**permalink**) 05/10/2012, 17:14

Hola puedes poner una imagen de captura para ver el problema por que el código no le veo nada raro

siamatnekerm · #3 (**permalink**) 05/10/2012, 17:24

Claro aqui te la paso, la idea es pegar el header arriva y a los costados de tal forma que no queden esos espacios en blanco y el footer tambien pero hacia abajo.

https://www.dropbox.com/s/0jr0751cl5vwtm6/captura.png

https://www.dropbox.com/s/rapguptek8xou06/captura2.png

flashmax · #4 (**permalink**) 05/10/2012, 17:52

hola prueba con esto haber si lo solucionas

Código HTML:

*{
    margin:0;
    padding:0;
}

siamatnekerm · #5 (**permalink**) 05/10/2012, 18:48

Cita:

Iniciado por flashmax

hola prueba con esto haber si lo solucionas

Código HTML:

*{
    margin:0;
    padding:0;
}

nada ya lo he probado y sigue igual ... te deje tambien la captura de lo que tengo programado, para que veas a ver que es :S

pzin · #6 (**permalink**) 05/10/2012, 18:56

siamatnekerm si posteas el código nos será más fácil ayudarte. Yo me dejo los ojos mirando código con fondo blanco.

siamatnekerm · #7 (**permalink**) 05/10/2012, 19:32

Lo siento mucho, pense que sacarle un screen seria buena idea xD

<!DOCTYPE HTML>
<html>
<head>
<style>
header{
background:
url("img/botones_descripcion.png") no-repeat center,
url("img/fondo_header.png") repeat-x;
width:100%;
height:171px;
margin: 0;
padding: 0;
}
body{
background-color:#e4e4e4;
}
footer {
background: url("img/fondo_footer.png") repeat-x;
height:171px;
}

</style>
</head>
<body>
<header>
<div id="logo" align="center"><a href="#inicio"><img src="img/logo_ingles_uy.png"></a></div>
</header>
<section>
<article>
</article>
</section>
<footer>
<div id="menu">
<nav>
<ul>
<li><a href="iniio.html">Inicio</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>

flashmax · #8 (**permalink**) 05/10/2012, 20:57

Cita:

Iniciado por siamatnekerm

nada ya lo he probado y sigue igual ... te deje tambien la captura de lo que tengo programado, para que veas a ver que es :S

estas seguro que no te quito los espacios?

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<style>
header{
background:
url("img/botones_descripcion.png") no-repeat center,
url("img/fondo_header.png") repeat-x;
width:100%;
height:171px;
margin: 0;
padding: 0;
}
body{
background-color:#e4e4e4;
}
footer {
background: url("img/fondo_footer.png") repeat-x;
height:171px;
}
*{ 
padding:0;
margin:0;
}
</style>
</head>
<body>
<header>
<div id="logo" align="center"><a href="#inicio"><img src="img/logo_ingles_uy.png"></a></div>
</header>
<section>
<article>
</article>
</section>
<footer>
<div id="menu">
<nav>
<ul>
<li><a href="iniio.html">Inicio</a></li>
<li><a href="cursos.html">Cursos</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>

siamatnekerm · #9 (**permalink**) 06/10/2012, 02:50

Segurisimo, aver si alguien me puede explicar que pasa :(

siamatnekerm · #10 (**permalink**) 06/10/2012, 04:03

Ya lo encontre para el que le pase tenemos que poner en propiedades de HTML y del BODY:

margin: 0px;
overflow: hidden;

Saludos!

germantecnico · #11 (**permalink**) 04/12/2016, 07:22

Gracias por tomarte el tiempo de escribir la solución. Me hubiese vuelto loco tratando de encontrarle la vuelta. Saludosss.