• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

dkdenz' CSS-Spielwiese

dkdenz

dkdenz

New member
Hier muss mal wieder ein SiteCheck stattfinden, weswegen ich meine überarbeitete Version von dkdenz' CSS-Spielwiese zur Zerpflückung freigebe.

Verbesserungsvorschläge in allen Bereichen (visuelles Erscheinungsbild, Usability, unverständliche Wortgebilde, Rechtschreibfehler) erwünscht.

Eine Bitte: Mich interessiert, wie der IE 7 mit den vierten Beispiel umgeht (Horizontale Linien mit CSS gestalten).

Ein Menü hielt ich noch nicht für notwändig, es wird aber sicher eines folgen, da ich die Seite stetig befüllen werde.
 
Zuletzt bearbeitet:
AW: dkdenz's CSS-Spielwiese

Mir gefällt das Design der Seite gut. Einziges Manko sind die externen Links. Diese sollten sich meiner Meinung nach in einem externen Fenster öffnen!

Ansonsten gut gemacht :)

mfg
flo
 
AW: dkdenz's CSS-Spielwiese

Danke!
Zu den externen Links: Das ist ja ein Streitthema schlechthin.
Bisher hielt ich es so, das sich externe Links in einem neuen Fenster öffnen.
Andere meinen, man soll dem User überlassen, wie er externe Links behandeln will.
In dem Fall allerdings kann ich die Links nicht in einem neuen Fenster öffnen,
es sei denn, ich ändere den Doctype, was ich wahrscheinlich aber nicht vorhabe.
 
AW: dkdenz's CSS-Spielwiese

Hallo dkdenz,

mir gefällt der Hintergrund nicht, da assoziiere ich irgendwie "Friedhof" :) aber das ist wirklich Geschmacksache...

Was mir bei einem Blick in den Quelltext gleich auffällt, diese leeren links:

HTML: 
<a name="aktive_seite">
</a>
sind das Sprungmarken? Kann man "den Sprung" dann nicht einfach an den Containern oder Überschriften festmachen?
und das hier:

HTML: 
     display:block;
geht das nicht über CSS mit Einrückung?

Ganz besonders gut gefallen mir die Scheren, da möchte ich gleich abschneiden :) aber im IE 6 haben sie (die Bilder?) einen Rand...

planet4.
 
AW: dkdenz's CSS-Spielwiese

...mir ist gerade noch was Schreckliches aufgefallen: der Deppenapostroph...
richtig müsste es heißen "dkdenz' Spielwiese" - was aber vielleicht auch komisch aussieht...
 
AW: dkdenz's CSS-Spielwiese

Hola planet4 :)
Mit den Sprungmarken bin ich mir noch nicht im Klaren, wie ich die genau verwenden will.
Erstmal ist angedacht, das, wenn jemand nach irgendeiner Technik fragt welche auf dieser Seite vorhanden ist, ich einfach den Link plus Sprungnamen angebe und er direkt an die gewünschte Stelle gelangt.

Zu den NBSP:
Ich weiß, ist unschön.
Ich muss da noch nach einer "schöneren" Lösung suchen.
War einfach ein Schnellschuß.

Zum Hintergrund:
Hmm, mir gefällt der außerordentlich gut...

Das mit dem IE 6 ist im Beispiel aber beschrieben...
 
AW: dkdenz's CSS-Spielwiese

externe Links sollte meiner Meinung auf keinen Fall mit target in einen neuen Fenster geöffnet werden, dass verwirrt nur Anfänger und andere (für die die Seite eher gedacht ist) sollten mit ihren Browser umgehen können.

Ich kennzeichne externe Links meistens so:

PHP: 
a[href^="http"] {
    background:url(pfad/zum/bild.gif) no-repeat center right;
    padding-right:16px;
}
Das spart eine Klasse und nur weil es der IE (zumindest 6) nicht kann, so what?

Für den Effekt mit den Button, könnte man noch einen Link auf A List Apart: Articles: Sliding Doors of CSS, Part II anbieten, einmal wegen dem Suchbegriff sliding doors und weil die den Effekt sehr gut erklären und vor allem auf darstellen.

Den schwarzen Hintergrund finde ich auch nicht top - auch wenn ich schwarz nicht mit Friedhof assoziiere (ich wohn direkt am Friedhof und der ist ganz schön grün)

und fixe Breiten in Pixel finde ich auch nicht sonderlich, aber das ist wohl eine Glaubensfrage. Ich bevorzuge Prozent, jedem User seine Breite.
 
AW: dkdenz's CSS-Spielwiese

Das ist ja mal ein schöner Sitecheck... :) So würde ich mir das immer wünschen!

Mit den externen Links hast Du eigentlich recht.
Inzwischen sehe ich das ebenso, auch wenn's lange gedauert hat.
Nur wenn ich für eine Agentur arbeite, ist das so ziemlich der meistgenannte Kritikpunkt, denn die "Beauftrager" haben einfach Panik, das die User die (ihre) Ursprungsseite verlieren.

Die Möglichkeit des von Dir geposteten CSS3-Beispieles ist mir bekannt, aber so lange wie der IE 6 der noch am weitesten verbreitetste Browser ist, setze ich das nicht ein.

Und ja! Fixe Breiten zu verwenden oder nicht ist wirklich eine Glaubensfrage.
Wobei ein Pixel immer ein Pixel sein wird, egal bei welcher Auflösung.

Irgendwie scheine ich einen Macken zu haben, denn eigentlich möchte ich bei dieser Seite nicht auf Seiten verlinken, die sich außerhalb des Deutschen Sprachraumes befinden.
Deswegen habe ich auch explizit auf Anglizismen verzichtet (was mir aber beim Wort "serverseitig" um's Verrecken nicht gelingen wollte).
Ich könnte ebensogut auf cssplay verlinken, da ich mit dem guten Stuart Nicholls auch schon Mailkontakt hatte (ich hatte ihm einen Screenshot seines letzten Layouts unter Linux geschickt und daraufhin hat er es zwei Tage später in die Tonne gekloppt), aber das werde ich unterlassen.
Das hat aber nichts damit zu tun, das ich nicht Fremdverlinken will (siehe Fabrice Pascal).
 
AW: dkdenz's CSS-Spielwiese

dkdenz schrieb:
Und ja! Fixe Breiten zu verwenden oder nicht ist wirklich eine Glaubensfrage.
Wobei ein Pixel immer ein Pixel sein wird, egal bei welcher Auflösung.
Zum Vergrößern anklicken....
und ein Browserfenster ist immer 100% egal bei welcher Auflösung, nur die Schriftgröße kann (und soll) der User halt variieren, dann werden die px Breiten zur (Darstellungs-)Falle.
 
mein einziger Kritikpunkt ist ebenfalls die in Pixeln festgelegte Breite. Habe in letzter Zeit öfters mal mit andersformatigen Monitoren gearbeitet und da sind Seiten die sich dem Browserfenster anpassen schon recht angenehm. Vorallem bei Bildschirmen die nicht sehr hoch, dafür aber breiter sind, muss man einfach weniger scrollen.
 
AW: dkdenz's CSS-Spielwiese

ein schlauer schrieb:
und ein Browserfenster ist immer 100% egal bei welcher Auflösung, nur die Schriftgröße kann (und soll) der User halt variieren, dann werden die px Breiten zur (Darstellungs-)Falle.
Zum Vergrößern anklicken....

...wenn das Argument greifen soll, dann nicht die Breite, sondern die Höhe nennen!
Und dann kann der User auch die Schriftgröße bis in den XXL-Bereich vergrößern.
 
Gute Idee und auch gut realisiert.

Der Hintergrund wurde nun oft genug erwähnt, was vielleicht noch wünschenswert wäre, sind Browserunterstützungsangaben (what a word!). Welches Beispiel wird von welchen Brower unterstützt oder nicht? Kann auch sein dass du da absichtlich drauf verzichtet hast, da es "nur" eine Spielwiese werden soll ohne Heidenarbeit mit Browsertests. Vielleicht sind solche Angaben auch sinnlos, da es nur einen Standard gibt und Browser diesen unterstützen sollten.

Zu den <hr />s: Haben auch im IE7 einen Rahmen.
 
jeko schrieb:
Zu den <hr />s: Haben auch im IE7 einen Rahmen.
Zum Vergrößern anklicken....
Danke Danke Danke!
Darauf hatte ich die ganze Zeit gewartet!

Zu Deinem Einwurf wegen der Browserunterstützungsangaben:
Ich wollte das Ganze anbieten mit dem Hintergrund, das es in allen Browsern identisch dargestellt wird, was auch eigentlich der Fall ist, bis auf die Ausnahme mit der hr.
Diesbezüglich überlege ich auch grade, ob ich das nicht wieder rausnehme...
 
dkdenz schrieb:
Zu Deinem Einwurf wegen der Browserunterstützungsangaben:
Ich wollte das Ganze anbieten mit dem Hintergrund, das es in allen Browsern identisch dargestellt wird, was auch eigentlich der Fall ist, bis auf die Ausnahme mit der hr.
Diesbezüglich überlege ich auch grade, ob ich das nicht wieder rausnehme...
Zum Vergrößern anklicken....

Na ja, ist ne grundsätzliche Überlegung, ob Du nur Sachen listen willst, die eine identische Anzeige in allen gängigen Browsern (wer gehört denn dazu?) ohne Zusatz-Anleitung (hab das Wort workaround vermieden :cool:) zulassen.

dkdenz schrieb:
Mit den Sprungmarken bin ich mir noch nicht im Klaren, wie ich die genau verwenden will.
Erstmal ist angedacht, das, wenn jemand nach irgendeiner Technik fragt welche auf dieser Seite vorhanden ist, ich einfach den Link plus Sprungnamen angebe und er direkt an die gewünschte Stelle gelangt.
Zum Vergrößern anklicken....

Dazu hat mich immer das Beispiel von Hasematzel fasziniert, weil es auch ohne JS funktioniert und der dort geschilderte "Anwendungsfall" mir auch für Deine wachsende Seite geeignet erscheint.

dkdenz schrieb:
Zu den NBSP:
Ich weiß, ist unschön.
Ich muss da noch nach einer "schöneren" Lösung suchen.
Zum Vergrößern anklicken....

Du könntest hier ja auch den pre-Tag nehmen.

BTW Im Opera9 wird nicht, wie bei LANtastic beschrieben, ein Rahmen angezeigt. Nur der IE6 und IE7 zeigt diesen an.
 
AW: dkdenz's CSS-Spielwiese

dkdenz schrieb:
...wenn das Argument greifen soll, dann nicht die Breite, sondern die Höhe nennen!
Und dann kann der User auch die Schriftgröße bis in den XXL-Bereich vergrößern.
Zum Vergrößern anklicken....
Das verstehe ich nicht? Aus welchem Grund fixierst du denn die Breite? weil du Angst hast die Zeilen werden zu lang, oder? Wenn ich die Schrift vergößere, passen weniger Zeichen in ein Zeile und die Zeilen werden immer kürzer und das kann schnell unschön aussehen.

Ansonsten gibt es doch keinen Grund die Breite überhaupt so zu zementieren. Wenn es aber um die Optik geht, dann ist natürlich % immer besser, da du damit eine proportionale Aufteilung des Browserfensters erreichst.
 
AW: dkdenz's CSS-Spielwiese

ein schlauer schrieb:
Das verstehe ich nicht?
Zum Vergrößern anklicken....
Vergrößere doch mal den Text.
Sicher werden die Zeilen kürzer, aber erstmal verschiebt es sich dann nach unten, bis ein Wort kommt, welches dann breiter als die Breite :)rolleyes: ) ist.
Erst dann geht es über den Seitenrand hinaus.
Aber das ist ein Endlosstreitthema und ich finde, jeder kann es halten wie er will.
Ich habe beim W3C auch nichts gefunden, was die Angabe einer festen Breite verbieten würde.
 
Es spricht nichts gegen die Verwendung von %.
Es spricht aber auch nichts gegen die Verwendung von px.

Ich bin der Meinung, es kommt darauf an, was auf der Seite angeboten wird.
Ein Wiki, Forum, wasweißich ist in den meißten Fällen mit % am Besten dran.

Andere Seiten sind mit Pixeln besser umzusetzen, vor allem wenn man eine Headergrafik mit fester Breite verwendet.

Eine sehr bekannte Seite als Beispiel mit einer fixen Breite: Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben