Antes, armaba todas las páginas con tablas pero ahora la tendencia a armar la web es con divs, además es mejor porque no existe la necesitad de crear tantas tablas y crear tanto código y ayuda al posicionamiento en los buscadores ya que no hay tanto código y las cosas son más claras de entender. No es tan difícil como parece, al contrario. Veamos algunos ejemplos


Vamos a armar la cabecera de una página:

1
2
3
4
5
6
7
8

<div class="header">
<div class="logo"><img src="logo.png" alt="Mi logo" width="256" height="256" /></div>
<div class="links">
<div class="inicio">Inicio</div>
<div class="mapa">Mapa del Sitio</div>
<div class="contacto">Contáctame</div>
</div>
</div>

Esto quedaría así:

Ejemplo 1

Ok, pero cómo haría para que las cosas se muestren mejor? Probemos escribiendo código CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

div.header{
	width: 780px;
	height: 256px;
	border: dotted 1px #999999;
	position: relative;
}
div.header div.logo{
	float: left;
	width: 256px;
	height: 256px;
}
div.header div.links{
	float: right;
	position: relative;
	padding-top: 10px;
}
div.header div.links div{
	margin-right: 17px;
	background-repeat: no-repeat;
	background-position: 0 2px;
	padding-left: 21px;
}
div.header div.links div.inicio{
	float: left;
	background-image: url(inicio.png);
}
div.header div.links div.mapa{
	float: left;
	background-image: url(sitemap.png);
}
div.header div.links div.contacto{
	float: left;
	background-image: url(email.png);
}

Como ven todo el diseño cambió, pero no modificamos nada del XHTML
Ejemplo 2

Lo bueno de trabajar así es que tienes el XHTML y según tus estilos todo cambia, así puedes crear diferentes CSS y poder cambiar el diseño de tu página web fácilmente.

Habrán visto que se utilizó
“div.header div.logo”
Esto quiere decir que la propiedad que se le está poniendo es a un div que tenga como “class” “logo” y que este div esté dentro de otro que tenga el “class” “header”, a esto se le puede llamar herencia de estilos.

Descargar ejemplo | Un buen tutorial de CSS | Miren Mancormedia

Comparte y disfruta:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • Twitter
  • Yahoo! Bookmarks