2009-11-09 12 views
10

Acabo de pasar las últimas semanas aprendiendo cómo diseñar correctamente un diseño. Básicamente pensé que tenía todo perfecto con el diseño de mi sitio web y estaba listo para transferir la codificación a Wordpress ... y luego redimensioné accidentalmente mi navegador web y descubrí que todas mis capas div se superponían entre sí.¿Cómo evito que las capas div se superpongan cuando se cambia el tamaño del navegador?

Esto es lo que parece: overlapping divs

Básicamente parece que es sobre todo el contenido de mi centro de div que está siendo exprimido, así mi imagen de cabecera y bruja de navegación que están en la misma parte superior div. Mi pie de página también está comprimido. Busqué en Internet una solución a este problema y parece que no puedo encontrar nada.

¿Cómo lo arreglo para que mi div s permanezca en su lugar cuando se cambia el tamaño del navegador?

Respuesta

2

Me di cuenta. Resulta que el ancho de mi margen de contenido central fue dictado por los márgenes en lugar de solo un ancho directo (es decir, 500px). Por lo tanto, cada vez que se cambiaba el tamaño de la página, los márgenes a los lados del navegador intentaban mantenerse tal como estaban, lo que hacía que toda la columna fuera más pequeña.Solo tenía que deshacerme de los márgenes y especificar dónde quería que se asentara la columna en la página y simplemente justificar el ancho para ello.

0

¿Puedes publicar parte de tu CSS?

La manera más simple es dar a todas sus columnas configuraciones relativamente sanas width para que el tamaño de la ventana del navegador no afecte el tamaño de su diseño. Obtener la (s) columna (s) de ancho de fluido para que se comporte es más complejo y depende más de los detalles de su diseño.

10

como Walter dijo que su CSS sería útil. Pero, el problema principal es que el contenido en el div es que desborda a otros divs porque el div del contenido no puede contener todo el contenido.
En su CSS, intente configurar la propiedad de desbordamiento del div en auto (muestra desplaza barras) u oculta (para ocultar el contenido si sale fuera del div) p.

overflow:auto; 

o

overflow:hidden; 
+1

He intentado su sugerencia, pero no estoy muy seguro de dónde colocar la propiedad de desbordamiento. Lo puse en el contenedor div que contenía todo el resto del contenido y no hizo nada por desgracia. Sin embargo, aquí hay un enlace a todo mi CSS. No estaba seguro de qué sería realmente relevante o no. Gracias hasta ahora por la ayuda. Espero que haya una manera fácil de resolver esto. :( –

+0

El desbordamiento iría en cualquier div que contenga el texto "Esto es un subtítulo." Si lo coloca en un div principal sobre el div que contiene el texto del encabezado, puede que no herede apropiadamente. ¿Podría publicar el HTML también? ? También, como se dijo anteriormente, el ancho flexible es generalmente una mejor idea, pero requeriría que refactorice su css. – ErikHazzard

+0

El desbordamiento no pareció funcionar, por desgracia. Me parece que las imágenes también se sesgan en el área del encabezado oscuro, que tiene el nombre de mi sitio y mi navegación. Cargué mi página de prueba para que pueda verla funcionando (no funciona). http://lifesgarbage.com/rebnation.html –

1

Exprese sus anchuras y tamaños de fuente en EMS. Aquí hay una buena calculadora: http://riddle.pl/emcalc/

Los porcentajes funcionarán también.

Comprueba el CSS en stackoverflow, y trata de cambiar el tamaño del nivel de zoom en tu navegador aquí - verás que todo cambia de tamaño muy bien en cualquier nivel de acercamiento.

0

Echa un vistazo a la propiedad min-width. Otra opción es aplicar otra hoja de estilo cuando el ancho de la ventana gráfica está por debajo de x píxeles con CSS3 Media Queries así:

@media all and (max-width: 30em) { 
    /* Alternative narrow styles */ 
} 

más o menos:

<link media="all and (max-width: 30em)" 
     rel="stylesheet" href="narrow.css" /> 

CSS3 Consultas de medios todavía no son compatibles ampliamente, por lo que es posible que desee busque en una solución que aplique la hoja de estilo "estrecha" con JavaScript a través del evento window.onresize. Recomendaría jQuery para tal solución.

1

también puede probar el ancho mínimo. supongo que el centro div es fluido y las barras laterales son de ancho fijo.

0

Tuve el mismo problema si tiene ancho y alto en su Contenedor DIV que no cambiará excepto el ancho a menos que ponga un ancho mínimo. El problema que tuve fue cuando haría la ventana del navegador que los divs querían pasar a la siguiente línea

así que lo que hice fue en el contenedor que configuré una altura y un ancho. Antes de no establecer una altura, dejo que los divs determinen las alturas.

Cuestiones relacionadas