Crear header como el de foros del web

fcdragons · #1 (**permalink**) 28/04/2009, 09:57

Quiero crear un header que ocupe toda la pantalla. Es decir que ocupe una linia recta, lo probe coon width, y me salen espacios en blanco de mas o menos 5px. y se me queda el mismo espacio arriba.

Si alguien me pudiera explicar.

¿y como consiguen hacer logos tan bonitos?

Lo probe con photoshop y me salio media patata jejej

fcdragons · #2 (**permalink**) 28/04/2009, 11:04

nadie me ayuda¿? TT

Streamerson · #3 (**permalink**) 28/04/2009, 11:51

Si te fijas, la imagen de fondo de la cabecera es de 1 x 102, me imagino que el código ha de ser algo así:

Código HTML:

background-image:  url(tu imagen);
background-repeat: repeat-x;

El background-repeat: repeat-x; hará que la imagen se repita a lo ancho.

Y lo de los logos mmm... eso es de práctica, pero bueno, en México tenemos una pandemia de influenza, así que si quieres contáctame en [email protected] y te ayudo con un logo y lo que necesites.

Saludos!

fcdragons · #4 (**permalink**) 28/04/2009, 14:52

si, pero con eso creo que se me seguira quedando el espacio en blanco de 5px en la izq. en la der. y en el top(arriba), aunque eso que dijiste me ayuda, porque hare un degadado, ya que yo no sabia lo de repeat-x

Newbie001 · #5 (**permalink**) 28/04/2009, 15:05

tenes que poner el codigo sino es dificl ayudarte. por lo que se estas usando tablas y probablemente ese es el problema

Calizman · #6 (**permalink**) 28/04/2009, 16:21

Saludos!!

Cita:

tenes que poner el codigo sino es dificl ayudarte. por lo que se estas usando tablas y probablemente ese es el problema

Lamento informar que esto, no tiene nada que ver.

Cita:

con eso creo que se me seguira quedando el espacio en blanco de 5px en la izq. en la der. y en el top(arriba)

Esto es porque la etiqueta <body> tiene padding: 5px; por defecto. Para que esto sea solucionado, tienes que poner un reset en la parte de arriba, que va asi:

* {
margin: 0px;
padding: 0px;
}

Esto hace que todos los elementos que vas a usar en tu web, esten sin margin y sin padding, como las listas ordenadas y desordenadas, el cuerpo... etc, etc, etc...

Cita:

Quiero crear un header que ocupe toda la pantalla. Es decir que ocupe una linia recta, lo probe coon width, y me salen espacios en blanco de mas o menos 5px. y se me queda el mismo espacio arriba.

Para hacer eso, (luego de hacer el reset) haces un header con height, y sin width.

Espero que te sirva la ayuda!

Hasta Luego!!

farve · #7 (**permalink**) 28/04/2009, 16:27

hola

puede que el <body> tenga algún margen por defecto, editas ti pagina con algun editor tipo dreamweaver??

pon aquí el css y veremos que pasa.

instálate en firefox el plugin firebug y saldras de dudas en 10s

saludos

Dalvenjha · #8 (**permalink**) 28/04/2009, 16:28

o Con display:block y width de 100%.

=$ Para evitar que algo floteeeeee al costado como pluma.

fcdragons · #9 (**permalink**) 28/04/2009, 23:10

Código:

body {text-align:justify;min-width:760px; font:Calibri;}
.wrapper {width:1050px;text-align:left;margin:0 auto;}
.branding a:visited, a:link, a:active {color:#CCC;text-decoration:none;}
.branding a:hover {color:#FFF;height:20px;background-color:#000;text-decoration:none;}
.mainNav {width:150px;float:left;}
.mainNav a:link, a:visited, a:active {color:#0066FF;text-decoration:none;}
.mainNav a:hover {color:#FF0000;text-decoration:none;}
.content {width:855px;float:right;}
.content {padding-left:13px;padding-right:13px;}
.content h1, #content h2, #content p {padding-right:20px;padding-left:20px;}
.content a:link, a:active, a:visited {color:#0066FF;text-decoration:none;}
.content a:hover {color:#FF0000;text-decoration:none;}
.Content h3 {padding-right:8px;padding-left:8px;}
input {border:1px solid #666666;color:#666;}

ese es todo el codigo que uso, la class del header que quiero hacer como dije en el titulo se llama title.