Bereiche mit divlayer und css

MORL

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.

Shade Of Mine

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?

MORL

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.

Shade Of Mine

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.

MORL

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.

bIce

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.

MORL

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.

bIce

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,...

MORL

bIce schrieb:

Wenn ich die Tabellen nehme wozu brauche ich dann die divs innerhalb dieser? (Ich hab schon die Tabellen genommen)

Um Quelltext zu sparen! Wenn ich mir eine Seite an schaue, die nur auf Tabellen aufgebaut ist, dann steht da meist ein riesen Haufen an Quelltext, der sich vermeiden liesse, wenn man Ebenen nimmt.

So wie ich es meinte, hättest du nur 1 Tabelle, die dir die Anpassung der Bildschirmauflösung realisiert und der Rest wäre auf divs aufgebaut.
Naja, machs halt wie du willst.

bIce schrieb:

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,...

...würde ich sagen: selber schuld, wenn du mit dem 15"er im Netz surfst.

Ich hab auch einen 15"er an meinem Rechner als Zweitbildschirm dran, aber der läuft nicht auf 800x600.

Ich finde es richtig schlecht, wenn man sich Seiten anschauen muss, die nur für 800x600ter Auflösung gedacht sind, und dann vor einem 21" Bildschirm sitzt mit einer Auflösung von 1600x1200. Da hat man nun schon einen schönen großen Bildschirm, aber nutzen tut er einem nischt. Das finde ich auch ziemlich ärgerlich.
Ich finde es sehr löblich, das du eine auflösungsunabhängige Seite erstellen willst, aber das du dich da wegen so ein paar kleinen Browserproblemen gleich ins Boxhorn jagen lässt und von einem "sauberen" Layout abweichst finde ich nicht gut. Es gab letztens erst einen Thread in dem es um die Geschwindigkeit eines PHP-Scriptes ging und da waren es nur ein paar Millisekunden. Wenn ich mir dann aber den erhöhten Datentransfer durch einen zu aufgeblähten Quelltext vorstelle, wähle ich doch lieber die effizientere Variante mit den divs, die gerade dir als Modemuser doch sehr entgegen kommen sollte.

bIce

MORL schrieb:

...würde ich sagen: selber schuld, wenn du mit dem 15"er im Netz surfst.

Ich surfe nicht mit dem Bildschirm, ist nur ein Monitor von einem alten Pentium Rechner, der ne Standardinstallation von Win98 drauf hat. Ist bei mir sozusagen die Minimalanforderung für mein "Produkte". Der hat auch Internet Explorer 5.0 drauf. Und da wird die Seite mit den divs garnicht richtig dargestellt. Die Bereiche beginnen alle in der oberen linken Ecke. D.h. sie überlagern sich. Und ich zweifle daran, dass man es irgendwie anpassen kann damit die Seite richtig läuft. Deswegen habe ich Tabellen genommen.

Ich hab auch einen 15"er an meinem Rechner als Zweitbildschirm dran, aber der läuft nicht auf 800x600.

Höhere Auflösung als 800x600 wird vom Monitor (oder Graka) nicht richtig dargestellt. Flimmert stark dass man nichts erkennen kann. Deswegen nehme ich 800x600.

morph3us

Hallo,

Sry, dass ich den Thread wieder aus der Versenkung hole aber war schon gute vier Monate nicht mehr auf dem Board. Ich dachte mir, dass ich noch etwas nuetzliches dazu beitragen kann, wenn dies allerdings unerwuenscht ist, dann unterlasse ich es.

Windoof schrieb:

Mag sein, dass sie sich gebessert haben, aber ich surfe... solange ich eine firewall hab... mit dem IE.

<Kampf_gegen Windmuehle>
Eine Firewall ist ein Sicherheitskonzept und hat nichts mit einem halbschwindligen Paketfilter (auch genannt Personal "Firewall" alias Placebosoftware - was du jetzt wahrscheinlich mit dem Begriff 'Firewall' meinst) zu tun, der auf dem System installiert wird und noch dazu ueberhaupt keinen Nutzen hat ausser einem feucht-warmen Gefuehl der Scheinsicherheit.
</Kampf gegen Windmuehle>

Ausserdem wirst du mit dem M$ IE nie sicher sein koennen.

MORL schrieb:

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. [...]

Deine Erklaerung des Problemes ist richtig, allerdings sprichst du von Aepfeln und Birnen und vergleichst sie dann. Du kannst nicht alle Versionen von Netscape/Mozilla (Firefox) und alle Versionen des M$ IE in einen Topf werfen, da die verschiedenen Versionen einen riesigen Altersunterschied haben und aufgrund dessen die Webstandards ganz unterschiedlich interpretieren.

MORL schrieb:

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.

Die Interpretation und Darstellung einer Div-Box, welche Breiteangaben und zugleich eine margin, padding oder border Definition hat, wurde vom W3C als Box Model definiert. Darin wird genau beschrieben, wie ein Browser die Div-Box zu interpretieren hat und der M$ IE 5.x macht es falsch. Mozilla, Opera, sogar NC 4.7 und auch der M$ IE 6 machen es richtig und fuegen den definierten margin, padding oder border zu der Breite eines Elementes hinzu und das ist auch die einzig korrekte Darstellung des ganzen. Wenn ich ein Element mit einer bestimmten Breite definiere dann will ich schliesslich auch, dass es diese Weite hat und da soll kein margin, padding oder border was daran aendern.

Das ganze Problem wurde schon frueh entdeckt und das einzige Problem stellt wie beschrieben auch nur der M$ IE 5.x da. Es gibt auch einen Workaround des Problemes, wo eine Parse-Bug des M$ IE 5.x ausgenutzt wird. Naehered dazu findet man hier:
http://css-discuss.incutio.com/?page=BoxModelHack
http://www.tantek.com/CSS/Examples/boxmodelhack.html

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, [...]

Das war ein sprichwortlicher Griff ins Klo. Relative Angaben sind absoluten Angaben (fast) immer vorzuziehen.

man liquid design

MORL schrieb:

Ich möchte aber mal sehen wie du eine Ebene zentriert positionieren willst, ohne eine Tabelle zu verwenden.

http://www.google.de/search?hl=de&ie=UTF-8&q=vertical+center+css&btnG=Suche&meta=

MORL schrieb:

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.

Und da waeren wir wieder an dem Punkt anglangt: Du missbrauchst Tabellen!!!1!

Tabellen sind nicht als Layoutmittel gedacht, sondern nur um Content in tabellarischer Form darzustellen.

bIce schrieb:

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.

<Kampf gegen Windmuehle>
Die Bildschirmaufloesung ist so etwas von unerheblich. Wenn schon dann kommt es auf die zur Verfuegung stehende Hoehe bzw. Breite des Browserfensters an aber auch diese ist eher nebensaechlich. Mit Hilfe von CSS und relativen Angaben ist es nicht weiter schwierig eine Website zu realisieren, die bei kleinen Fensterbreiten und grossen Fensterbreiten aehnlich und auf jeden Fall ohne Probleme lesbar dargestellt wird.
</Kampf gegen Windmuehle>

bIce schrieb:

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.

Das waere kompletter Schwachsinn. Willst du nun moderne Layoutmittel verwenden oder nimmst du Techniken, die 1997 schon obsolet waren? Wieso zwei Versionen? Was versprichst du dir von diesem Mehraufwand?

Sogar NC 4.7 ist in der Lage CSS Layouts darzustellen:
http://www.saila.com/usage/layouts/nn4-layouts.shtml

Der M$ IE 5.x kann problemlos CSS Layouts darstellen, wenn man Macken, wie das Box Model Problem, kennt und diese mit Hilfe eines Workarounds umgeht.

bIce schrieb:

Und da wird die Seite mit den divs garnicht richtig dargestellt. Die Bereiche beginnen alle in der oberen linken Ecke. D.h. sie überlagern sich. Und ich zweifle daran, dass man es irgendwie anpassen kann damit die Seite richtig läuft. Deswegen habe ich Tabellen genommen.

Dann hast du dich nicht richtig mit CSS Layouts beschaeftigt. Wenn das Design nicht richtig dargestellt wird dann liegt der Fehler bei dir bzw. bei deinem Code. Du kannst nicht einfach erwarten, dass du was hinschmieren kannst und das soll dann anstandslos funktionieren, so einfach wirst du es *sehr* selten haben, wenn ueberhaupt.

Lesen, verstehen, anwenden:

Artikel:
"Tables are dead ...":
www.alistapart.com/stories/practicalcss/

"From Table Hacks to CSS Layout: A Web Designer’s Journey."
www.alistapart.com/articles/journey/

Other interesting articles:
www.alistapart.com/articles/
evolt.org/article/

Anleitung zu CSS-Layouts:
www.webreference.com/authori...ayout/advanced/

CSS-Layout Techniques + CSS-Hacks:
www.thenoodleincident.com/tutorials/box_lesson/
www.thenoodleincident.com/tu...sson/boxes.html
www.glish.com/css/
www.bluerobot.com/web/layouts/

CSS-Hacks:
glish.com/css/hacks.asp

CSS-Bugs:
www.macedition.com/cb/ie5macbugs/index.html

CSS-Sites:
www.meyerweb.com/eric/css/
www.meyerweb.com/eric/css/edge/
www.westciv.com/style_master/house/css_layout
www.csszengarden.com/
www.it.rit.edu/~ell/409blog/archives/000268.php

CSS-Experiments:
www.literarymoose.info/=/css.html
www.infimum.dk/DHTMLindex.html
www.markschenk.com/cssexp/
www.designdetector.com/tips/tips.php

www.positioniseverything.net
www.mako4css.com/index.htm

CSS-Layouts for NC 4.x:
www.saila.com/usage/layouts/nn4-layouts.shtml
www.fu2k.org/alex/css/