| 

.NET C# Java Javascript Exception

2
Hallo

Aktuell:

#wrapper{
width:1200px;
margin:0 auto;


<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
<div id="footer"></div>
</div>


Klappt soweit. So ist die eigentliche Seite.

Nun soll dieses "verschönert" werden mit 2 Divs, die die Flächte links und rechts davon unterschiedlich füllen.

Die Flächte soll immer vom Browser Rand bis zum Wrapper gehen.
Wenn nur 1200 Pixel Breite vorhanden ist, sieht man diese also nicht sondern nur den aktuellen #Wrapper.

Am besten wäre es auch, wenn das Browser Fenster nur 1000 Px zur Verfügung hat, dass der Wrapper dann auf 1000 PX schrumpft und die äußeren Flächen dann auch nicht sieht.

Bin für Anregung dankbar - steh auf dem Schlauch wie ich das Sinnvoll mache.
Ich arbeite übrigens mit .less falls es was bringt.

Danke.
12.11.2012
meone 99 1 6
3 Antworten
2
So als Ansatz würde ich folgendes CSS verwenden:

#wrapper{
min-width:1000px; /* #wrapper will mindestens 1000px */
max-width:1200px; /* und maximal 1200px vom Browser */
margin:0 auto;
/* Damit die äußeren Spalte auch hinter #wrapper verschwinden */
position: relative;
z-index: 100;
}
#left-outer {
width: 50%; /* damit die Hintergrundfarbe von #left-outer hinter #wrapper reicht */
float: left;
position: absolute; /* damit #top nicht einrückt */
}
#right-outer {
width: 50%;
float: right;
}
#right-inner {
float: right; /* damit der Inhalt von #right-outer nicht unter #wrapper verschwindet */
}


und im HTML
<div id="left-outer">Left outer</div>
<div id="right-outer">
<div id="right-inner">Right outer</div></div>
<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
<div id="footer"></div>
</div>


Klappt in Firefox und Chrome, für (ältere) IE wäre ich mir da nicht so sicher (IE6 hat noch Probleme mit min-/max-width, wenn ich das richtig im Kopf habe). Sollte aber in die richtige Richtung gehen.
12.11.2012
phg 1,6k 3
Danke. Werde ich eventuell demnächst mal austesten.
Für den IE6 programmieren wir zum Glück nicht mehr, nicht mal eine minimale Anpassung :)

Da ich es eilig brauchte, habe ich es erstmal mit JS gelöst:

var tmp_body_width = $("body").width() - $("#wrapper").width();
var tmp_body_width = tmp_body_width / 2;
var tmp_wrapper_height = $("#wrapper").height();
$("#wrapper_left").width(tmp_body_width);
$("#wrapper_right").width(tmp_body_width);
$("#wrapper_left").height(tmp_wrapper_height);
$("#wrapper_right").height(tmp_wrapper_height);
meone 13.11.2012
0
Mit jQuery ist meine Lösung im Safari nicht zu gebrauchen, der braucht immer ein Tick zum berechnen. FireFox läuft super.

Deine Lösung wollte ich nun anfangen.
Aber die Breite müsste korrekt sein. Denn es soll ein Bild sozusagen links herausgucken (also links vom Content, in dem left-outer) und ein anderes Bild soll rechts herausgucken.

//

Habe nun in den Wrapper die Bilder gesetzt und absolut positioniert.

Danke.
13.11.2012
meone 99 1 6
meone 99 1 6
Ich dachte in die äußeren Spalten soll Werbung oder irgendwas anderes klickbares...
Was mir noch einfällt:
1. Du kannst die outer-container mit CSS erst mal verstecken (display: none;) dann mit JS deren Größen anpassen und dann via JS einblenden.
2. Wenn es nur Bilder sind könntest Du auch mal background-image/-position/-attachment auf body probieren.
3. Im Wrapper absolut positioniert? So mit left: -Ypx; um sie aus den Wrapper raus zu schieben? Kling eigentlich gut, hab ich gar nicht daran gedacht.
phg 13.11.2012
0
Was klickbares nicht. Außen kommen mehrere Divs hinein und verschiedene Gestaltungselemente. Plus eine Feder die links vom wrapper ist und dann rechts rauskommt.

Was ich nun am Ende aber gemacht habe (weil der Wrapper eine Kontur bekam (mit Schatten rechts) und die Bilder sonst drüber lagen:
Die Bilder doch nicht in den Wrapper, sondern absolut positioniert und verschoben. Dabei ging ich von 1200PX aus. Denn kleiner wirds ja nur wenn das Fenster zu klein ist und dann sieht man die Seiten eh nicht.
14.11.2012
meone 99 1 6

Stelle deine Css-Frage jetzt!