CSS ist schön!

[Herbalizer]

Hallo an alle!

Wer bis jetzt davon überzeugt ist, das Seiten, welche sich strengstens an die Richtlinien des W3C halten, nur in einfallslosem technokratischem Kästchendesign daher kommen und auch nicht anders daher kommen könnten, sollte sich http://www.csszengarden.com/ ansehen!!! EINE Quelle strickten barriereminimierten XHTML's in zur Zeit 17 sehr unterschiedlichen Designs, welche ausschlieslich durch CSS realisiert werden. Insofern kommen auch nur Nutzer moderner Desktopbrowser in den vollen grafischen Genuss, während die Mobilfraktion und Gurken wie der NN4 (selbst in Konqueror2 sehen die meisten Seiten perfekt aus) den uneingeschränkt nutzbaren Inhalt der Seite ohne Eyecandy zu sehen.

Gruß Herbalizer

[Stefan Einspender]

Hallo Dresdner (?),

http://www.csszengarden.com/

soll ich jetzt etwa 17 Screenshots für http://xse.de/css/ machen?!
Weißt Du nicht, dass das Patchwork schon komplett ist?!

Viele Grüße,
Stefan

;-)

[Herbalizer]

Hi!

Hallo Dresdner (?),

Jup. So ist es.

Gruß Herbalizer

[Henryk Plötz]

Moin,

EINE Quelle strickten barriereminimierten XHTML's in zur Zeit 17 sehr unterschiedlichen Designs, welche ausschlieslich durch CSS realisiert werden.

Sehr schön!

Aber es zeigt auch recht deutlich die Probleme mit CSS-Positionierung: Bei einigen Designs überlappen sich die Texte so das sogar die Benutzung unmöglich wird. Wie hier bei Coastal Breeze:
<img src="http://www.ploetzli.ch/forumtst/csszenshot1.png" border="0" alt="">
(Der Link "css file" ist nicht mehr anklickbar)

Und schlimmer wird es noch, wenn ich die Schriftgröße ändere:
<img src="http://www.ploetzli.ch/forumtst/csszenshot2.png" border="0" alt="">

(Das ist nicht nur bei diesem Design so. rpm hat zum Beispiel ein ähnliches Problem.)

IMHO ist das eine Schwäche von CSS an sich. Die Positionierungsmöglichkeiten sind zu eingeschränkt. Man kann nicht einfach sagen "Positioniere dieses div rechts von dem anderen div" sondern man muß sich mit "Positioniere dieses div x Einheiten nach rechts und mache das andere div höchstens x Einheiten breit" (für ein festes x) behelfen.
Es sollte vielmehr ein Layout-Modell wie beispielsweise im SWT von Java geben.

[Herbalizer]

Hi!

Aber es zeigt auch recht deutlich die Probleme mit CSS-Positionierung: Bei einigen Designs überlappen sich die Texte so das sogar die Benutzung unmöglich wird. Wie hier bei Coastal Breeze:

In welchem Browser bei welcher Schriftgröße wuirde der ersteb Scrennshot gemacht? In Konqueror2 ist RPM zum Beispiel per se unbenutzbar.

Gruß Herbalizer

[Henryk Plötz]

Moin,

In welchem Browser

Galeon (d.h. Gecko-Engine)

bei welcher Schriftgröße wuirde der ersteb Scrennshot gemacht?

Ähm keine Ahnung, das was ich halt normalerweise nutze. *Nachschau* 16

[Orlando]

Hi Henryk,

Aber es zeigt auch recht deutlich die Probleme mit CSS-Positionierung: Bei einigen Designs überlappen sich die Texte so das sogar die Benutzung unmöglich wird.

das ist ausschließlich dann der Fall, wenn relative Einheiten auf nicht relative treffen.

IMHO ist das eine Schwäche von CSS an sich. Die Positionierungsmöglichkeiten sind zu eingeschränkt.

Das sehe ich zwar etwas anders, in einigen Bereichen wünsche ich mir jedoch ebenfalls mehr Flexibilität. So ist es leider ziemlich ärgerlich, dass max- und min-width kaum unterstützt werden.

Man kann nicht einfach sagen "Positioniere dieses div rechts von dem anderen div"

float: ?

sondern man muß sich mit "Positioniere dieses div x Einheiten nach rechts und mache das andere div höchstens x Einheiten breit" (für ein festes x) behelfen.

Wenn x eine relative Einheit ist, ist es der Punkt, an dem sich die Elemente treffen ebenfalls, somit gibt es keine Überschneidungen.

Es sollte vielmehr ein Layout-Modell wie beispielsweise im SWT von Java geben.

*Ehm*, wenn du das sagst, wird es wohl stimmen ;-)

Grüße,
 Roland

[Henryk Plötz]

Moin,

das ist ausschließlich dann der Fall, wenn relative Einheiten auf nicht relative treffen.

ACK, zumindest das kann man wirklich vermeiden.

Man kann nicht einfach sagen "Positioniere dieses div rechts von dem anderen div"

float: ?

Oh, ich gebe zu diese Eigenschaft habe ich bisher immer übersehen, die Lösung bringt sie aber auch nicht. Das gefloatete Element belegt den Platz ja nicht wirklich, sondern der Text fließt lediglich drumherum. Ein anderes Blockelement wird weiterhin lustig über das floatende Element drübergezeichnet, was insbesondere mit border-Angaben *ähh* interessante Effekte gibt.

Wenn x eine relative Einheit ist, ist es der Punkt, an dem sich die Elemente treffen ebenfalls, somit gibt es keine Überschneidungen.

Genau. Bis der Bildschirmrand ins Spiel kommt.
Meine Situation war
+-------+-----+
|       |     |
|   A   |  B  |
|       |     |
|       |     |
+-------+-----+
(mit noch was drüber und drunter)

A hatte eine feste Größe (in relativen Einheiten natürlich) und B einen festen Abstand (in den selben Einheiten). Sobald die Anzeigefläche aber kleiner wird als A breit ist, geht das furchtbar in die Hose. (Ähnlich natürlich auch wenn man B eine feste Breite zuweist.) Schön wäre wenn beide gleichzeitig kleiner würden, oder sogar B irgendwann unter A rutscht.

Es sollte vielmehr ein Layout-Modell wie beispielsweise im SWT von Java geben.

(Es sollte natürlich AWT heissen, ich hab' mich knapp vertippt)

*Ehm*, wenn du das sagst, wird es wohl stimmen ;-)

Damit meinte ich, dass man sich da verschiedene Grundlayouts aussuchen kann welche jeweils rechteckige Boxen bereitstellen. In die kann man dann was reinpacken (unter anderem andere Layouts) und es ist sichergestellt, dass sich nirgendwo was überdeckt.

Mir ist aber grade eingefallen, dass man sowas ja mit display: table und Freunden organisieren könnte. Man muß dazu jedoch am Dokument selber rumfuschen und die nötigen divs bereitstellen. Das ist zwar nicht elegant, könnte aber funktionieren.

Ok, dann ist mein Einwand wohl hiermit gegenstandslos geworden.
Ein schönes Leben noch! ;-)

[Orlando]

Hi Henryk,

+-------+-----+
|       |     |
|   A   |  B  |
|       |     |
|       |     |
+-------+-----+
(mit noch was drüber und drunter)
A hatte eine feste Größe (in relativen Einheiten natürlich) und B einen festen Abstand (in den selben Einheiten). Sobald die Anzeigefläche aber kleiner wird als A breit ist, geht das furchtbar in die Hose.

Weil B verschwindet. Das ist das teuflische an der Positionierung an sich. Positionierung ist böse[tm]! ;-)

(Ähnlich natürlich auch wenn man B eine feste Breite zuweist.) Schön wäre wenn beide gleichzeitig kleiner würden, oder sogar B irgendwann unter A rutscht.

Das meinte ich vorhin. Man könnte die Breite beider Bereiche in "em" oder auch "%" definieren, jeweils mit min-width und max-width. Sobald der Platz nicht mehr ausreicht (gerenderte Breite < min-width), greift dann float: und ein Bereich wandert unter den anderen.

Mir ist aber grade eingefallen, dass man sowas ja mit display: table und Freunden organisieren könnte. [...]

Menschelei am Rande: Sieh dir doch bitte den ersten Treffer an, den Google ausspuckt, wenn man nach "2 column layout floating header footer" sucht:

http://www.google.at/search?q=2+column+layout+floating+header+footer

Tja ;-)

Grüße,
 Roland

[stefan]

Hi,

http://www.google.at/search?q=2+column+layout+floating+header+footer

*g*

schö
stefan