| Respuesta: Problemas con Capas
Yo tambien hago las paginas a puro código.
Existen dos tipos de diseños: Fijo y fluido.
Para los diseños fijos debes primero fijar un ancho con el que vas a trabajar por siempre, teniendo en cuenta que aquellos usuarios con una resolución de pantalla inferior a la que decidas usar, no prodrán ver el site de una forma cómoda.
Las pantallas 640x480 prácticamente no existen, y es muy poco probable que estén en equipos que tengan conexión a Internet.
Las pantallas 800x600 aún se usan, y es muy probable que estén en equipos con conexión a Internet, sin embargo este segmento es muy reducido como para sacrificar tu site a un ancho tan reducido.
Las pantallas 1024x720 ó 1024x600 son muy usadas actualmente, en base a este ancho es que hago mis sites. Por lo que cada DIV tendría las siguientes propiedades en el style del DIV, o en la hoja CSS de la página (recomiendo que uses hojas CSS por favor, te simplifica mucho el trabajo y hace la página más rápida):
width:980px; /*no pongo 1024 porque los browsers tienen scroll, y eso consume ancho en la pantalla*/
height:auto;
padding:10px;
margin: 10px auto 10px auto; /*aqui esta el secreto, al usar auto a los lados, logras que el DIV se centre automaticamente en cualquier tipo de pantalla, y sirve en todos los browsers.*/
Eso es basicamente lo que tienes que hacer, recuerda que los DIV por defecto tienen el atributo position en relative, lo que significa en términos prácticos que solo puedes poner un DIV por "linea". Si colocas dos DIV seguidos, con las mismas caracteristicas que puse anteriormente, verás que el 2do se coloca debajo del 1ro, ya que solo puede haber un DIV por "linea".
También recuerda que el atributo width no es el ancho total del DIV, solo representa el ancho del area editable dentro del DIV. Es decir, que si tengo un width de 980px, y un padding de 10px a cada lado, el DIV en total mide 1000px exactos. Si quisieras poner adentro del DIV una imagen que abarque todo el DIV, la imagen deberia de tener un ancho máximo de 980px.
---
Para diseños fluidos, es muy fácil y solo debes aprenderte esto, no le coloques el atributo width al DIV. ¿Simple no? Fijate, si le colocas width:100% (que seria para que abarque el 100% de la pantalla, cualquiera que esta sea), el DIV se expandira perfectamente al 100% de la pantalla, pero el texto dentro de él estaria pegadisimo a los bordes, por lo que te verias tentado a agregarle el atributo padding, supongamos unos 10px a cada lado, esto traería como consecuencia que el DIV tenga un ancho total del 100% + 20px, por lo que se saldría de la pantalla, y no caigas en el error de muchos tutoriales de colocarle al width un 95%, al fin y al cabo no vas a quedar satisfecho con los resultados.
Lo que debes hacer es omitir el width, no se lo pongas, el se va a ajustar igual al ancho de la pantalla, y puedes ponerle sin ningun problema un padding de 10px a cada lado. Entonces el CSS de ese DIV quedaria asi:
height:auto;
padding:10px;
margin: 10px;
El margin es para que el DIV como tal no quede pegado de los bordes del browser, solo por estética, pero si quieres lo omites.
Si quisieras hacer un diseño fluido donde un DIV sea de ancho fijo y el otro fluido; el CSS del DIV1 sería:
width:150px;
height:auto;
padding:10px;
float:left; /*esto es importante, recuerda que no pueden haber dos DIV en una misma "linea".*/
El CSS del DIV2 sería asi: (fijate que omití el width):
height:auto;
margin:0px 0px 0px 180px;
padding:10px;
El margin es 180px por lo siguiente, ¿cuanto es el ancho del DIV1? 150+20=170px. Pero yo quiero que haya 10px de separacion entre un DIV y el otro, por lo que se le suma 10px mas, quedando una separacion de 180px. Esto se debe a que el DIV2 no es flotante, y él en realidad debería de aparecer justo debajo del DIV1, por eso se le da un margin desde el borde izquierdo del browser.
Espero ayude esta explicación.
Saludos. |