html - div - tooltip css jquery
Diseño CSS complicado (3)
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 naranja oscuro es el contenido principal (con un ancho de 960px), con el área exterior indicada por la flecha verde como la ventana del navegador. Ver diagrama:
Diagrama http://dotcafedesigns.com/stackoverflow/problem.gif
La imagen superior representa el sitio en su posición más angosta posible: no se debe permitir que sea más angosta que esto (960px) si es más grande que el área definida, no debería haber barras de desplazamiento. Las dos imágenes inferiores representan diferentes anchos de navegador.
Los bloques negros (imágenes) de la parte inferior izquierda y derecha 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 sobresalir ligeramente del área principal. Si el sitio se reduce a, por ejemplo, 200 px, la imagen de BR aún no debería estar hurgando en la esquina derecha.
En este punto, realmente no me importa si funciona exactamente en IE6 (puedo hacerlo funcionar más o menos), pero ni siquiera puedo entender cómo hacerlo sin Javascript o CSS extremadamente experimental. Actualmente estoy usando divs de posición absoluta en qué tipo de trabajo, pero no funcionan del todo bien.
Creo que estaría dispuesto a aceptar un poco de JS si no hay otra manera pero prefiero no hacerlo.
Respuesta muy apreciada!
¿Algo como esto? Puede reemplazar el código JavaScript con un código JQuery similar si lo desea, solo desea dar una 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>
La única parte realmente difícil es la parte inferior. El 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 necesitarás usar un poco de javascript para detectar el ancho de la ventana y ajustar la left s ligeramente.
No es necesario tener Javascript. Al menos en la mayoría de los navegadores modernos. Usando un posicionamiento simple y una consulta @media 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>
Eso puede caer bajo su descripción de "CSS extremadamente experimental", pero creo que se sorprendería por la cantidad de soporte que tiene, y lo fácil que sería arrancar eso con un toque de JS, simplemente verifique el ancho del navegador en re -tamaño y añadir el CSS extra cuando el ancho cae por debajo de 1120px.