Ejemplo con CSS + XHTML de un documento correcto que pasa el w3c test.
El CSS:
body {
font-family: Tahoma, Georgia, serif;
font-size:12px;
color:#666666;
text-align:center; /*aqui mandamos a centrar todo el contenido*/
}
ul {
list-style-type:none; /*con esto quitamos las viñetas*/
margin:0; /*le quitamos el margen a la lista*/
padding:0; /*y el relleno*/
}
li {
margin:0; /*le quito el margen al elemento de la lista*/
float:left; /*y los floto a la izquierda para eliminar el salto de linea*/
}
li a {
display:block; /*con esto el vinculo tendra un area rectangular, asi no sera solo el texto*/
background-color:#CC3300; /*algo de color*/
color:#FFFFFF; /*mas*/
width:58px; /*defino el ancho del rectangulo del vinculo*/
padding:4px 0 5px 22px; /*sumamos el relleno al ancho y alto del rectangulo para obtener el div #menu completamente ocupado con los ítems del menú*/
text-decoration:none; /*elimino el subrayado del vínculo*/
font-weight:bold; /*decoración*/
text-transform:uppercase; /*decorare los vinculos en mayusculas*/
}
li a:hover {
background-color:#999900; /*decoración para el evento hover (mouse encima)*/
}
#contenedor { width:600px; border:1px solid #333333; background-color:#FFF8F0; margin:10px auto; text-align:left; }
#encabezado h1 { font-size:18px; font-weight:bold; width:224px; border-bottom:16px solid #FFFFFF; color:#FFFFFF; margin:0; text-transform:uppercase; padding-bottom:10px; }
#contenido { width:580px; clear:both; padding:10px; }
#contenido h2 {
font-size:16px;
color:#CC3300;
width:246px;
text-transform:uppercase;
border-bottom:1px dotted #CC3300;
}
#contenido h3 {
width:246px;
font-size:14px;
color:#999900;
border-bottom:1px dotted #999900;
}
#footer {
width:560px; /*menos porque debemos sumar el padding del div contenido*/
text-align:right;
padding:10px;
font-size:80%; /*mas pequeño el texto*/
font-style:italic;
color:#999999;
}
El documeno HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>4funkies Intranet</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css/estilos.css" rel="stylesheet" type="text/css"> <link href="css/capas.css" rel="stylesheet" type="text/css"> </head> <body> <div id="encabezado"> <h1>Titulo de la Pagina</h1> </div> <div id="menu"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div id="contenido"> <h2>Subtitulo 1 </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur turpis purus, fringilla at, tristique vitae, venenatis vel, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eget orci nec risus posuere facilisis. Proin sit amet nisl. Curabitur lectus felis, interdum vitae, vestibulum ultrices, vehicula vitae, nibh. Aliquam augue mi, viverra quis, fermentum id, mattis vitae, quam. In neque. Integer wisi metus, tempor vitae, tempus vitae, luctus a, enim. Mauris justo. Nulla rutrum sapien nec mi. Proin dolor neque, auctor ut, pulvinar ut, mattis eu, erat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed commodo facilisis arcu. Nunc semper. Donec in risus at tortor semper commodo. Integer porttitor, mauris in tempor congue, nisl erat imperdiet mi, non consequat wisi est in est. Aenean lobortis, wisi ac varius malesuada, lorem est varius enim, sit amet ultrices quam risus sed quam. Maecenas euismod adipiscing diam. Sed dui tortor, pellentesque at, vehicula et, gravida vel, magna. Integer condimentum dignissim erat. </p> <h3>Sub-subtitulo</h3> <p> Praesent tincidunt. Nam quis quam at nunc pretium eleifend. Praesent ipsum sapien, aliquam a, scelerisque sit amet, consectetuer in, arcu. Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. </p> <div id="footer">Copyright2005 - Derechos reservados</div> </div></div> </body> </html>
