[HTML/CSS] 3 DIV-Spalten
- Ersteller froemken
- Erstellt am
Hallo zusammen,
ich mache derzeit eine Homepage, die in der Mitte einen festen Bereich von 780Pixel haben soll. Auf jeden Fall soll die Realisierung dieser Homepage mit den DIV-Tags erfolgen. Keine Tabellen, Keine Frames.
Bis hierhin noch ganz einfach
Rechts und links von diesem zentrierten Bereich in der Mitte (height: 100%) haben wir normalerweise einen einfachen gleichfarbigen Hintergrund. Beispiel wäre www.web.de
Jetzt soll aber in diese Außenbereiche eine Grafik eingebunden werden, die vertikal repeatet werden soll. Auch dafür habe ich eine Lösung gefunden: http://www.nordlichtfahrten.de/
Ab jetzt wirds für mich ganz schwierig. Hier komm ich nicht mehr weiter:
Als Grafik für den Außenbereich soll jetzt aber ein kariertes Muster eingefügt werden:
<><><>|Mainpage|<><><>
Die dicken Klammern sollen einen Schatten der Mainpage darstellen. Leider sieht man auch im Schattenbereich auf Grund seines transparent werdenden Verlaufs dieses karierte Muster.
Etwas verständlicher:
Der komplette Bodyhintergrund ist gefüllt mit diesen Karos. Da drüber lagernd mittig der DIV-Bereich mit rechts und links eine kleine Grafik, die den Schattenverlauf darstellt. Da man transparente Verläufe mit GIFs nicht realisieren kann (NUR eine transparente Farbe) musste ich den Schattenverlauf als ein JPG abspeichern. In diesem JPG sieht man nun aber auch noch einen Schnipsel von diesem Karomuster, das beim Scalieren des Fensters natürlich nicht immer zu dem karomuster vom Hintergrund zusammen passt:
Falsch: <><><>>|Mainpage|<<><><>
Richtig: <><><>|Mainpage|<><><>
Mein erster Lösungsansatz:
Ich habe den kompletten Hintergrund mit diesen vielen kleinen Karos entfernt und zwei sehr breite Grafiken erstellt:
Grafik links: <><><><><><><><><>
Grafik rechts: <<><><><><><><><>
Diese Grafiken habe ich jetzt einfach rechts und links von meinem Mainbereich eingefügt, dadurch wurde aber meine Homepage in der horizontalen SCROLLBAR. Wie sage ich denn dem Browser, dass die Außenbereiche eine gleiche variable Größe haben und die Bilder entsprechend abgeschnitten werden?
Klar! Wenn auch der Mainbereich eine Prozentuale Größe hätte, wäre all dies kein Problem, aber dieser ist nun leider 780px fix zentriert.
Bin ja mal gespannt, ob da jemand eine Antwort zu hat.
Stefan Frömken
ich mache derzeit eine Homepage, die in der Mitte einen festen Bereich von 780Pixel haben soll. Auf jeden Fall soll die Realisierung dieser Homepage mit den DIV-Tags erfolgen. Keine Tabellen, Keine Frames.
Bis hierhin noch ganz einfach
Rechts und links von diesem zentrierten Bereich in der Mitte (height: 100%) haben wir normalerweise einen einfachen gleichfarbigen Hintergrund. Beispiel wäre www.web.de
Jetzt soll aber in diese Außenbereiche eine Grafik eingebunden werden, die vertikal repeatet werden soll. Auch dafür habe ich eine Lösung gefunden: http://www.nordlichtfahrten.de/
Ab jetzt wirds für mich ganz schwierig. Hier komm ich nicht mehr weiter:
Als Grafik für den Außenbereich soll jetzt aber ein kariertes Muster eingefügt werden:
<><><>|Mainpage|<><><>
Die dicken Klammern sollen einen Schatten der Mainpage darstellen. Leider sieht man auch im Schattenbereich auf Grund seines transparent werdenden Verlaufs dieses karierte Muster.
Etwas verständlicher:
Der komplette Bodyhintergrund ist gefüllt mit diesen Karos. Da drüber lagernd mittig der DIV-Bereich mit rechts und links eine kleine Grafik, die den Schattenverlauf darstellt. Da man transparente Verläufe mit GIFs nicht realisieren kann (NUR eine transparente Farbe) musste ich den Schattenverlauf als ein JPG abspeichern. In diesem JPG sieht man nun aber auch noch einen Schnipsel von diesem Karomuster, das beim Scalieren des Fensters natürlich nicht immer zu dem karomuster vom Hintergrund zusammen passt:
Falsch: <><><>>|Mainpage|<<><><>
Richtig: <><><>|Mainpage|<><><>
Mein erster Lösungsansatz:
Ich habe den kompletten Hintergrund mit diesen vielen kleinen Karos entfernt und zwei sehr breite Grafiken erstellt:
Grafik links: <><><><><><><><><>
Grafik rechts: <<><><><><><><><>
Diese Grafiken habe ich jetzt einfach rechts und links von meinem Mainbereich eingefügt, dadurch wurde aber meine Homepage in der horizontalen SCROLLBAR. Wie sage ich denn dem Browser, dass die Außenbereiche eine gleiche variable Größe haben und die Bilder entsprechend abgeschnitten werden?
Klar! Wenn auch der Mainbereich eine Prozentuale Größe hätte, wäre all dies kein Problem, aber dieser ist nun leider 780px fix zentriert.
Bin ja mal gespannt, ob da jemand eine Antwort zu hat.
Stefan Frömken
feelx
Grand Admiral Special
Hi!
... hoffen wir's mal
Ich glaube, was du suchst sind die sogenannten "Faux Columns" - es gibt viele Beispiele dazu im Netz. Das Original von Dan Cederholm oder hier noch ein ausführlicheres Beispiel (mit Karomuster), das ich empfehlen würde...
Aber suche mal noch nach "Faux Columns" im Netz - vielleicht findest du grad noch was passendes dazu..
Ich würde mir beim Schreiben einer Homepage nicht sooo viele Gedanken über das Design machen, sondern erstmal die Seite in sauberem HTML schreiben (ohne Tabellen und ohne Frames ist schon ein guter Ansatz!) und danach mir Gedanken übers Design machen, wie sich irgendwas am besten realisieren lässt.
png stellen noch die Transparenz korrekt dar, das kann aber wiederum der doofe IE nicht, also schlecht. Probier also den Schatten wegzulassen oder irgendwie anders zu realisieren.
Dein Lsgansatz mit den Bildern und den Schatten Hintergrund müsste klappen. Zeig doch mal deine bishere HP, dann kann mans sich mal genauer anschauen.
flO
png stellen noch die Transparenz korrekt dar, das kann aber wiederum der doofe IE nicht, also schlecht. Probier also den Schatten wegzulassen oder irgendwie anders zu realisieren.
Dein Lsgansatz mit den Bildern und den Schatten Hintergrund müsste klappen. Zeig doch mal deine bishere HP, dann kann mans sich mal genauer anschauen.
flO
http://www.sfroemken.de/esw/index.php (ohne Schatten auf DIV-basis)
http://www.sfroemken.de/esw/index2.php (Mit etwas Hilfe von Tabellen)
Stefan
http://www.sfroemken.de/esw/index2.php (Mit etwas Hilfe von Tabellen)
Stefan
feelx
Grand Admiral Special
Hallo!
In diesem Fall ist es relativ einfach zu lösen....
Ich habe eine neue Grafik für den <body> Background gemacht, die sehr breit ist (im Beispiel 2000 x 45px). Dabei ist darauf zu achten, dass GENAU in deren Mitte die 780px + Schatten an beiden Rändern angebracht ist.
Zur Anschauung - ich meine eine solche Grafik hier:
[ > klick < ]
Und dann muss nur noch die Definition für den body im CSS wie folgt geändert werden:
Dank der 'background-position: 50%' wird die Hintergrundgrafik zentriert. Und weil Grafik ja ebenfalls zentriert ist, stimmt sie mit deinem bisherigen Layout überein.
Und jetzt sieht es so aus auch ohne Tabelle.
Greetings
/* Edit */
BTW: Was ich noch vergessen habe - Du solltest immer auf einee korrektee DocType Deklaration in deinem HTML File achten. Bei dir fehlt es nämlich in beiden Beispielen. Wenn der fehlt, schalten Browser in den Quirksmode. Das spielt zwar jetzt keine Rolle - es kann aber unschöne Effekte mitsich bringen... z.B. komisches Verhalten bei der Positionierung oder mit dem css-attribut 'line-height' und so weiter.
Zuletzt bearbeitet:
Ähnliche Themen
