ich knobel grad an einer etwas komplexen Umsetzung einer Website von mir. Um zu veranschaulichen was ich machen möchte, folgt hier nun ein kleines Bild
Wichtig ist dabei folgendes:
[ul]
[li]Content_top und Content_bottom haben eine feste Breite, während sich die äußeren Boxen dynamisch der Browserfensterbreite anpassen.[/li][li]Der Content hat keine feste Höhe.[/li][li]Content_bottom_left und Content_bottom_right dürfen den Content nicht unterschneiden, da alles Teile leicht transparent sind.[/li][/ul]Ich bin aktuell noch an der oberen Leiste, komme da aber schon nicht weiter. Ich denke wenn ich diese habe, ist der Rest ein Kinderspiel.
Das ist aber totaler Schwachsinn… und erfüllt seinen Zweck quasi gar nicht. Ich stehe wirklich total auf dem Schlauch. Habt ihr Ideen, wie ich das lösen könnte?
Such mal nach „CSS dreispaltiges Layout“. Die Eigenschaft float ist dafür das richtige. Und am Besten in Zusammenhang damit auch gleich „clear“ anschauen. (ich weiß nicht, ob es mit CSS3 mittlerweile „einfacher“ geht… Aber mit float würde ich es machen)
Ich weis nicht ob ich es richtig ausgedrückt habe, aber die äußeren Boxen sind am Rand des Browsers und sollen in der Größe variabel sein. Floaten ist mir bekannt, nur leider ist das eigentliche Problem eher, das Content_top_left die Lücke zwischen Content_top und Browserseite auffüllen soll und ich nicht weis wie ich die richtige Größe definiere.
Die Hintergrundfarben, sind zur Verdeutlichung des Beispiels gedacht. Funktioniert in allen modernen Browsern.
Für den IE in alten Versionen bitte das JavaScript Create Elements einbinden und die CSS-Deklarationen für die Elemente header, section und footer hinzufügen.
Ich habe auch nicht die Mitte gemeint, aber der Kopfbereich sind doch wohl drei Spalten, oder? (Aber ich habe das Problem auch darin gesehen, dass er es nicht nebeneinander bekommt, also nicht wirklich richtig…)
Der Vorschlag von Wustersoss ist leider auch nicht der Schlüssel zum Kern des Problems, denn: Content_top (in deinem Beispiel [FONT=monospace]
[/FONT][FONT=monospace]
) [/FONT]hat eine feste Größe und keine prozentuale Angabe. Dies ist leider zwingend notwendig… und genau das ist das Problem, an dem ich nicht weiter komme
Ganz einfach: die beiden äußeren Boxen bleiben 20% Breit und passen sich somit nicht der Browsergröße an. Das heist, sie tun es schon, allerdings ist 1. der Content nicht zentriert und 2. geht der rechte Container nicht bis zum Rand.
Das ist zu gross und macht keinen Sinn, da auf Vieports mit nur 1240px schon die mittlere box nicht reinpasst, wie soll dann platz sein für die äusseren Ränder?
Die äußeren Ränder sind auch nur für Auflösungen die GRÖSSER als 1280px sind. Zum Beispiel hat mein Bildschirm eine Auflösung von 2560x1440px. Somit macht es sehr wohl Sinn. Falls du das mit Vieports meinst…
Außerdem behaupte ich ja auch nicht das der eigentlich Content, sprich Textboxen usw. 1240px breit werden. Das ganze hat nur was mit der Gestaltung der Website zu tun
Sorry, aber habe nur einen Laptop. Und da ist bei Abzug der Ränder und Scrolleiste nur 1240Pixel Platz.
Mit einem Smartphone darf man deine Seite ja dann gar nicht betrachten, aber soll man wohl auch nicht.
Da kann ich dir leider nicht helfen.