(Tutorial) Poner header (cabecera) en CSS

joseomaker · #1 (**permalink**) 13/06/2010, 20:09

Hace mucho tiempo pensé:

La gente usa PHP para paginas que no lo necesitan solo para poner cambiar fácilmente el diseño de la pagina mas rápido.

El problema era mas que todo por el header,ya que el fondo se podía cambiar la hoja de estilo CSS de la plantilla.

Así que pensé, porque no cambiar el header solo editando un solo archivo en vez editar todo los archivos HTML?

Además esta medida ayudaría a reducir el html a su verdadera mínima expresión.

Después de un buen rato pensando pensé, ya no ahí mas solución, que había perdido mi tiempo. Aunque, bueno podría simplemente no introducir una imagen y solamente dejar un fondo bonito que la remplace.

Esa fue la solucion.

Ya logre hacerlo y es muy simple,acá les explicare:

Primero que nada,usaremos una imagen,en mi caso es esta:

(es solo un ejemplo)

bueno ,procedamos, creamos un div y le damos la ID header ( o el que quieran )

Acá les dejo el código para que se guíen:

Código:

<html>
<head>
<title>header</title>
<link rel="stylesheet" href="(dirreccion de tu archivo css)" type="text/css">
</head>
<body>
<div id="header"><br>
</div>
</body>
</html>

ahora tenemos que poner la imagen como header (cabecera) a la pagina,ese es el problema,bueno en el archivo CSS ponemos el siguiente codigo:

Código:

#header {
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(direccion);
  height: 188px;
}

explicare cada regla establecida en el código:

background-position: esto define las posición del fondo inicial del fondo.

nota: ahí 2 center porque el primero define como esta situado horizontalmente y el segundo verticalmente.

background-repeat: establece si se repetirá o no el fondo.

background-image: define la imagen que se usara de fondo

height: define el alto del div.

Nota:en este caso el mínimo de alto para el div debe ser el alto de la imagen que usaremos de header ( tambien llamado cabecera o banner).

Para personalizar el codigo para usarlo necesitas:

-cualquier editor web o editor de texto plano
-conocimientos básicos sobre la web
-conocimientos básicos de CSS

Espero que les haya gustado mi tutorial. :D

PD: este tutorial es orientado a novatos,por eso explique todo tan bien,aunque seguro muchos expertos no conocen este método creado por mi.

Saludos.

Y recuerden: Comentar es agradecer

alexk · #2 (**permalink**) 13/06/2010, 20:40

Cita:

PD: este tutorial es orientado a novatos,por eso explique todo tan bien,aunque seguro muchos expertos no conocen este método creado por mi.

ok vale, es verda que si recien comienzas no sepas ponerle un fondo a un elemento con css...
ahora dudo mucho que un experto desconosca hacer eso, y no le veo algo peculiar o distinto para creer que es una creacion... pero bueno...
En las faqs estan tratadas algunas opciones para esta propiedad (background). se agradece igual

joseomaker · #3 (**permalink**) 13/06/2010, 20:49

no es que sea nuevo,es que es diferente.

Si no la creatividad aplicada,porque todo lo que tenga que ver con diseño o programacion tiene 2 requisitos:

-conocimientos
-seguridad

no estoy diciendo que sea para ponerle fondo,dije que era para poner un header,claro como en todo lenguaje de programacion,tu plasmas la idea con los comandos que tienes disponible,asi que como no puedo crear un comando nuevo,use los que CSS tiene.

Saludos

alexk · #4 (**permalink**) 13/06/2010, 21:21

mmmm nose es que no entiendo tu punto... si me lo puedes explicar estaria bien...

joseomaker

Cita:

no estoy diciendo que sea para ponerle fondo...

Código:

#header {
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(direccion);
  height: 188px;
}

aun que bueno vale con, si de reducir se trata

Código CSS:

Ver original#header {
  background: url(direccion) no-repeat 50&#37; 50%;
  height: 188px;
}

nose no le veo lo "diferente", no dudo que te haya servido claro que si... pero nose no logro entender tu proposito, solo veo un background como digo y una altura... que estoy seguro que te sirvio, para tu proposito, pero......

te repito... si me explicas el propositio estaria bien

joseomaker · #5 (**permalink**) 13/06/2010, 22:11

haber,propositos:

-no tener que poner imagenes en html (es mas complicado que con CSS)
-que los novatos aprendan un poco mas sobre los usos del CSS
-que las personas ABRAN! sus mentes,ahi mucha gente con gente cerrada
-le sirve a cualquier autodidacta que busque codigos para estudiarlos

y por ultimo,es creatividad y claro,sigo los standarts.

porque segun segun se CSS es para el estilo de la pagina y bueno,que yo sepa el header tambien influye en el estilo de la pagina,no te parece?

dots3r · #6 (**permalink**) 13/06/2010, 22:21

Haber creo que no te estas dando a entender mucho, vamos a ver:
Lo que quieres dar a entender es que en lugar de poner una imagen (que seria la cabecera de nuestra pagina) en un tag img, la pones como background con CSS no?

De ser así te comento sin afán de ofender ni nada que la practica de representar todo el header de una pagina mediante una sola imagen y colocarlo como tal es obsoleta, ahora se busca dividir la imagen obteniendo patrones y demás (si es que se puede).

Por otra parte es muy habitual hoy en día poner las imágenes de nuestro layout como fondo en lugar de una imagen como tal, por lo que no entiendo la "creatividad" que mencionas.

De cualquier manera como bien dices puede ser de ayuda para novatos, solo trata de explicarte un poco mejor.

Suerte

alexk · #7 (**permalink**) 13/06/2010, 22:23

ahh vale ahora entiendo, el proposito era lo que hacia falta...

PD: Edita el primer post y agrega los puntos que me mencionas

joseomaker · #8 (**permalink**) 14/06/2010, 13:41

(mensaje borrado)

joseomaker · #9 (**permalink**) 14/06/2010, 13:43

Cita:

Iniciado por dots3r

Haber creo que no te estas dando a entender mucho, vamos a ver:
Lo que quieres dar a entender es que en lugar de poner una imagen (que seria la cabecera de nuestra pagina) en un tag img, la pones como background con CSS no?

De ser así te comento sin afán de ofender ni nada que la practica de representar todo el header de una pagina mediante una sola imagen y colocarlo como tal es obsoleta, ahora se busca dividir la imagen obteniendo patrones y demás (si es que se puede).

Por otra parte es muy habitual hoy en día poner las imágenes de nuestro layout como fondo en lugar de una imagen como tal, por lo que no entiendo la "creatividad" que mencionas.

De cualquier manera como bien dices puede ser de ayuda para novatos, solo trata de explicarte un poco mejor.

Suerte

bueno mira,te lo dejo asi:

Que prefieres,editar el archivo CSS para cambiar el header o editar mas de 10 archivos HTML?

Saludos

dots3r · #10 (**permalink**) 14/06/2010, 14:08

Jajaja bueno al final no nos hemos entendido.

No quise decir que no uses CSS, en concreto la técnica que mencionas, si no que esa misma es muy común (y correcta) hoy en día. Pero dale ya entendí tu punto, como mencionan arriba la lista de propósitos deberías de haberla puesto desde un principio para evitarnos confusiones.

Suerte =)

Calizman · #11 (**permalink**) 15/06/2010, 15:31

Cita:

Iniciado por joseomaker

Después de un buen rato pensando pensé, ya no ahí mas solución, que había perdido mi tiempo.

:

Cita:

Iniciado por joseomaker

PD: este tutorial es orientado a novatos,por eso explique todo tan bien,aunque seguro muchos expertos no conocen este método creado por mi.

Vamos a ver... Disculpa que me meta, pero hay algo dentro de mi que me exige hacerlo.

Estás seguro que este "metodo innovador" es creado por ti? Digo... Dentro de las técnicas CSS y HTML, decir que algo es "creado por ti" es como que muy arriesgado no? Se agradece el aporte, sin embargo, no veo la necesidad de llegar con el ego por delante.

En fin... Te invito a que pases por Este Sitio donde, velozmente, te han plagiado tu "método revolucionario" y, para que no digan que era tuyo, le cambiaron la fecha de creación para el 2008.

En fin.. Hasta Luego!

joseomaker · #12 (**permalink**) 15/06/2010, 15:40

vaya,pero te juro que no lo copie,se me vino a la cabeza en la noche de hace tiempo o.o

haber,voy a revisar el sitio

joseomaker · #13 (**permalink**) 15/06/2010, 15:46

lol,eso que explican lo e pensado yo de una manera MUCHO mas complicada o.o

Claro,ellos lo explican para hacerlo en la pagina de Wordpress,yo explique algo diferente,puesto que lo de ellos es cambiarle el fondo al header,osea no es lo mismo.

yo explico para cambiar de una vez el header en todo tu sitio,ellos para un blog wordpress,cosa que se hace facil con PHP o CSS puesto que la imformacion ya esta puesta y se cambia el diseño sin tener que re-incorporar nada mas.

alexk · #14 (**permalink**) 15/06/2010, 15:48

jeje... yo no me termino de enterar la revolucion... sea un #header, .footer, un span, un div X, o cualquiera de las otras etiquetas HTML.. que mas da?.....
la propiedad background se puede aplicar a casi todo elemento... el CSS no sabe si es un header o no...

enfin yo entendi que "background" es una propiedad extravagante y fuera de o comun... eso da a entender... o almenos yo por alli me fui siendo un foro de CSS y viendo el CSS del "tutorial", pero bueno se agradece como digo antes

joseomaker · #15 (**permalink**) 15/06/2010, 15:58

no,para nada,solo digo por este metodo es mas facil cambiar el header a toda la web con CSS que cambiar la imagen en cada archivo HTML.

Saludos

Calizman · #16 (**permalink**) 15/06/2010, 16:34

Ohh cierto! Tienes razón! Disculpa por no haberme dado cuenta antes. Lo tuyo ha sido un magno-descubrimiento que seguro cambia la forma de hacer sitios web.

Felicidades!

Hasta Luego!

joseomaker · #17 (**permalink**) 15/06/2010, 17:06

Cita:

Iniciado por Calizman

Ohh cierto! Tienes razón! Disculpa por no haberme dado cuenta antes. Lo tuyo ha sido un magno-descubrimiento que seguro cambia la forma de hacer sitios web.

Felicidades!

Hasta Luego!

vaya,un gran talento,profesional del diseño y dios del sarcasmo

Calizman · #18 (**permalink**) 15/06/2010, 17:57

Sarcasmo? No hombre... Era en serio lo que decía!

deirdre · #19 (**permalink**) 15/06/2010, 18:34

No te ofendas joseomaker... pero lo que estás diciendo (¿¡!?).

Es interesante que investigues por tu cuenta y hagas pruebas y propuestas... pero esto que planteas es un lugar común y no tiene novedad alguna. De todas formas esa es la buena forma de hacer las cosas: pensarlas y practicarlas (aunque ya hayan sido "inventadas" por otros).

Esperamos más planteamientos tuyos. Saludos