Formular-Gestaltung

Hallo liebe Contao Community,

ich verzweifle etwas bei der Gestaltung des Formulars in Contao.
Es geht um folgende Seite: http://wppt.de/alaturka/index.php/reservierung.html

Und zwar stehen die Feldbezeichnungen wie unschwer zu erkennen nicht bündig auf einer Höhe.
Wie spreche ich diese an, damit sie an der linken Seite nicht flattern?

Zudem würde ich gerne die Felder selbst alle auf einer Höhe positionieren, diese spreche ich mit label an, richtig?
Wahrscheinlich spreche ich die besagten Bereiche einfach nur falsch an!?

Als drittes würde ich gerne wissen, ob es bei dem Datum eine Möglichkeit gibt, das Symbol des Kalenders auszutauschen? Den Kalender habe ich mit der Erweiterung xdependentcalendarfields hinzugefügt, was soweit auch super ist.
Allerdings stört dieses Symbol.

Viele Grüße,
Tashera

Ersetze

Code:

---

.ce_form #reservierungsformular label {
    display: inline;
    margin-bottom: 3px;
    margin-right: 0;
    margin-top: 18px;
}

---

mit

Code:

---

label {
    display: block;
    float: left;
    width: 260px;
}

---

Nebenbei würde ich die ganzen Inline-Styles rausmachen. Die versauhen auch einiges. Liegt wohl an der Erweiterung cufon, die ich selbst aber nicht kenne.


Zu dem Icon:
Dieses liegt in plugins/datepicker/icon.gif Ersetze es dort einfach mit deinem neuen Icon.

Danke dir vielmals! Werde es gleich mal testen! :)

Das hat schonmal sehr gut geklappt. Trotzdem besteht weiterhin das Problem,
dass die Felder und die Feldbezeichnungen nicht 100% bündig sind.

Hallo Tashera,

das liegt auf jeden Fall an "Cufon". Es sieht teilweise so aus, als ob Du vor den Label Bezeichnungen noch Leerzeichen hast. Überprüf das mal im Formulargenerator.

Hallo qba,

danke dir! Die Leerzeichen habe ich überprüft, da hat sich bei keinem der Label Bezeichnungen eins eingeschlichen.
Allerdings hast du Recht was Cufon betrifft.
Habe den Label Bezeichnungen eine andere Schrift zugewiesen, da passiert das nicht. Weißt du ob ich das dennoch mit cufon lösen kann??

Also normalerweise funkt Cufon da nicht so arg dazwischen. Ich weiß nicht, woher diese Zeichen kommen, die Cufon immer umwandeln möchte. Ich würde vielleicht den Font noch einmal neu generieren lassen und hochladen. Spontan fällt mir nichts anderes ein.

Zitat:

---

Zitat von Tashera

Das hat schonmal sehr gut geklappt. Trotzdem besteht weiterhin das Problem,
dass die Felder und die Feldbezeichnungen nicht 100% bündig sind.

---

Wenn ich mir das jetzt anschaue, dann ist das schon bündig und das Cufon-Zeugs ist auch raus. Ich behaupte mal jetzt, daß es paßt.

Jetzt ist es bündig, weil ich Cufon ausgeschaltet und dementsprechend Verdana als Schrift angegeben habe.
Anders funktioniert es im Moment nicht.

Kann mir vielleicht noch jemand sagen, wie ich den Submit-Button anspreche?
Also die Schrift konnte ich über .submit_container input ansprechen, allerdings reagiert diese nicht, wenn ich den Seitenabstand verändere.
Wie spreche die Schrift an, sodass ich sie auch positionieren kann? Und wie spreche ich z.B. die Fläche die dahinter liegt an? Habe schon fast alle Möglichkeiten durch.


Des weiteren frage ich mich, wie ich das Formular gestalten kann, wenn man auf "abschicken/reservieren" klickt und die Warnhinweise erscheinen. "Bitte füllen Sie .... aus"

Hallo Tashera,

.submit_container input ist an sich schon OK. Das Problem ist, dass Du in Deiner CSS folgendes stehen hast:

Code:

---

....

    .submit_container input {
        width: 200px;
        font: 15px verdana;
        color: #B49272;
        text-transform: uppercase;
        cursor: pointer;
    }

    .reservierungsformular input {
        width: 300px;
        margin: 3px;
        background-color: rgba(255,255,255,0.2);
        color: #91765B;
        border: none;
    }

---

Weil die Anweisungen vom .reservierungsformular input nach dem .submit_container input folgen, werden diese angezeigt. Anweisungen die weiter hinten stehen, werden höherrangig bewertet. Du müsstest also z.B. die Reihenfolge ändern.

Hallo qba,
Manchmal ist die Lösung so nah! Wieder was dazugelernt. :)

Zitat:

---

Zitat von Tashera

Des weiteren frage ich mich, wie ich das Formular gestalten kann, wenn man auf "abschicken/reservieren" klickt und die Warnhinweise erscheinen. "Bitte füllen Sie .... aus"

---

Weißt du auch, wie ich diese Warnhinweise im css anspreche?

Nein sorry. Könnte mir vorstellen, dass man da an irgendein Template ran muss. Hab ich aber bisher nicht gebraucht.

Danke trotzdem, wenn ich es herausfinde, poste ich es hier. :)

Zitat:

---

Zitat von Tashera

"Bitte füllen Sie .... aus"

---

Das wird für leere Plichtfelder vom jeweiligen browser, der die Klasse "mandatory" erkennt, generiert.
Die Hinweise bei fehlgeschlagener Validierung solltest Du normal über css ansprechen können.