Para conseguir que tu layout cumpla con conceptos básicos de
accesibilidad web, deberás permitir que este se ajuste horizontalmente
y verticalmente al agente de usuario, esto lo podrías conseguir del
siguiente modo:

Expansión horizontal.

#mastcabecera {
 width: 80%;  /* width:768px;*/  /*  expansión horizontal adaptada al
agente de usuario */
 height:254px;
 margin:15px 0 0 8px;
 color:#030;
 background: #ECE4D9 url(images/masthead.jpg) no-repeat
}

y Expansión vertical (más actual):

#mastcabecera {
 width: 80%;  /* width:768px;*/  /*  expansión horizontal adaptada al
agente de usuario */
 /* height:254px; */ /* expansión vertical de la cabecera asegurada */
 margin:15px 0 0 8px;
 color:#030;
 background: #ECE4D9 url(images/masthead.jpg) no-repeat
}

Osea, si limitas el ancho con la etiqueta height, los elementos que
contiene dicho contenedor, no podrán expandir al contenedor si el
usuario lo necesita, ampliando el texto de tamaño que contenga.

Todo estos temas los trato en el curso de introducción al diseño web
que estoy impartiendo [1] por si alguien está interesado en el tema y
el segundo de los ejemplos está analizado en el libro Bulletproof Web
Design de Dan Cederholm[2].

saludos,
carlos

[1] http://www.chr5.com/cursos/
[2] http://www.simplebits.com/publications/bulletproof/




2009/2/25 Xavier Araque A.|Rendergraf <xavierara...@gmail.com>:
> De esto se ha hablado mucho pero quisiera saber alguna sugerencia de
> parte de ustedes.
>
> He usado varias resoluciiones para diseño de plantillas para Drupal o
> Worpress y quisiera compartir con ustedes algunas configuraciones de
> el CSS usado.
>
> body {
>  margin: 0;
>  padding: 0;
>  font-size: 95%;
>  font-family: Georgia,'Lucida Grande',Verdana,sans-serif;
>  text-align:center;
>  color: #333;
>  background: #FFFFFF url(images/background.jpg) center top fixed repeat-x;
> }
>
> #wrapper {
>  width:779px;
>  margin:0 auto 0 auto;
>  text-align:left;
> }
>
> #mastcabecera {
>  width:768px;
>  height:254px;
>  margin:15px 0 0 8px;
>  color:#030;
>  background: #ECE4D9 url(images/masthead.jpg) no-repeat
> }
>
>
>
>
>
>                    #content {
> width:779px;
> background: url(images/content.png)
> }
>
>
> Que dicen de esto?
>
>
>
> --
> .Xavier
>
> Soluciones Linux.
> http://linuxtachira.org
> http://rendergraf.wordpress.com
> Telf.: +58 412 0760091
> Linux counter: 292510
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a