[SOLUCIONADO] espacio en el top, un tanto extraño.

royalz · #1 (**permalink**) 03/03/2013, 05:25

Hola a todos!!
Al agregar dentro del div header, el div tittle y dentro colocar la etiqueta p, al meter ahí un titulo por ejemplo, aparece un espacio en el top, que con inspección de elemento en chrome, me dice que esta en html,body, antes tambien me aparecia pero con margin: 0px; lo elimine, pero ahora a vuelto para atormentarme xD. Si en el #page-wrap, pongo margin-top: -20px, se arreglar, pero esa no es la manera, no deberia de salir por norma, algo esta mal programado, alguna idea??

Tengo este codigo:

Código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TITULO</title>
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,600' rel='stylesheet' type='text/css'>
</head>
	<body>
		<style type="text/css">
		html,body{height: 100%;background-image: url(img/bg_clear.png);margin: 0px;}
		#page-wrap{width: 960px;margin: auto; height: auto;min-height:100%;background-image: url(img/bg_white.png);}
		#page-wrap:after{width: 100%;height:150px;display:block;clear:both;}
		#footer{width: 960px;height: 150px;margin: -150px auto 0;background-image: url(img/bg_grey.png);}
		#header{position: relative; width: 960px; height: 150px;}
			#title{position: relative; width: 960px; height: 100px;top: 40px;}
			#title p{position: relative; font-family: 'Raleway', sans-serif;color: #000000;font-size: 20px;}
			#menu{width: 960px; height: 50px; background-color: #0f30f3;}
		#contact {position: relative;}
		#contact ul {list-style-type:none;}
		#contact ul li {display: inline;padding-right: 10px;}
		#contact ul li a {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;}
		#name {position: relative;margin-left: 40px;}
		#name p {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;font-size: 13px;}
		#credits {position: relative;top: 55px;}
		</style>
		<div id="page-wrap">
			<div id="header">
				<div id="title">
					<p>TITULO</p>
				</div>
				<div id="menu"></div>
			</div>
			<div id="content">
				
			</div>
		</div>
		<div id="footer">
			<div id="credits">
				<div id="contact">
					<ul>
						<li><a href="#home">Facebook</a></li>
						<li><a>|</a></li>
						<li><a href="#news">Email</a></li>
					</ul>
				</div>
				<div id="name">
					<p>TITULO</p>
				</div>
			</div>
		</div>
	</body>
	</html>

pzin · #2 (**permalink**) 03/03/2013, 05:48

Abusas de la posición relativa. Y no tiene sentido usarlo en ese código. Que es además la causa de que te pase eso.

Ya que el doctype es HTML5, podrías usar las nuevas etiquetas para la estructuración, como header, nav, footer, etc...

royalz · #3 (**permalink**) 03/03/2013, 06:19

Bueno, le acabo de quitar todas las posiciones relativas, y continua igual:

Código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TITULO</title>
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,600' rel='stylesheet' type='text/css'>
</head>
	<body>
		<style type="text/css">
			html,body{height: 100%;background-image: url(img/bg_clear.png);margin: 0px;}
			#page-wrap{width: 960px;margin: auto;height: auto;min-height:100%;background-image: url(img/bg_white.png);}
			#page-wrap:after{width: 100%;height:150px;display:block;clear:both;}
			#footer{width: 960px;height: 150px;margin: -150px auto 0;background-image: url(img/bg_grey.png);}
			#header{width: 960px; height: 150px;}
				#title{height: 100px;margin: 0 auto;width: 363px;}
				#title p{top: 30px;font-family: 'Raleway', sans-serif;color: #000000;font-size: 40px;}
				#menu{width: 960px; height: 50px; background-image: url(img/bg_grey.png);}
			#contact {}
			#contact ul {list-style-type:none;}
			#contact ul li {display: inline;padding-right: 10px;}
			#contact ul li a {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;}
			#name {position: relative;margin-left: 40px;}
			#name p {font-family: 'Raleway', sans-serif;color: #000000;text-decoration: none;font-size: 13px;}
			#credits {position: relative;top: 55px;}
		</style>
		<div id="page-wrap">
			<div id="header">
				<div id="title">
					<p>TITULO</p>
				</div>
				<div id="menu"></div>
			</div>
			<div id="content">
				
			</div>
		</div>
		<div id="footer">
			<div id="credits">
				<div id="contact">
					<ul>
						<li><a href="#home">Facebook</a></li>
						<li><a>|</a></li>
						<li><a href="#news">Email</a></li>
					</ul>
				</div>
				<div id="name">
					<p>TITULO</p>
				</div>
			</div>
		</div>
	</body>
	</html>

Y lo de las etiquetas, las estoy utilizando, el footer, el header, lo que en esta estructura quiero que el header este divido en dos, en una el titulo y en la otra el nav, pero usar estas etiquetas no creo que sea la razon de ese espacio. Ademas, acabo de quitarlas y sigue saliendo...

royalz · #4 (**permalink**) 03/03/2013, 06:57

Vale, ok, lo planteo de otra forma, porque el header, tiene ese margen ahí, y no sale pegado arriba:

Código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
	body {background-image: url(img/bg_black.png);}
	header {width: 916px; height: 150px; background-image: url(img/bg_white.png);margin: 0 auto;}
	</style>
	<header>
	</header>
	<div id="wrapper">
	</div>
</body>
</html>

royalz · #5 (**permalink**) 03/03/2013, 07:28

Dando un margen de 0 al body, se soluciona el problema, veamos si al seguir añadiendo cosas vueleve a aparecer:

Código:

body {background-image: url(img/bg_black.png);margin: 0;}

royalz · #6 (**permalink**) 03/03/2013, 07:35

Veis, por ejempo ahora mismo al añadir esto:

Código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
</head>
<body>
	<style>
	body {background-image: url(img/bg_black.png);margin: 0;}
	header {width: 916px; height: 150px; background-image: url(img/bg_white.png);margin: 0 auto;}
	header p {font-family: 'Exo', sans-serif; font-weight: 500; font-size: 20px; text-align: center;}
	</style>
	<header>
		<p>TECHNO CORP. INDUSTRIES</p>
	</header>
	<div id="wrapper">
	</div>
</body>
</html>

ahora aparece un espacio ahi descomunal, porque?? y a que se debe?, solo estoy cambiando el estilo del texto!

pitufoweb · #7 (**permalink**) 03/03/2013, 07:51

Hola,

Antes de todo, te dijo que la etiqueta <style> va dentro del head y NO dentro del <body>

Ese margen es del parrafo. Puedes solucionarlo, simplemente poniendo p {margin-top:0}

Saludos

pzin · #8 (**permalink**) 03/03/2013, 08:00

No me había fijado que style andaba dentro de body.

Es buena práctica hacer un reset, aunque este básico:

Código CSS:

Ver original*
  margin: 0
  padding: 0

royalz · #9 (**permalink**) 03/03/2013, 09:13

Vale, y porque un parrafo genera margen, no deberian de venir reseteados ya todos estos parametros?, vale de lo style es verdad, va dentro del head, error garrafal.

Lo de hacer un reset a partir de ahora voy a hacerlo SIEMPRE!, ok, gracias, resuelto el problema y ademas entendido.

pzin · #10 (**permalink**) 03/03/2013, 11:08

Cita:

Iniciado por royalz

Vale, y porque un parrafo genera margen, no deberian de venir reseteados ya todos estos parametros?

Porque tienen que haber algunos ajustes mínimos y definidos por el navegador.

royalz · #11 (**permalink**) 03/03/2013, 17:10

ok, gracias Bonez, aunque si se empieza a programar algo desde 0, deberia de ser desde 0 xDD, sigo cabezón! gracias por todo!