3 Spalten Layout mit Divs
0 0 0 
Jonathan
3 Spalten Layout mit Divs
Hallo,
ich habe ein kleines Problem mit einem 3 Spalten Layout.
Und zwar sollte es folgendermaßen Aussehen:
Ein Banner welches über die ganze Seite geht.
Links ein Menü mit fester Breite (200px).
Rechts eine Info Spalte mit fester Breite (200px)
Unten soll ein kleiner Footer sein, der auch über die ganze Seite verteilt sein soll.
Die Mitte mit dem eigentlichen soll von variabler Breite sein, sodass es bei einer Auflösung von 1024x768 wie auch bei einer Auflösung von 1280x1024 den gesamten Bildschirm ausfüllt. Jedoch soll die gesamte Seite eine mindest Breite von 800px haben.
Ich habe im Web schon etliche Beispiele gesehen, die zwar anfangs ganz gut aussahen, wenn man aber den Browser zu klein machte sich total übereinander schoben und letztendlich nicht mehr wie 3 Spalten sondern eher wie ein zusammengewürfelter Text aussahen.
Ich möchte das ganze gerne mit Divs machen, da ich mich mit dieser Homepage auf Bewerben möchte und man heutzutage Designtabellen ja nicht mehr verwenden sollte.
Bitte helft mir dieses Layout umzusetzen.
Gruß
Christoph
-
Hallo Christoph,
ich habe ein kleines Problem mit einem 3 Spalten Layout.
Und zwar sollte es folgendermaßen Aussehen:Gruß aus Köln-Ehrenfeld,
Elya
--
-
Danke für den Tipp!
Dieses Layout ist fast perfekt. ^^
-
Hoi,
mich einfach nervt diese Beispiele mit bugs. ZB dieses Beispiel, es sieht doch nicht genauso wie in FF, Opera un IE6 (wenn man browser resize). Okay wenn es waere in einem Blog oder so, so ein Beispiel, aber wenn ich das Beispiel mit solchen bugs in selfhtml.org sehe, dann diese webseite einfach sinkt in meinen Augen.
Und im netz gibt es zahlreiche Beispiele mit den bugs =(. Dann schon besser rausnehmen, wenn es gibt keine loesung dann schon nix.Inita
-
Hi,
Hoi,
mich einfach nervt diese Beispiele mit bugs. ZB dieses Beispiel, es sieht doch nicht genauso wie in FF, Opera un IE6 (wenn man browser resize).
bitte äußere Kritik sachlich und nachvollziehbar!
In welchem Firefox und Opera wird dieses Beispiel inwiefern anders dargestellt als im IE6?Ich kann im IE6 (und auch IE7) allenfalls einen etwas größeren Abstand der Fusszeile erkennen, der durch einen IE-Bug hervorgerufen wird, aber dem Beispiel nicht abträglich ist.
freundliche Grüße
Ingo-
hi Ingo,
wenn du das Beispiel im IE6 oeffnest und dann browser kleiner machst, bzw, sehr klein vertikal, das layout ist ganz unterbrochen.
Opera und FF, die neuste versionen.
Ich denke der content hat min-width oder weiss net, hab den code nicht geschaut.Inita
-
Hi,
wenn du das Beispiel im IE6 oeffnest und dann browser kleiner machst, bzw, sehr klein vertikal, das layout ist ganz unterbrochen.
sorry, aber selbst bei Einstellung des Schriftgrades auf "sehr klein" sehe ich keine Unterschiede bis zu einer Fensterbreite von etwa 520px, nach der sich die floatenden Elemente natürlich nach unten setzen.
Ich denke der content hat min-width oder weiss net, hab den code nicht geschaut.
Nö - nichts dergleichen ist im Beispiel.
freundliche Grüße
Ingo-
Hi,
wenn du das Beispiel im IE6 oeffnest und dann browser kleiner machst, bzw, sehr klein vertikal, das layout ist ganz unterbrochen.
sorry, aber selbst bei Einstellung des Schriftgrades auf "sehr klein" sehe ich keine Unterschiede bis zu einer Fensterbreite von etwa 520px, nach der sich die floatenden Elemente natürlich nach unten setzen.siehste, das beispiel ist nix zu gebrauchen. Sollten aber die floatende element nicht nach unten sich setzen, und das ist natuerlich erreichbar.
Inita
-
Hi,
sorry, aber selbst bei Einstellung des Schriftgrades auf "sehr klein" sehe ich keine Unterschiede bis zu einer Fensterbreite von etwa 520px, nach der sich die floatenden Elemente natürlich nach unten setzen.
siehste, das beispiel ist nix zu gebrauchen. Sollten aber die floatende element nicht nach unten sich setzen, und das ist natuerlich erreichbar.
Nein - wenn Du dieses Kapitel genau durchgelesen hättest, dann hättest Du auch genau diese Auswirkung von float erkannt, die ich durchaus positiv finde - besser als einen horizontalem Scrollbalken. Stichwort: flexibles Layout. Wer so etwas nicht will, der findet hier auch Layout-Vorschläge mit fester Breite:
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm
http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htmfreundliche Grüße
Ingo-
hoi,
meiner Meinung nach, sollte das Beispiel genauso ausehen in allen browsern das selber - FF, Opera, IE, Safari, egal was da oben geschrieben ist. Wenn diese floatende elemente fallen, dann schon muessen sie auch in ff und Opera nach unten fallen.
Inita
-
Hi,
meiner Meinung nach, sollte das Beispiel genauso ausehen in allen browsern das selber - FF, Opera, IE, Safari, egal was da oben geschrieben ist. Wenn diese floatende elemente fallen, dann schon muessen sie auch in ff und Opera nach unten fallen.
sie "fallen" aber nur in veralteten Browsern wie dem IE6. Und ich habe im Quelltext extra kommentiert:
"min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */"Dataus sollte ersichtlich sein, dass bei veralteten Browsern ein Umbruch erfolgt. Und da diese das Beispiel nicht unbrauchbar darstellen, finde ich das auch ok.
Du wirst doch sicherlich auch nicht mehr den Netscape 4 unterstützen und mit dem IE6 sehe ich das inzwischen ähnlich - solange die Seite nutzbar bleibt, toleriere ich meist eine unterschiedliche Darstellung. Abgesehen davon handelt es sich hier (wie auch bei den Übrigen Codes in diesem Kapitel) um ein *Beispiel* und nicht um eine fertige Vorlage für ein Layout. Die Beispiele sollen aktuelle Möglichkeiten für CSS-basierte Layouts aufzeigen - dass nicht mehr aktuelle Browser damit Probleme haben können, wird auch deutlich gemacht.
freundliche Grüße
Ingo-
morning,
common, ich muss dir doch nicht erzaehlen wie viel %ten IE6 die Usern noch nutzen. Wenn IE6 nutzen ca. 40% usern, dann es bedeutet schon etwas. Und Netscape nutzen ca. 0.33%, natuerlich dieser browser ist kein Thema.
Sowieso, kannst du mir alles was du willst sagen, sowieso bin der Meinung, ein gutes Beispiel muss einfach das selber aussehen in allen wichtigsten Browsern, und IE6 steht erster in der Reihe.
Also, wir testen die Homepagen in - IE6, IE7, Opera, FF, Safari (neue versionen). Und wenn das Beispiel von diesen browsern in einem anders ist, dann werde ich brummig.Also, heut ist smiley ':)' 25 Jahre alt, dann mach ich auch nen :).
Inita
-
Hi,
ich muss dir doch nicht erzaehlen wie viel %ten IE6 die Usern noch nutzen. Wenn IE6 nutzen ca. 40% usern,
soviele dürften es auf deutschen Seiten längst nicht mehr sein. Bei mir sind es z.B. nur noch ca. 26% und ich habe ein ziemlich gemischtes Publikum. Wenn der Trend anhält, dann könnte der IE7 den 6er bald überholen.
Und Netscape nutzen ca. 0.33%, natuerlich dieser browser ist kein Thema.
stimmt, das ist kein Thema mehr, zumal auch hier die Zahl weit geringer sein dürfte, weil die meisten Statistiken z.B. auch Mozilla/4.0 (compatible;) dem Netscape 4 zurechnen. Tatsächlich liegt der Anteil weit unter 0.1%.
Sowieso, kannst du mir alles was du willst sagen, sowieso bin der Meinung, ein gutes Beispiel muss einfach das selber aussehen in allen wichtigsten Browsern, und IE6 steht erster in der Reihe.
Da gebe ich Dir zwar recht, ber dennoch halte ich es inzwischen gerechtfertigt, für den IE6 keine augwendigen "Verrenkungen" mehr zu machen - solange die Seite unter normalen Bedingungen vernünftig dargestellt wird und nutzbar ist. Genau das ist bei diesem Beispiel doch auch gegeben; der Anteil von IE6-Usern, die auch noch mit weniger als 520px Fensterbreite daherkommen, dürfte verschwindend gering sein - und selbst dann bleibt die Seite auch für sie nutzbar.
Ich gehe inzischen auch dazu über, fortgeschrittene CSS-Möglichkeiten zu nutzen und sie dem IE6 vorzuenthalten, wie z.B. position:fixed - das positioniere ich für den IE6 einfach nur noch absolute und verzichte auf Workarounds. IE6-User merken gar nichts davon und wundern sich erst, wenn sie mal umsteigen und dann ein Menü auf einmal nicht mehr mitscrollt.
freundliche Grüße
Ingo-
okay, denke reicht schon =) muss jetzt arbeiten, Danke aber fuer Diskussion.
schoenen Tag,
Inita
-
-
-
-
-
-
-
-
-
-
-
-
Hallo Christoph,
zunächst im voraus schon einmal viel Erfolg bei Deinen Bewerbungen!
Aber als was willst Du dich bewerben? Als Mensch der gut googlen kann und dann wenn er was gefunden hat den Code zu kopieren?
Nicht im Netz schauen was es so fertiges gibt, sondern einfach malö selber drauf loslegen scheint mir der bessere Weg zu sein!
Auf diesem Weg solltest Du im Prinzip dann bei diesem Layout wohl folgendes machen:
1. oben den banner div rein....
2. das Menü links in ein div, das content Feld in ein div, rechts den kram in ein div...jetzt aber spätestens mal nach dem mächtigen Wort float Ausschau halten!
3. den footer in ein div reinBei Deiner Reise wird dir float sehr hilfreich sein und weitere css angaben zu größen, mindestgrößen (mal unbedingt mit IE und Fox anschauen..)
Und wenn es dann eine konkrete Frage gibt steht hier im Forum ein ganzes Arsenal von guten Köpfen bereit!Viele Grüße und Viel Spass!
Stephan
-
Hallo Stephan,
es ist mir schon klar das selber gemacht wesentlich besser ist als Copy'n'Paste.
Aber bei großen Projekten in Firmen kommt es nicht darauf an selber solche Probleme zu lösen (dauert einfach viel zu lange) sondern lieber schnell im Web nachzuschauen und dann eine bereits fertig Lösung zu nehmen und damit Zeit zu sparen.
Gruß
Christoph
-
-
Hallo Christoph,
Bitte helft mir dieses Layout umzusetzen.
Hallo, als erstes solltest du die z.B. mal folgendes angucken: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout. Und natürlich auch möglichst verstehen. Dieses musst da dann so erweitern, dass es 3 Spalten gibt.
Dann aber noch was anderes: In CSS ist es nicht möglich zu sagen: "Ich möchte, dass dieses Element 100% der Seitehöhe ausfüllt, minux 60px oben und 20px unten." Den gleichen Effekt kriegt man höchstens recht unsauber über überlagerte Elemente mit entsprechendem padding usw.
Jonathan
-
Hallo Jonathan,
danke für den Link. Werd mir mal den Weblog gleich mal durchlesen.
Gruß
Christoph
-