Small Pirate

Buenas, ante todo quiero saludar a todo el foro y quiero presentar eso, que no se si es un truco o un consejo o no se que es , pero quiero aclararlo , porque vi que les falta esto en diseños de gente muy buena y amiga mia del foro como anferro,virus y algunos más. Y es una aclaracion para todo aquel que quiera diseñar algo.
Se trata sobre los contenedores al diseñar.

Como dicen, una imagen vale más que mil palabras... por eso estube un ratito en el paint creando esta imagen que usar como ejemplo:



url: http://img825.imageshack.us/img825/3339/contendor.png

A la izquierda se puede observar una web en una resolucion de 1280x800, esta la parte de la web  y la del menu, nosotros nos centramos en la parte del menu, que en este caso esta hecha sin contenedor. Si lo notan los elemenots del menu sin contenedor se visualizan por una parte hasta la derecha del todo de lapagina y en la otra hasta la izquierda del todo d ela página. Y cuando cambiemos de resolucion se movera todo el rato, osea que es variable y no conviene.... en muchas resolcuiones se ve salido o mal o una encima de otra, nosotro lo que buscamos es que los elementos se vean en el centro justo como la pagina y que con diferentes resoluciones se vea igual.

En la parte derecha podemos observar la misma web en 1280x800 y el mismo menu, pero con contenedor. Ahora los elementos del menu aparecen alineados encima del menu y por mucho que acerquemos o alejemos la pagina o cambiemos la resolcuion , los elementos seguiran en la misma posicion de la pagina. Y es algo que conviene mucho :) y que hace los diseños mas estructurados y compatibles con difretnes resoluciones.

Y como puedo hacer un contenedor?

Pues yo te dejo uno simple hecho por mi.

#ContenedorSuperior{ margin: 0 auto; position: relative; width: "[color=red]xxx[/color]"px; height: "[color=red]xx"[/color]px; }

Y despues em tu index.template donde tengas tu menu le pones antes:   <div id="ContenedorSuperior"> aqui el menu </div>

:D Esto seria todo ^^ , hasta la proxima y espero haber ayudado a alguien a mejorar sus conocimientos :D Esto sirve para los menus tipo face o cualquiera que quieras centrar los elementos del menu :D

+1 ahora le entro a eso :p

para alinear los contenedores hago dos divs asi:


/*contendors general*/
div.class1{
   width:auto; /*width al 100% de cualquier resolucion*/
   height:auto; /*height al 100% de cualquier resolucion*/
   background:#F7F7F7;
}
/*contendor centrado*/
div.class2{
   width:960px; /*ancho normal*/
   min-width:960px;  /*si la ventana se achica el div no se deforma*/
   max-width:960px; /*si la ventana se amplia el div no se deforma*/
   margin:10px auto;  /*aplica margin left y right a un 50% centrando el div*/
   padding:10px;
  height:auto;
   background:#484848;
}

<div class="class1">
   <div class="class2">ya tengo el div centrado sea de cual sea el contenido y tipo de resolución</div>
</div>

Esto es otra opcion, pero yo puse algo mucho mas sencillo utilizando un solo div, el tuyo es mucho mas complejo, a la vez mas util:)  Yo en este consejo mas que buscar que no se deforme , busco mas o menos un centrado de los elemetos y a la vez un poco mas d eorden y que no se deforme tanto :D +1 freak.