![[Tutorial] Poner header[cabecera] en CSS Logo-simple](https://2img.net/i/fa/modernbb/logo-simple.png){kind=logo}
Índice
Zk-online
Galería
Buscar
Registrarse
Conectarse
ProgramadorZk-Moderador
100
4867
143
![[Tutorial] Poner header[cabecera] en CSS Empty](https://2img.net/i/empty.gif)
[Tutorial] Poner header[cabecera] en CSS
Vie Ago 31, 2012 4:08 am
Hace mucho tiempo pensé:
Que 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:
![[Tutorial] Poner header[cabecera] en CSS Headerhb](https://2img.net/r/ihimizer/img534/5277/headerhb.png)
(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:
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:
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.
Crèdito : Programador
Que 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.
- Spoiler:
- Hace varios años que publique este método en una comunidad
Crèdito : Programador
Fenix.Zk-Level 0
- 1545022
Re: [Tutorial] Poner header[cabecera] en CSS
Vie Ago 31, 2012 4:19 am
lo que buscaba hace dias gracias kpo buen post
rOkeTZk-Moderador- 69760497
Re: [Tutorial] Poner header[cabecera] en CSS
Mar Sep 04, 2012 11:33 am
puedes dejar una prueba?
- ProgramadorZk-Moderador
- 1004867143
Re: [Tutorial] Poner header[cabecera] en CSS
Mar Sep 04, 2012 8:03 pm
DarkBlue escribió:puedes dejar una prueba?
Especìficamente nose que me quisiste decir con una prueba.. pero te dejo una prueba y/o ejemplo del header.
![[Tutorial] Poner header[cabecera] en CSS 55555555j](https://2img.net/r/ihimizer/img15/2231/55555555j.jpg)
Permisos de este foro:
No puedes responder a temas en este foro.