Posicionamiento absoluto: un elemento expande la ventana, otro elemento no lo afecta. Ambos usan el mismo código: C

Agregué dos divs para guardar imágenes de fondo con fines decorativos, tal como solicitó el artista que trabaja conmigo en un sitio web.Posicionamiento absoluto: un elemento expande la ventana, otro elemento no lo afecta. Ambos usan el mismo código: C

Al principio, funcionó muy bien. Se suponía que las imágenes se mostraban en cada lado del div envoltorio que contenía el contenido del sitio web, sin afectar el ancho de la página.

Luego, la organización propietaria del sitio web obtuvo otro patrocinador, cuyo logotipo tuve que agregar a una columna a la derecha. Creé una nueva identificación para el quinto "botón" y creé un div para ella. Subiéndolo, noté que una barra de desplazamiento apareció repentinamente en la parte inferior de la página, sin ningún motivo aparente.

Primero sospeché que el problema era el botón, pero al final descubrí que el div decorativo más a la derecha estaba doblando el ancho de página, a pesar de usar el posicionamiento absoluto. Ambos divs usan el mismo código, solo duplicado para izquierda y derecha. No tengo idea de lo que está causando el problema ..

(Se puede ver el problema en la acción mientras dure en www.torucon.no/no/)

por favor me ayude! Aquí está el CSS para los dos divs:

#wolf 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
left:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/wolf.png'); 
z-index:-1; 
} 

#lion 
{ 
position:absolute; 
min-height:500px; 
min-width:498px; 
right:-293px; 
top:150px; 
background-image:url('http://www.torucon.no/css/lion.png'); 
z-index:-1; 
}

Aquí está un fragmento de HTML que muestra el HTML de los divs:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf"> 
</div> 
<div id="lion"> 
</div>

((En caso de que no lo consigue: El envoltorio div se supone que está centrado, y lo es. Pero cuando cambio el tamaño de mi ventana, descubro que una barra de desplazamiento aparece mucho antes de que el contenido de la envoltura esté cerca de los bordes de la ventana del navegador. Eso sería molesto en computadoras con baja resolución o pantallas pequeñas !))

Fuente

2012-04-21 Aurora Schmidt

Puedo sugerir 'body {/ * otras cosas */overflow-x: hidden; } '? Todavía no estoy seguro, * por qué * esto está sucediendo, pero parece tratar los síntomas, al menos. Sin embargo, es posible que deba especificar 'overflow-y: auto;' para evitar problemas en algunos navegadores. –

@DavidThomas Sí, pensé que podría hacer eso también. Pero realmente no debería suceder, ¿o sí? El flujo de la página ignora los elementos posicionados de manera absoluta, y por lo tanto no debería afectar el ancho del elemento del cuerpo, por lo que yo entiendo. Entonces, ¿no es mi culpa, sino un problema con la capacidad de los navegadores para representar el código? Además, al usar overflow-x: hidden ;, ¿eso no hace que también desaparezca el wrapper div fuera de las paredes del navegador una vez que cambia el tamaño de la pantalla? –

Tiendo a sospechar que, dependiendo del navegador que usaste, los desarrolladores se adhirieron a los estándares de W3 para renderizar (ningún software es perfecto, por lo que podría haber errores, pero aún así ...). Y si; tiene sus problemas como enfoque. =/ –

creo que lo que quiere es tener el león y el lobo que aparece progresivamente como el usuario se ensancha la ventana del navegador, pero por lo demás parcialmente oculta a los lados de la envoltura. ¿Correcto?

Creo que usted es la única opción segura para lograr esto sin activar las barras de desplazamiento que no le gustan son combinar las imágenes en una sola y adjuntarlas como imagen de fondo en el elemento del cuerpo de la página.

Creo que tiene razón sobre el uso del desbordamiento: oculto en el cuerpo; perdería la capacidad de desplazarse para ver el contenido desbordado si la ventana gráfica se redimensiona por debajo del ancho del envoltorio.

Fuente

2012-04-21 20:02:40 Faust

Ya sabes, esa fue una muy buena solución. ¡Y hasta lo he hecho antes! Me he acostumbrado a tener que escribir mucho código para corregir estos errores extraños, que he dejado de pensar en esas soluciones simples y lógicas. Gracias! <3 –

He comprobado que ha publicado el enlace http://www.torucon.no/no/ pero no pude ver la barra de desplazamiento inferior, De todos modos, ¿Por qué no se puede establecer el fondo?

<body> 
<div class="overlay"> 
    <div class="wrapper"> 
    </div> 
</div> 
</body> 


<style> 
    body{width:100%; background:---;} 
.overlay{width:100%; background:---;} 
<style>

Fuente

2012-04-21 18:43:51 ShibinRagh

Posicionamiento absoluto: un elemento expande la ventana, otro elemento no lo afecta. Ambos usan el mismo código: C

Respuesta

Cuestiones relacionadas