Bereiche mit divlayer und css
-
Hallo,
ich versuche mir eine Seite zu erstellen. Ich hab hier im Webzeugs-Faq auch diesen Thread durchgelesen. Da werden zwar ausführlich die Nachteile von Tabellen als Layout-Hilfsmittel beschrieben, aber leider auch keine Alternative. (Oder habe ich sie übersehen?). Und da die Suche hier im Moment nicht funktioniert, bin ich auf die Idee gekommen den <div>-Tags und CSS zu benutzen. Hab, dann die Hauptseite erstellt. Mit dem IE wird gibt es seltsamerweise keine keine Probleme, aber Netscape 7 lässt zwei Bereiche, die in der selben Zeile stehen sollten, untereinander darstellen, wenn man das Fenster verkleinert. Da ich mich mit CSS/HTML nicht so besonders gut auskenne weiß ich auch nicht wie ich es diesen Umbruch vermeiden kann. Könnt ihr mir da weiterhelfen?Der Quelltext der Seite:
<html> <head> <link rel="stylesheet" type="text/css" href="fonttypes.css"> <style type="text/css"> #logoLayer { width: 15%; height: 9%; float: left; background-color: #D5F8FF; padding: 5px; border: thin solid gray; border-width: 1px; margin: 5px; } #bannerLayer { width: 80%; height: 9%; float: left; background-color: #D5F8FF; padding: 5px; border: thin solid gray; border-width: 1px; margin: 5px; } #navLayer { width: 15%; height: 95%; float: left; background-color: #D5F8FF; padding: 5px; border: thin solid gray; border-width: 1px; margin: 5px; } #mainLayer { width: 80%; height: 95%; float: left; background-color: #DFEFFF; padding: 5px; border: thin solid gray; border-width: 1px; margin: 5px; } #bottomLayer { width: 97.2%; height: 10%; float: left; background-color: white; padding: 5px; border: thin solid gray; border-width: 1px; margin: 5px; } </style> </head> <body> <div id="logoLayer">Logo</div> <div id="bannerLayer">Oben</div> <div id="navLayer">Links</div> <div id="mainLayer">Inhalt</div> <div id="bottomLayer"> <hr width="80%" align="center"> <div id="footprint">Fußzeile</div> </div> </body> </html>PS: Wie findet ihr eigentlich die Farben?
PPS: Gibt es eigentlich eine Möglichkeit, die Styledefinitionen vererben zu lassen. Also so zu machen, dass man z.B. ein mainLayer mit bestimmten padding, border, border-width und margin definiert. Und dann davon alle weitere "Klassen" ableitet, so dass man nicht dieselben Formatierungen nochmals schreiben muss.
-
Evtl. liegt es daran, dass du gar keine Angabe für position gemacht hast...
Zum Vererben könntest du entweder einen block div bei den Styles angeben, in den du alle gemeinsamen Styles angibst, oder machst einfach eine Klasse (.mainLayer) und gibst diesen dann bei den divs zusätzlich noch class="mainLayer" an
-
IE und Netscape behandeln Styleeigenschaften anders.
Der IE setzt das padding in die Ebene hinein ohne sie dabei in der Größe zu verändern, während der Netscape die Größe der Ebene um das angegebene padding erweitert. Gut möglich das da dein Fehler liegt.
Ich löse solche Paddingprobleme immer, in dem ich in meine Ebene noch eine zweite reinpacke, die dann ein margin bekommt, da das von beiden Browsern gleich interpretiert wird.Vererbung ist möglich wie flenders schon schrieb
div.mainLayer { Eigenschaften }muss aber mit class="mainLayer" angegeben werden.
-
Um nochmal auf die Tabellen zurüpckzukommen... c-plusplus.net macht das aber auch mit Tabellen *fg*
@bIce: Netscape hat eine seltsame Angewohnheit: Wenn Seiten breiter sind als das Fenster, und es sind mehrere Objekte nebeneinander, wird einfach die nächste Zeile genommen, egal, ob du "position: absolute;" machst oder nicht, wobei das unter Netscape sowieso nie richtig dargestellt wird. Darum würde ich dir empfehlen... da es dir niemand verbieten kann... Tabellen zu verwenden, da kan selbst ein seltsamer Netscape nicht mehr sagen: "Ich mach jetzt mal nen Zeilenumbruch", wenn du verstehst, was ich meine.
-
Ich weiß ja nicht, welchen Netscape du meinst, aber der neuste ist ziemlich Standardkonform, was Stylesheets angeht (im Gegensatz zum IE).
-
Loggy schrieb:
[...]der neuste ist ziemlich Standardkonform, was Stylesheets angeht (im Gegensatz zum IE).
Hä? Das musst du mir jetzt mal erklären... Microsoft hat die Stylesheets im Web quasi erfunden, wie soll denn dann Netscape standardkonform sein und IE nicht? Mag sein, dass sie sich gebessert haben, aber ich surfe... solange ich eine firewall hab... mit dem IE.
-
Egal, wer CSS "erfunden" hat, aber der Standard wird eben nicht von Microsoft festgelegt, sondern vom W3C :p
-
Microsoft hat nicht die Stylesheets erfunden, dass war das W3C (www.w3.org). Der IE unterstützt nur sehr mangelhaft die CSS2 Spezifikation, im Gegensatz zu der Rendering Engine Gecko, welche unter anderem vom Netscape 7 benutzt wird.
-
Echt? Nicht MS? Schade. Na egal, ich finde IE trotzdem besser.
-
Ein tolles Beispiel dafür ist doch die Hover-Eigenschaft. Wieso geht die beim IE denn nur bei Links?? Das ist nicht nur nervig sonder auch voll unverständlich für mich. Alle anderen aktuellen Browser haben damit keine Probleme..
-
Also ich hatte bisher keine Probleme damit... bei mir macht er es wunderbar.
-
Danke erstmal an alle, die geantwortet haben.
flenders schrieb:
Evtl. liegt es daran, dass du gar keine Angabe für position gemacht hast...
Ich hab mit position etwas rumprobiert, doch irgendwie ohne Erfolg, es wurde trotztdem umgebrochen.
MORL schrieb:
IE und Netscape behandeln Styleeigenschaften anders.
... Leider.
Der IE setzt das padding in die Ebene hinein ohne sie dabei in der Größe zu verändern, während der Netscape die Größe der Ebene um das angegebene padding erweitert. Gut möglich das da dein Fehler liegt.
Ich löse solche Paddingprobleme immer, in dem ich in meine Ebene noch eine zweite reinpacke, die dann ein margin bekommt, da das von beiden Browsern gleich interpretiert wird.Ich verstehe zwar nicht was Du meinst, aber als ich die padding-Eigenschaften auskommentierte, wurden die Bereiche erst dann umgebrochen, wenn die Breite des Browserfenster etwa 1/3 des Bildschirms betrug(17 Zoll, 1024/768px). Ist auch sinnvoll, damit man nicht unnötig horizontal scrollen muss. Aber das Problem ist jetzt dass der untere Bereich nicht die gleiche Breite hat, wie die oberen. Und der Abstand zwischen den Bereichen selbst nicht gleich. Ich arbeite aber daran es zu verbessern.
Windoof schrieb:
wobei das unter Netscape sowieso nie richtig dargestellt wird.
Wenn man davon ausgeht dass man nicht weiß, wie es richtig dargestellt werden soll, dann kann man auch sagen, dass IE es falsch macht und Netscape richtig (wenn man hauptsächlich Netscape verwendet - wie ich).
Darum würde ich dir empfehlen... da es dir niemand verbieten kann... Tabellen zu verwenden
Tabellen sind schnell hingetippt, und da ich mit dem Fertigstellen nicht unter Druck stehe, gehe ich die Sache ziemlich langsam an, und sehe dieses Problem eher als Herausforderung
(die mir ebenfalls niemand verbieten kann).
-
bIce schrieb:
Der IE setzt das padding in die Ebene hinein ohne sie dabei in der Größe zu verändern, während der Netscape die Größe der Ebene um das angegebene padding erweitert. Gut möglich das da dein Fehler liegt.
Ich löse solche Paddingprobleme immer, in dem ich in meine Ebene noch eine zweite reinpacke, die dann ein margin bekommt, da das von beiden Browsern gleich interpretiert wird.Ich verstehe zwar nicht was Du meinst, aber als ich die padding-Eigenschaften auskommentierte, wurden die Bereiche erst dann umgebrochen, wenn die Breite des Browserfenster etwa 1/3 des Bildschirms betrug(17 Zoll, 1024/768px). Ist auch sinnvoll, damit man nicht unnötig horizontal scrollen muss. Aber das Problem ist jetzt dass der untere Bereich nicht die gleiche Breite hat, wie die oberen. Und der Abstand zwischen den Bereichen selbst nicht gleich. Ich arbeite aber daran es zu verbessern.
Das ist folgender maßen:
Wenn du eine Ebene mit einer festen Größe erstellst, nehmen wir mal width:200px; height:100px;, dann wirkt sich ein padding in den zwei Browsern unterschiedlich aus.
Wenn nun diese Ebene ein padding:10px 10px 10px 10px; bekommen würde, würde im IE nichts weiter passieren, als das der Inhalt dieser Ebene jeweils 10px Abstand von jedem Rand der Ebene, in die Ebene hinein, hätte.
Ganz anders im Mozilla. Dieser verändert die Größe deiner Ebene um das padding auf 220px Breite und 120px Höhe.Man kann sich nun streiten was vorteilhafter ist, wobei ich persönlich die Interpretation des IE's bevorzuge, denn wenn ich eine Ebende mit einer festgelegten Größe erstelle, möchte ich das daran auch nichts verändert wird.
Wie dem auch sei.Ich würde dir noch raten keine %-Angaben bezüglich der Größen der Ebenen zu verwenden. Man ist dann zwar nicht mehr so flexiebel was die einzelnen Auflösungen betrifft, aber es gibt dann auch weniger Probleme beim gestalten des Inhaltes.
Du könntest eine große Tabelle um den gesamten Inhalt erstellen, in die du dann deine Ebenen legst (das ist auch die einzige Möglichkeit um ein Layout mit Ebenen in der Bildschirmmitte zu plazieren, glaube ich), aber ich will dir da nicht reinreden.
-
MORL schrieb:
Ich würde dir noch raten keine %-Angaben bezüglich der Größen der Ebenen zu verwenden.
Wie willst du ohne % eine nicht fixe Breite haben?
-
Shade Of Mine schrieb:
MORL schrieb:
Ich würde dir noch raten keine %-Angaben bezüglich der Größen der Ebenen zu verwenden.
Wie willst du ohne % eine nicht fixe Breite haben?
Wofür brauch man sowas?
EDIT : Wenn ich eine Ebene ohne Breitenangabe erstelle, dann hat sie immer 100% Breite. Wenn nun aber nur 90% gewünscht sind, dann kann man ja noch eine Tabelle um alles herum machen, da diese von allen Browsern fast gleich interpretiert werden, aber das hatte ich ja schon geschrieben.
-
siehe FAQ warum Tabellen dafür nicht missbraucht werden sollen.
Letztens hatte ich ein super Erlebnis.
Für unser Matura(Abitur) Projekt haben wir unter Anderem auch eine Website erstellt. Dies ist fix auf 1024x768 ausgelegt. Leider hatte ich mit der Website-Erstellung nichts zu tun, sonst wäre das nicht passiert:
Den Laptop den wir für das Projekt zur Verfügung gestellt bekamen kann nur eine Auflösung von 800x600 - sprich die Website sieht beschissen aus. Fazit: neu implementieren.Zum Glück ist es hier nicht um Geld gegangen - denn wenn ich das in der Arbeit abliefere und unser Kunde dann so etwas zu sehen bekommt, steigt er mit sicherheit aus. Und sowas kann mein Chef nicht leiden...
Das nur als kleine Anekdote für Leute die nicht glauben wollen, dass fixe Layouts schlecht sind.
-
Ich sag ja nicht das nicht feste Layouts schlecht sind.
Ich möchte aber mal sehen wie du eine Ebene zentriert positionieren willst, ohne eine Tabelle zu verwenden.
Ich meinte ja auch nicht das er alle Ebenen in eine Tabelle oder eine Tabellenspalte packen soll, sondern lediglich, das er eine Tabelle um alles herum erstellen kann, um so ein nicht fixes Layout zu erhalten.Anmerkung: Bis jetzt hat sie bei mir noch kein Kunde über das Ergebnis meiner Arbeit aufgeregt.
-
MORL schrieb:
Ich würde dir noch raten keine %-Angaben bezüglich der Größen der Ebenen zu verwenden. Man ist dann zwar nicht mehr so flexiebel was die einzelnen Auflösungen betrifft, aber es gibt dann auch weniger Probleme beim gestalten des Inhaltes.
Du könntest eine große Tabelle um den gesamten Inhalt erstellen, in die du dann deine Ebenen legst (das ist auch die einzige Möglichkeit um ein Layout mit Ebenen in der Bildschirmmitte zu plazieren, glaube ich), aber ich will dir da nicht reinreden.Solange man die Bildschirmauflösung von HTML bzw. JavaScript aus nicht ändern kann, nehme ich keine festen Breiten/Höhen u.a. Was bringt es wenn man zwar mit 1024/768 eine Seite erstellt, die ganz wunderbar aussieht, aber bei kleinerer Auflösung optischer Müll ist.
Aber ich hab die Seite mit dem IE 5.0 darstellen lassen, Anscheinend kann IE5 garnicht mit Bereichen umgehen. Deswegen überlege ich doch die Tabellen zu nehmen, oder 2. Versionen zu machen.
Shade of Mine schrieb:
Für unser Matura(Abitur) Projekt haben wir unter Anderem auch eine Website erstellt. Dies ist fix auf 1024x768 ausgelegt. Leider hatte ich mit der Website-Erstellung nichts zu tun, sonst wäre das nicht passiert:
Den Laptop den wir für das Projekt zur Verfügung gestellt bekamen kann nur eine Auflösung von 800x600 - sprich die Website sieht beschissen aus. Fazit: neu implementieren.Erinnert mich irgendwie an unseren Info-Lehrer. Der nahm für die Schulseite fixe Frames ohne Scrollbalken. Ist mir zwar egal, aber er leider bringt er es uns diesen Scheiss auch bei und behauptet es sei guter Stil.
-
Du hast mich völlig falsch verstanden, glaube ich.
Sicherlich ist es Mist, wenn man eine schöne Seite erstellt, die sich dann nicht jeder ansehen kann, aber ich finde auch, das man irgendwann aufhören sollte, auf Modemuser und Menschen die noch eine Auflösung von 800x600 haben, rücksicht zu nehmen.Ich habe eher gemeint, das du eine Tabelle mit nicht fixen Maßen als "Rahmen" vorgeben solltest, in den du dann deine Ebenen einbettest.
---------------------- | | | | | | | | | | | | | | | | | | | | | ----------------------So könnte der Bereich 1 z.B 20% Breite haben und der 2. 80%, denn Tabellen werden fast von jedem Browser gleich interpretiert, im Gegensatz zu Ebenen.
Wenn du nun deine Ebenen in die Tabelle reinpackst, musst du gar keine Größen angeben, da immer 100% des verfügbaren Bereiches genutzt werden.
-
Wenn ich die Tabellen nehme wozu brauche ich dann die divs innerhalb dieser? (Ich hab schon die Tabellen genommen)
MORL schrieb:
Du hast mich völlig falsch verstanden, glaube ich.
Sicherlich ist es Mist, wenn man eine schöne Seite erstellt, die sich dann nicht jeder ansehen kann, aber ich finde auch, das man irgendwann aufhören sollte, auf Modemuser und Menschen die noch eine Auflösung von 800x600 haben, rücksicht zu nehmen.Wenn ich dir jetzt sage, dass ich erstens selbst Modemuser bin und zweitens einen zusätzlichen Rechner mit einem 15-Zoll-Monitor und 800x600-Pixel Auflösung habe,...