HTML/CSS 3 Spalten mit DIVs

Diskutiere HTML/CSS 3 Spalten mit DIVs im Internet Forum Forum im Bereich Software Forum; Hallo zusammen, ich mache derzeit eine Homepage, die in der Mitte einen festen Bereich von 780Pixel haben soll. Auf jeden Fall soll die...
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
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 :deal
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:
<><><<span style="color:#33CC00">></span>|Mainpage|<span style="color:#33CC00"><</span>><><>

Die grünen Klammer 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: <><><><span style="color:#33CC00">></span>|Mainpage|<span style="color:#33CC00"><</span><><><>
Richtig: <><><<span style="color:#33CC00">></span>|Mainpage|<span style="color:#33CC00"><</span>><><>

Mein erster Lösungsansatz:
Ich habe den kompletten Hintergrund mit diesen vielen kleinen Karos entfernt und zwei sehr breite Grafiken erstellt:
Grafik links: <><><><><><><><><<span style="color:#33CC00">></span>
Grafik rechts: <span style="color:#33CC00"><</span>><><><><><><><><>

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

Hier mal ein Link, der dieses Problem etwas verdeutlichen soll
http://www.sfroemken.de/esw/versuch.php
 
H

h3r3tic

Mitglied seit
14.02.2004
Beiträge
831
Alter
39
Standort
Berlin
Hai vielleicht hilft dir das hier weiter.
http://de.selfhtml.org/css/layouts/mehrspa...htm#dreispaltig

Dort wird auch erstmal das Layout dann mit DIV Tags erstellt und in die kannst du dann ja ein hintergrund bild einfügen.
Ansonsten würde ich mal eine Vorlage deinerseites als Bild sehen wollen kann mir nix so richtig vorstellen.
 
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Ich hab mal einen Teil des komplett Designs ausgeschnitten und hier eingefügt. Das sollte eigentlich als Vorstellung reichen:

siehe Anhang

Stefan
 

Anhänge

DerZong

DerZong

MODERATOR/FAQ-Team
Team
Mitglied seit
12.10.2004
Beiträge
4.701
Alter
42
Ist zwar jetzt auch kein direkter Lösungsvorschlag, jedoch finde ich die Seite http://glish.com/css/ in Bezug auf CSS-Layout auch sehr gelungen. Vorteil der Seite: Du siehst nicht nur, wie das Layout ist, sondern auch, wie der Quellcode dazu ist. Dann einfach den Teil, der "brauchbar" ist, rauskopieren und an deine Bedürfnisse anpassen.
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Hi Stefa,
eigentlich ist das Problem einfach! Natürlich wenn man weiß wie! :D

Also ich würde so in etwa vorgehen:
Code:
<BODY style="background-image: url(karografik.jpg);">
<DIV align="center">
<DIV style="background-image: url(schaten.jpg); width: 820px;">
<DIV style="background-color: hellblau; width: 780px">
... weiterer Inhalt ...
</DIV>
</DIV>
</DIV>
</BODY>
Aber dein Ansatz ist auch nicht verkehrt!
Im meinem Beispiel muss die Grafik schaten.jpg die gleiche Breite haben wie der DIV-Bereich. Sie muss Transparent sein und an den Seiten den Verlauf von Dunkelgrau auf Transparent haben.
Bei dir müssen zwei Grafiken den gleichen Verlauf haben, sind aber dann kleiner.

Die meisten Grafik-Programme kommen allerdings nicht mit der Transparents klar. Ich empfehle dir daher dazu Adobe Photoshop! Wenn du selber keinen hast, kännst du vielleicht einen der es hat.

Grüße dago
 
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Danke Euch,

auf dem Link habe ich leider kein Beispiel gefunden, dass mein Problem naäher erklärt. Ich habe heute 2 Stunden im Internet rumgesurft und sehr viele interessante Seiten gefunden, aber nirgends gibt es ein Beispiel in der DIV-Technik, in der der mittlere Bereich fix in der Breite und zentriert ist. Die Ränder fix zu machen= KEIN Problem aber genau die sollen ja dynamisch in der Anpassung sein.

@dago
Ich habe meinem Grafikdesigner gestern schon gesagt, dass er mit doch bitte den Schatten als transparentes gif schicken soll. Antwort: Das ist ein transparenter Verlauf und GIFs haben nur EINE transparente Farbe. Bliebe also NUR PNG übrig. Aber wie wir ja alle wissen, hat der IE immernoch Probleme damit. Ich glaub NUR der Opera und der Firefox können transparente PNGs richtig anzeigen.

Ich bastel zwar gerade an einer gesunden Tabellen --> DIV-Version, aber eigentlich wollte ich keine Tabellen verwenden. Ich werde auch keine verwenden, wenn ich noch eine saubere Lösung finde oder jemand noch einen guten Tipp hat. Ich muss leider weiterarbeiten, da das Projekt in 2 Wochen stehen soll. Deshalb die Notlösung erstmal mit kleiner Hilfe von einer Tabelle.

Aktuell anzuschauen unter:
http://www.sfroemken.de/esw/index2.php (mit Tabellen)
http://www.sfroemken.de/esw/index.php (ohne Tabellen)

Stefan Frömken

Die Tabellen-Version hat im Mozilla einen eigenartigen Nebeneffekt: Sie wächst nach unten raus. Falls dazu jemand eine Idee hat?!?!?!
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Ops, geht ja wirklich nicht! Bei mir hat es aber schon mit ein paar Grafiken geklappt, die auch im IE transparent zu machen. Kommisch aber mit Farbverläufen geht das wohl nicht. :nixweis

Warum greifst du nicht auf den Trick wie bei deiner Seite zurück? Funktioniert ja änlich!
 
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Dort sind ja auch die beiden Außenränder gefixt mit festen Werten wie 220px. Wenn du die Schoose allerdings mit festen Werten in die Mitte setzen willst, dann kannst du das anscheinend völlig vergessen.

Das einzige was "annähernd" funktionieren würde, wäre eine Aufteilung ala 15% -|- 70% -|- 15%. Wie aber schon gesagt, dann ist der mittlere Teil nicht fest mit 780px gesetzt.

Stefan
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Hi Stefan,
hab einen denkfehler gemacht, sorry!

Äm, ich versuch mal heute das zu bauen, denn dass interessiert mich jetzt!
Ich denke da an die Möglichkeit die Seitlichen Balcken (Schatten) mit margin-left:-xx oder so zu positionieren. Mal schauen was funktioniert.

Tja, habs zuerst einfacher vorgestellt. Meld mich später, bin heute bis Mittag unterwegs!

Also bis denne!
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Hi, hab jetzt etwas rum experementiert. Mir ist bis jetzt keine bessere Lösung eingefahlen, alls das Hint-Bild zu ändern (etwas größer zu machen). Hab ein einziges Bild mit zwei Spalten und dazwischen Hellblauembereich einfach in die Mitte zentriert und auf volle Höhe widerhollen lassen. Schau dir einfach den Anhang an!
[attachmentid=8182]

Bis jetzt hab leider keine bessere Lösung!
 

Anhänge

H

h3r3tic

Mitglied seit
14.02.2004
Beiträge
831
Alter
39
Standort
Berlin
Ich finds cool bis jetzt.

Ist mal ne "echte" lösung
 
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Wahnsinn...Eigentlich ganz simpel, aber auf die Idee muss man erstmal kommen. Klasse gemacht. Vielen Dank.

Hab die Pages schon entsprechend geändert:
http://www.sfroemken.de/esw/

Miniproblem ist eigentlich nur noch dieser dämliche Verlauf. Man kann runterscrollen im Mozilla.

Stefan
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Hi Stefan,
soll das Design in diese Seite Richtung gehen oder soll der Container sich nach unten zerren lassen?
 
froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Hab grad mit dem Grafikdesigner gesprochen. Der findet die Idee super, wenn wir das vom Aufbau her genau so hinbekommen, wie auf dieser Seite.

Ich hab das ungute Gefühl im Bauch, da das Hintergrundbild 2500px groß ist, dass ich auch bei einem Dreizeiler noch 2 Din A 4 Seiten weit nach unten scrollen kann.

Ich fang einfach mal an zu basteln und behalt das Forum im Auge.

Stefan
 
D

dago

Mitglied seit
05.09.2005
Beiträge
269
Alter
35
Standort
Rheinland-Pfalz
Hi, ich hab jetzt versucht die andere Lösung zu basteln und bei mir klappt das auch mit Firefox (oder Mozilla, eigentlich egal) nicht! Bei mir wird der Container nicht auf volle höhe gezert. Liegt woll daran das diese Browser bei "position: relative;" das zerren nicht unterstützen! :verysad
Bei "position: absolute;" sieht zwar alles zuerst ok aus. Aber wenn man etwas mehr Inhalt einfügt, dann hat man ein gravierendes Problem!
Kanns ja mal anschauen:
[attachmentid=8200]

ZITATIch hab das ungute Gefühl im Bauch, da das Hintergrundbild 2500px groß ist, dass ich auch bei einem Dreizeiler noch 2 Din A 4 Seiten weit nach unten scrollen kann.[/b]
Mach doch das Hintergrundbild fest positionieren. Dann brauchst du auch keine langen Grafiken! :deal
 

Anhänge

froemken

froemken

SPONSOREN
Threadstarter
Mitglied seit
22.02.2005
Beiträge
1.138
Alter
41
Standort
Im Oberbergischen
Hab jetzt viel geändert, viel programmiert und ich denke ein Dankeschön an alle wäre mal nicht schlecht:

:danke

Die grobe Struktur ist auf DIV umgestellt. Im mittleren Bereich selbst sind aber immer wieder Tabellen enthalten.
Die Texte kommen aus den Datenbank und die Navigation ist heute komplett fertig geworden. Jipie!!!

Stefan

http://www.sfroemken.de/esw/
 
Thema:

HTML/CSS 3 Spalten mit DIVs

HTML/CSS 3 Spalten mit DIVs - Ähnliche Themen

  • HTML/CSS: article :before :after Probleme

    HTML/CSS: article :before :after Probleme: Guten Abend, hab heute mal mit HTML/CSS angefangen und stoße nun auf ein großes Problem. Das Bild sollte schon einiges erklären. Wo das "l d"...
  • Windows 7 Startscreen in HTML CSS JavaScript und PHP Seite ändern?

    Windows 7 Startscreen in HTML CSS JavaScript und PHP Seite ändern?: Hallo, ich habe mal eine komplizierte Frage :) Ich würde gerne den Startscreen von Windows 7 in eine Art Internetseite ändern. (d.h. das ich...
  • GELÖST [html / css / js] div Inhalt via Link ändern

    GELÖST [html / css / js] div Inhalt via Link ändern: Hallo, ich habe eine (einfache?) Frage, undzwar würde ich gern eine eigene Bildergalerie bauen (wegen des Lerneffektes), allerdings bekomme ich...
  • GELÖST Fange gerade an HTML und CSS zu Lernen und hab fragen

    GELÖST Fange gerade an HTML und CSS zu Lernen und hab fragen: Hi hoffe es geht euch gut... Ich fange gerade an HTML zu lernen und will meine Eigenen Webseite gestalten ohne Faule Vorlage :) Nun komm ich...
  • Html und CSS + Javascript - Buttonevents

    Html und CSS + Javascript - Buttonevents: Hallo, habe kein anderes Unterforum gefunden, dass sich mit dem Thema beschäftigt, einige andere haben hier auch schon Fragen gepostet. Fangen...
  • Ähnliche Themen

    Oben