Hacer un template basico

Bueno aqui les voy a mostrar como hacer un template basico con ojas de estilo...

Primero que nada les dejo saber que es mejor separar tu pagina programada en html de la oja de estilo css.

Código:

<html>
<head>
<title>Inspire Solution</title>

Aqui es donde van a llamar a la oja de estilo. recuerden que deben grabarla con la extension .css

Código:

Continuamos

Código:

</head>

<body text="#ffffff">

Aqui comienza lo bueno, DIVS QUE SON IDS se les asigna un nombre que no se puede repetir, si no me equivoco no puede comenzar con ningun numero.

Código:

<div id="container">

<div id="header"> <div id="layer_up"> </div> </div>

<div id="content"> Contenido bla bla bla </div>

<div id="sidebar"> Side bar links </div>

</div>

Aqui terminan los divs los cuales van organizados de esta manera:

container = es como si fuera una tabla donde vamos a meter dos columnas, un side bar para meter los links y el de content para logicamente el contenido.

header = aqui va el header duuhh

y los otros dos como ya les dije.

Y terminamos el html

Código:

</body>
</html>

Entonces vamos a nuestra oja de estilo donde le vamos a dar las propiedades a estos divs, no c preocupen con estos divs no tendran que ver por bueeen tiempo las tablas, es mucho mas facil trabajar con los divs. Las tablas estan echas para tabular data... como numeros de telefonos, direcciones, etc... la gente las utiliza para dise~ar y no es lo correcto, funciona por que estuve mucho tiempo haciendolo pero llega el momento en que se vuelve tedioso y los divs de hacen la vida mucho mas facil.

Hoja de estilo:

Código:

body {
background-image: url(images/5027.png);
background-repeat: repeat;
background-attachment: fixed;
text-align: center;
}

#container {
margin: 10px auto;
width: 800px;
text-align: left;
}

#header {
background-color: #130F22;
width: auto;
height: 150px;
border: thin solid #000;
}

#layerup {
background-image: url(images/inspiresolution_08.gif);
position: absolute;
width: left 3px;
}

#content {
background-color: #53503F;
border: thin solid #000;
float: left;
width: 578px;
height: 100%;
}

#sidebar {
background-color: #363632;
border: thin solid #000;
float: right;
width: 218px;
height: 100%;
}

Si quires saber como trabajan estas propiedades ve aqui:

Para ver los enlaces debes ser usuario Crear Usuario o Hacer Sesion

Ai encontraras lo necesario para saber lo basico y algo mas avanzado de css, si quieres aprender mas mira estos video tutoriales:
Para ver los enlaces debes ser usuario Crear Usuario o Hacer Sesion

Espero que todo les sirva y si aun haci no entiendes puedes mandarme un pm y postear un replay por aqui con tu duda Wink

	Bienvenido(a), Visitante. Favor de ingresar o registrarse. ¿Perdiste tu email de activación? - Julio 18, 2008, 11:32:23 Boton Buscar