Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/06/2010, 20:09
Avatar de joseomaker
joseomaker
 
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 14 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 20:15 Razón: Correccion ortografica