Tricky CSS Layout

Así que estoy haciendo un sitio web con un diseño bastante problemático. Hay cuatro imágenes de esquina TL, TR, BL y BR indicadas por bloques negros. El área de color naranja oscuro es el contenido principal (hasta un ancho de 960px), con el área exterior indicada por la flecha verde como la ventana del navegador. Véase el diagrama:Tricky CSS Layout

Diagram http://dotcafedesigns.com/stackoverflow/problem.gif

La imagen superior representa el sitio en su parte más estrecha posible - no se debe permitir que sea más estrecha que esto (960) si es más grande que el área definida no debe haber barras de desplazamiento . Las dos imágenes inferiores representan diferentes anchos de navegador.

Los bloques negros inferiores derechos e inferiores (imágenes) deben estar en la parte inferior izquierda y derecha de la pantalla en todo momento, a menos que el ancho caiga a 960px, en cuyo caso las imágenes BL y BR deberían meterse en el área principal ligeramente. Si el sitio se reduce a, por ejemplo, 200px, la imagen BR no debería estar pinchando en la esquina derecha.

En este punto, realmente no me importa que funcione exactamente en IE6 (puedo hacerlo funcionar de forma aproximada) pero ni siquiera puedo averiguar cómo hacerlo completamente sin Javascript o CSS extremadamente experimental. Actualmente estoy usando Divs absolutamente posicionados que tipo de trabajo, pero no funcionan del todo bien.

Creo que estaría dispuesto a aceptar un poco de JS si no hubiera otra opción, pero preferiría no hacerlo.

Respuesta muy apreciada!

Fuente

2010-03-07 Meep3D

¡Hombre, tienes algunos diseños locos! : D –

Lo sé, realmente me preparé para un fracaso con este. :( – Meep3D

NOTA: Recompensaré esta pregunta y se la daré a quien conteste. Tienes que esperar 24 horas antes de emitir una recompensa desafortunadamente (o lo haría ahora) pero esperaré tanto, hazlo, luego te marcaré como la respuesta correcta. ¡Gracias! – Meep3D

No es necesario Javascript. Al menos en la mayoría de los navegadores modernos. El uso de posicionamiento simple y una consulta @media que lo logró:

<head> 
    <style type="text/css" media="screen"> 
    body { 
     margin: 0; 
     padding: 0; 
     font-family: sans-serif; 
     background: orange; 
     text-align: center; 
     color: black; 
     overflow-x: hidden; 
    } 
    #content { 
     width: 960px; 
     margin: 0 auto; 
     padding: 20px 0; 
     min-height: 800px; 
     background: #cc6600; 
     z-index: 0; 
    } 
    .image { 
     background: black; 
     color: white; 
     height: 60px; 
     width: 100px; 
     padding: 20px 0; 
     z-index: 1; 
     opacity: .95; 
    } 
    #top { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
    } 
    #top .image { 
     position: absolute; 
    } 
    #top .left { 
     left: -80px; 
    } 
    #top .right { 
     right: -80px; 
    } 
    #bottom { 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     height: 100px; 
    } 
    #bottom .image { 
     position: absolute; 
    } 
    #bottom .left { 
     left: 0; 
    } 
    #bottom .right { 
     right: 0; 
    } 

    @media all and (max-width:1120px) { 

     #container { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
     } 
     #bottom .left { 
     left: -80px; 
     } 
     #bottom .right { 
     right: -80px; 
     }  

    } 
    </style> 
</head> 
<body> 
    <div id="top"> 
    <div class="left image">left image</div> 
    <div class="right image">right image</div>  
    </div> 
    <div id="content"> 
    content 
    </div> 
    <div id="bottom"> 
    <div id="container"> 
     <div class="left image">left image</div> 
     <div class="right image">right image</div> 
    </div> 
    </div> 
</body>

que pueden caer bajo su descripción de "CSS muy experimental", pero creo que usted se sorprenderá por la cantidad de apoyo que tiene, y qué fácil sería arrancarlo con un toque de JS: simplemente revise el ancho del navegador al cambiar el tamaño y agregue el CSS adicional cuando el ancho sea menor a 1120px.

Fuente

2010-03-09 08:01:15

Sí, las consultas de medios son el camino a seguir. El soporte es todos los navegadores modernos, aparte de IE, pero como se mencionó, es bastante fácil verificar soporte de consulta de medios y luego agregar el js. –

Realmente genial, pero ¿cómo harías que funcione bajo IE? – van

Aquí hay una opción: http://www.protofunc.com/scripts/jquery/mediaqueries/ - Otra opción es agregar algunos JS en un comentario condicional que verifique el ancho de la ventana del navegador (por ejemplo, algo como: '$ (ventana) .resize (function() {if $ (window) .width()> 1120px {... do this ...};}); 'con jQuery) y cambia el CSS según sea necesario (ej.' $ ('# container) ') .css (' ancho ':' 960px ',' margen ':' 0 auto '); 'de nuevo con jQuery). http://api.jquery.com/css/ –

La única parte realmente complicada es la inferior. Th resto es bastante sencillo:

<body> 
    <div id="container"> 
     <div id="header"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 

     <div id="footer"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 
    </div> 
</body>

CSS:

#container { 
    margin: 0 auto; 
    width: 960px; 
} 

#header { 
    position: relative; 
} 

#header .right, #header .left { 
    position: absolute; 
    width: 100px; 
} 

#header .right { 
    left: 940px; /* leaves 20px inside the #header */ 
    background: url(images/header_right.gif) no-repeat; 
} 

#header .left { 
    left: -80px; /* leaves 20px inside the #header */ 
    background: url(images/header_left.gif) no-repeat; 
}

y algunas cosas similares para el #footer, pero usted tendrá que utilizar un poco de javascript para detectar el ancho de la ventana y ajuste el left s levemente.

Fuente

2010-03-07 20:48:30 davethegr8

Tengo algo similar a eso: el problema es que el # Posible posición absoluta posicionado correctamente produce barras de desplazamiento. Probablemente podría incluso vivir con eso, pero el pie de página simplemente no juega a la pelota. :( – Meep3D

@ meep3d - No puedo probar esto, pero intente configurar 'overflow-x: hidden;' en la etiqueta body. * Podría * deshacerse del problema de la barra de desplazamiento, ocultando elementos (o partes de elementos) fuera del elemento del cuerpo). Suena contra-intuitivo, pero podría funcionar. De lo contrario, publique un código para que podamos analizarlo. – davethegr8

¿No esconderá todas las barras de desplazamiento horizontales? – Meep3D

¿Algo como esto? Si lo desea, puede reemplazar el código JavaScript con código JQuery similar, solo quería dar la idea de cómo podría funcionar esto.

<html> 
<head> 
    <title>....</title> 

    <style type="text/css"> 
    html 
    { height: 100%; margin: 0; background: white; } 
    body 
    { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; } 
    #main 
    { margin: 0px; padding: 5px 20px; position: relative; } 

    #headLeft 
    { position: absolute; top: 0px; left: -80px; 
    width: 100px; height: 35px; background: green; } 
    #headRight 
    { position: absolute; top: 0px; right: -80px; 
    width: 100px; height: 35px; background: green; } 
    #footLeft 
    { position: absolute; bottom: 0px; left: 0px; 
    width: 100px; height: 35px; background: green; } 
    #footRight 
    { position: absolute; bottom: 0px; right: 0px; 
    width: 100px; height: 35px; background: green; } 
    </style> 

    <script type="text/javascript"> 
    function checkSize (event) 
    { 
    var contentWidth = 960; 
    var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area 

    if (window.innerWidth - contentWidth < minOuterBoxSize * 2) 
    { 
     var pos = ((minOuterBoxSize * 2) - window.innerWidth + contentWidth)/2; 
     document.getElementById('footLeft').style.left = '-' + pos; 
     document.getElementById('footRight').style.right = '-' + pos; 
    } 
    else 
    { 
     document.getElementById('footLeft').style.left = '0px'; 
     document.getElementById('footRight').style.right = '0px'; 
    } 
    } 
    </script> 
</head> 

<body onload="checkSize(event);" onresize="checkSize(event);"> 
<div id="main"> 
    <div id="headLeft">TL</div> 
    <div id="headRight">TR</div> 

    <p>Normal content</p> 
</div> 

<div id="footLeft">BL</div> 
<div id="footRight">BR</div> 
</body> 
</html>

Fuente

2010-03-07 21:41:51 poke

Ponga el JavaScript en un evento 'window.onload'. –

Uhm ... está en un evento de carga .. – poke

Respuesta

Cuestiones relacionadas