Tricky CSS Layout

Also mache ich eine Website mit einem recht problematischen Layout. Es gibt vier Eckbilder TL, TR, BL und BR, die durch schwarze Blöcke angezeigt sind. Der dunkelorange Bereich ist der Hauptinhalt (bis zu einer Breite von 960px), wobei der äußere Bereich durch den grünen Pfeil als Browserfenster bezeichnet wird. Siehe Diagramm:Tricky CSS Layout

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

Das obere Bild zeigt die Stelle an seiner schmalsten möglich - es ist nicht erlaubt sein sollte, dass sie schmaler als diese (960px), wenn es größer als der definierte Bereich ist, sollte es keine Scrollbalken sein . Die unteren beiden Bilder repräsentieren unterschiedliche Browserbreiten.

Die unteren linken und rechten schwarzen Blöcke (Bilder) sollten immer unten links und rechts vom Bildschirm sein, außer die Breite fällt auf 960px, in diesem Fall sollten die BL- und BR-Bilder in den Hauptbereich eindringen leicht. Wenn die Site auf 200px geschrumpft ist, sollte das BR-Bild nicht immer noch in der rechten Ecke stossen.

An diesem Punkt interessiere ich mich nicht wirklich dafür, genau in IE6 zu arbeiten (ich kann es ungefähr arbeiten lassen), aber ich kann nicht sogar herausfinden, wie man es völlig ohne Javascript oder extrem experimentelles CSS tut. Momentan verwende ich absolut positionierte div's, welche Art von Arbeit, aber nicht ganz richtig funktioniert.

Ich denke, ich wäre bereit, ein wenig von JS zu akzeptieren, wenn es keinen anderen Weg gibt, aber ich würde lieber nicht.

Antwort sehr geschätzt!

Quelle

2010-03-07 Meep3D

Mann, du hast ein paar verrückte Layouts! : D –

Ich weiß, wirklich habe ich mich für einen Fehler mit diesem einen. :( – Meep3D

BITTE BEACHTEN SIE: Ich werde diese Frage hüten und sie jedem geben, der antwortet. Sie müssen 24 Stunden oder so warten, bevor Sie ein Kopfgeld leider ausstellen (oder ich würde es jetzt tun), aber ich werde so lange warten, tu es, dann markieren Sie – Meep3D

Keine Notwendigkeit für Javascript. Zumindest in den meisten modernen Browsern. Mit einfachen Positionierung und eine @media Abfrage Ich zog es ab:

<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>

, die unter Ihrer Beschreibung geraten kann „extrem experimentelle CSS“, aber ich denke, Sie überrascht sein würde, wie viel Unterstützung sie hat, und Wie einfach wäre es, mit einem Touch JS das Bootstraping durchzuführen - einfach die Browserbreite bei der Größenänderung überprüfen und das zusätzliche CSS hinzufügen, wenn die Breite unter 1120 Pixel fällt.

Quelle

2010-03-09 08:01:15

Ja, Medienabfragen sind der Weg zu gehen. Unterstützt werden alle modernen Browser neben IE, aber wie bereits erwähnt, ist es einfach genug, nach Unterstützung für Medienabfragen zu suchen und dann die js hinzuzufügen. –

Wirklich cool, aber wie würdest du es unter IE arbeiten lassen? – van

Hier ist eine Option: http://www.protofunc.com/scripts/jquery/mediaqueries/ - Eine weitere Option ist das Hinzufügen von JS in einem bedingten Kommentar, der die Breite des Browserfensters überprüft (zB: '$ (window) .resize (function() {if $ (window) .width()> 1120px {... mach das ...};}); 'mit jQuery) und ändert das CSS nach Bedarf (zB' $ ('# container ') .css (' width ':' 960px ',' margin ':' 0 auto '); 'wieder mit jQuery). http://api.jquery.com/css/ –

Der einzige wirklich knifflige Teil ist der Boden. Th Rest ist ziemlich einfach:

<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; 
}

Und einige ähnliche Sachen für den #footer, aber Sie werden ein wenig Javascript verwenden müssen die Fensterbreite zu erfassen und Stellen Sie die left s leicht ein.

Quelle

2010-03-07 20:48:30 davethegr8

Ich habe etwas ähnliches - das Problem ist, dass die positive absolut positionierte # header.right Scrollbalken verursacht. Ich könnte wahrscheinlich damit leben, aber die Fußzeile spielt einfach keinen Ball. :( – Meep3D

@ meep3d - Ich kann dies nicht testen, aber versuchen Sie und setzen 'overflow-x: hidden; 'auf dem Body-Tag. Es * könnte * das Problem mit der Bildlaufleiste loswerden, indem Elemente (oder Teile von Elementen) (außerhalb des Körperelements) Es klingt kontraintuitiv, aber es könnte funktionieren. Wenn nicht, poste etwas Code, damit wir einen Riss daraus machen können. – davethegr8

Wird das nicht alle horizontalen Bildlaufleisten ausblenden? – Meep3D

So ähnlich? Sie können den JavaScript-Code durch einen ähnlichen JQuery-Code ersetzen, wenn Sie möchten, um nur die Idee zu geben, wie das funktionieren könnte.

<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>

Quelle

2010-03-07 21:41:51 poke

Setzen Sie das JavaScript in ein 'window.onload' Event. –

Uhm ... es ist in einem Onload-Ereignis .. – poke

Antwort

Verwandte Themen