Foros del Web » Creando para Internet » CSS »

(Tutorial) Poner header (cabecera) en CSS

Estas en el tema de (Tutorial) Poner header (cabecera) en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/06/2010, 21:09
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Información (Tutorial) Poner header (cabecera) en CSS

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

Última edición por joseomaker; 13/06/2010 a las 21:15 Razón: Correccion ortografica
  #2 (permalink)  
Antiguo 13/06/2010, 21:40
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #3 (permalink)  
Antiguo 13/06/2010, 21:49
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #4 (permalink)  
Antiguo 13/06/2010, 22:21
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  1. #header {
  2.   background: url(direccion) no-repeat 50&#37; 50%;
  3.   height: 188px;
  4. }

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
  #5 (permalink)  
Antiguo 13/06/2010, 23:11
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Sonrisa Respuesta: (Tutorial) Poner header (cabecera) en CSS

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?
  #6 (permalink)  
Antiguo 13/06/2010, 23:21
Avatar de dots3r  
Fecha de Ingreso: julio-2008
Mensajes: 106
Antigüedad: 9 años, 4 meses
Puntos: 5
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #7 (permalink)  
Antiguo 13/06/2010, 23:23
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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

PD: Edita el primer post y agrega los puntos que me mencionas
  #8 (permalink)  
Antiguo 14/06/2010, 14:41
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

(mensaje borrado)

Última edición por joseomaker; 14/06/2010 a las 14:43 Razón: borrar mensaje
  #9 (permalink)  
Antiguo 14/06/2010, 14:43
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

Cita:
Iniciado por dots3r Ver Mensaje
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
  #10 (permalink)  
Antiguo 14/06/2010, 15:08
Avatar de dots3r  
Fecha de Ingreso: julio-2008
Mensajes: 106
Antigüedad: 9 años, 4 meses
Puntos: 5
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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 =)
__________________
Ideorama. Su presencia en Internet
  #11 (permalink)  
Antiguo 15/06/2010, 16:31
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #12 (permalink)  
Antiguo 15/06/2010, 16:40
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #13 (permalink)  
Antiguo 15/06/2010, 16:46
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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.
  #14 (permalink)  
Antiguo 15/06/2010, 16:48
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #15 (permalink)  
Antiguo 15/06/2010, 16:58
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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
  #16 (permalink)  
Antiguo 15/06/2010, 17:34
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #17 (permalink)  
Antiguo 15/06/2010, 18:06
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
De acuerdo Respuesta: (Tutorial) Poner header (cabecera) en CSS

Cita:
Iniciado por Calizman Ver Mensaje
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
  #18 (permalink)  
Antiguo 15/06/2010, 18:57
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: (Tutorial) Poner header (cabecera) en CSS

Sarcasmo? No hombre... Era en serio lo que decía!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #19 (permalink)  
Antiguo 15/06/2010, 19:34
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: (Tutorial) Poner header (cabecera) en CSS

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

Etiquetas: cabeceras, header, html, joseo5252, banner
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 04:30.