|
|
|
|
|
[CSS] Formulargestaltung
|
Hallo,
als ich den Wettbewerb des Dr.Web-Magazins gesehen habe, dachte ich mir: "Sowas können wir doch besser."
Die Idee mit der Formulargestaltung finde ich gar nicht schlecht. Da wir aber unendlich elitärer sind, gibt es in unserem Formular auch ein Textfeld und ein Dropdownmenü.
Die Regeln:
- Ihr gestaltet das Formular mittels CSS nach euren Wünschen. Hierbei sind euch keine Grenzen gesetzt.
- Die gegebene HTML-Datei darf unter keinen Umständen verändert werden.
- Bilder, ... dürfen verwendet werden
- Das Ergebnis sollte in allen gängigen Browsern (IE 6, IE 7, Opera und Firefox) identisch aussehen.
- Euer fertiges Produkt (Stylesheet und evtl. Bilder, ...) sendet ihr bis zum 28. Dezember gezippt an dicope [ääääht] plan-of-attack {punkt} net
- Wenn möglich, gebt euer Stylesheet mit Windowszeilenvorschüben ab.
- Sollte sich herausstellen, dass in der HTML-Datei nötige Attribute (id, class, ...) fehlen, kann diese von den Organisatoren (<--) geändert werden. Dieses wird hier im Thread allen Teilnehmern mitgeteilt.
- Ihr dürft eure Kreationen hier nicht vor Ende des Wettbewerbs (also nach der Bekanntgabe der Platzierungen) veröffentlichen.
- Euer Werk darf keinen Rückschluss auf euch geben (Name als Kommentar, ...)
Zur Bewertung:
- Nach dem Abgabetermin werden alle Einsendungen anonym veröffentlicht.
- Danach darf jeder User (nicht nur Teilnehmer) eine Rangfolge aufstellen. Hieraus werden die Gewinner ermittelt.
- Für Formulare, die in den gängigen Browsern (IE 6, IE 7, Firefox, Opera) nicht vernünftig dargestellt werden, können Punkte abgezogen werden. Die Darstellung muss dabei nicht 100% identisch sein.
- Ebenfalls werden für CSS-Dateien, welche nicht standardkonform sind (CSS-Validator) Punkte abgezogen.
Diese Regeln können bei Bedarf geändert werden.
Die HTML-Datei:
Ich weiß nicht, in wiefern dieses Projekt euer Interesse weckt. Der Wettbewerb mit dem img2ascii-Konverter kam damals doch recht gut an.
Wenn ihr Verbesserungsvorschläge oder Ideen für andere Wettbewerbe habt - immer her damit.
Dicope
|
|
[Dieser Beitrag wurde 3 mal editiert; zum letzten Mal von [Dicope] am 13.12.2020 0:07]
|
|
|
|
|
|
|
|
|
|
Ich würde auch gerne mitmachen, aber bis zum 21.12 ist es nich ein wenig kurz?
|
|
|
|
|
|
|
|
|
|
|
Das ist eine Woche. Den Termin hatte ich jetzt erstmal so aus der Luft gegriffen. Wenn ihr mehr Zeit braucht, lässt sich darüber natürlich reden.
Ich dachte nur, dass es besser wäre, das noch vor den Feiertagen zu beenden.
|
|
|
|
|
|
|
|
|
|
|
Was gibts zu gewinnen? 
|
|
|
|
|
|
|
|
|
|
Die Ehre, junger Padawan. Die Ehre!
Wenn jemand was organisieren möchte - nur zu.
|
|
|
|
|
|
|
|
|
|
|
Mist, jetzt siehts in Opera und IE6 super aus, aber FireFox macht die totalen zicken. Unglaublich. 
|
|
|
|
|
|
|
|
|
|
Hab ich doch glatt die falsche Version hochgeladen:
Die neue Version
Änderungen:
- Statt <h1> ist das <fieldset> mit <legend> beschriftet.
- Das <label>-Tag umfasst die Eingabefelder
Wer mit der anderen angefangen hat, darf mit der natürlich auch weiterarbeiten. Schreibt das dann nur bitte oben als Kommentar rein.
Mein Fehler. Tschuldigung.
|
|
|
|
|
|
|
|
|
|
|
|
Coole Idee, bin dabei aber der 21. ist mir auch etwas zu knapp. Mir wäre es lieber, auch die freien Tage über Weihnachten nutzen zu können.
|
|
|
|
|
|
|
|
|
|
|
21. Ist mir ebenfalls zu knapp. Außerdem finde ich den IE7 diskriminierend.
Ich habe nämlich ein Linux-Only System und da läuft der IE7 nicht drauf, der IE6 aber schon.
|
|
|
|
|
|
|
|
|
|
|
Ich glaube wir sollten uns da auf W3C-Konformität einigen.
Von kleineren Abweichungen in der Darstellung sollte man absehen
|
|
|
|
|
|
|
|
|
|
|
|
Da bin ich anderer Meinung. W3c konformen Code kann jeder Trottel erstellen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von [Dicope]
Änderungen:
- Das <label>-Tag umfasst die Eingabefelder | |
Das die Dinger da aber eigtl. nicht reingehören ist dir aber bewusst?!
|
|
|
|
|
|
|
|
|
|
| | Zitat von TriggerTG
Von kleineren Abweichungen in der Darstellung sollte man absehen
| |
Es muss nicht unbedingt 100% gleich aussehen, sollte aber in jedem Fall vernünftig aussehen.
Verlängerung bis zum 28.?
|
|
|
|
|
|
|
|
|
|
|
Verlängerung bis zum 28. wäre imho in Ordnung.
Trotzdem gehört das <input>-Feld nicht in das Label!
Das Label ist dazu da, einen logischen Bezug zu einem Formularelement herzustellen. Und einen logischen Bezug zu dem Inhalt des Labels durch das Label selbst herzustellen ist irgendwie... sinnlos.
 *dafür* das wieder zu ändern.
|
|
|
|
|
|
|
|
|
|
|
| | | To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control. | |
http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1
|
|
|
|
|
|
|
|
|
|
|
Was heißt, dass das Label-Element explizit genau dem Formularelement zugeordnet wird, das in dem Label-Element ist. D.h., dass du dir in dem Fall auch das for="xyz" sparen kannst...
Aber Ok, diese Möglichkeit war mir bis dato nicht bekannt 
€: Könntest du noch mal die alte Version posten?
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von cms am 14.12.2006 19:32]
|
|
|
|
|
|
|
|
|
Von den Attributen sind einige unnötig. Aber lieber zu viele als zu wenige.
Normalerweise hättest du aber Recht.
|
|
|
|
|
|
|
|
|
|
|
|
Ich hoffe ihr übertreibts nicht sonst kann ich kein Stück mithalten.
|
|
|
|
|
|
|
|
|
|
|
Ist es schlimm, wenn Hover-Effekte nur Firefox, Opera, IE7, aber nicht im IE6 funktionieren?
Ok, mit nem Workaround geht es...
Aber auch der IE7 interpretiert die schönsten Sachen nicht 
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von cms am 14.12.2006 20:44]
|
|
|
|
|
|
|
|
|
| | Zitat von [Dicope]
Es muss nicht unbedingt 100% gleich aussehen, sollte aber in jedem Fall vernünftig aussehen.
| |
Denk dran, dass du nichts an der HTML-Datei machen darfst.
|
|
|
|
|
|
|
|
|
|
|
Ja, es ist auch nur ein js-Workaround (nicht einmal von mir )
Hier ist das Ganze beschrieben.
Hier ist die htc-Datei mit dem js.
Man baut einfach nur folgendes ein und platziert die Datei in dem Verzeichnis:
| |
| Code: |
body
{
behavior: url(csshover.htc);
} |
|
Wenn das zu viel ist, kann ich auch ohne leben
Aber könntest du noch einmal die Version, die du erst fälschlicherweise hochgeladen hast posten? Danach hab ich nämlich meines aufgebaut und ich bin mir nicht sicher, ob das noch übereinstimmt, da im Notepad++ der Speicherbutton rot war und ich reflexartig Strg + s gedrückt habe
Wie ist das dann mit der Veröffentlichung? Wird das als Bild präsentiert, oder als Link, sodass jeder jede Version ausgiebig befummeln kann? Oder als beides?
€: Ah, es beantwortet sich von selbst: Das CSS-Dokument ist nicht mehr valid 
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von cms am 14.12.2006 21:46]
|
|
|
|
|
|
|
|
|
| | Zitat von cms
Aber könntest du noch einmal die Version, die du erst fälschlicherweise hochgeladen hast posten? | |
alte Version
| | Zitat von cms (Fortsetzung)
Wie ist das dann mit der Veröffentlichung? Wird das als Bild präsentiert, oder als Link, sodass jeder jede Version ausgiebig befummeln kann? Oder als beides?
| |
Beides. Wobei sich wahrscheinlich die meisten bewerteten User nur nach den Bildern richten, da ihnen der Rest zu aufwändig ist.
|
|
|
|
|
|
|
|
|
|
*Reminderpush*
Ich hab die Regeln jetzt angepasst (Darstellung in unterschiedlichen Browsern, Abgabetermin)
|
|
|
|
|
|
|
|
|
|
|
Halbzeit.
Wie siehts aus? Wer ist fertig, wer sitzt dran, wer will noch was machen?
|
|
|
|
|
|
|
|
|
|
|
So, wieder eine Woche beim Bund rum, jetzt kann ich weitermachen
Also: Ich will noch weiterfriemeln.
|
|
|
|
|
|
|
|
|
|
|
|
Ich kam noch nicht dazu anzufangen :x Wird aber das WE nachgeholt
|
|
|
|
|
|
|
|
|
|
|
Hab angefangen.
Ist aber noch kein bischen fertig.
|
|
|
|
|
|
|
|
|
|
|
Hmm, also die erste Version des HTMLs mit getrennten input- und label-Tags war ja recht einfach. Aber das verschachtelte macht bei mir echte Probleme.
Zumindest so wie ich mir das vorstelle. Weil ich mag eine Hoiziontale Teilung.
| |
| Code: |
+--------------+---------+
| Label: | [INPUT] |
+--------------+---------+
| langesLabel: | [INPUT] |
+--------------+---------+
|
|
Aber mit der 2. Variante entzieht sich das meiner Fähigkeiten, befürchte ich
|
|
|
|
|
|
|
|
| Thema: Coding-Wettbewerb #1 ( [CSS] Formulargestaltung ) |
![[Dicope]](./avatare/drkleiner.gif)
