Login untereinander

**chr.flader** · 23.12.2009, 02:33

Guten Tag!

Ich würde gerne mein Login-Formular anders darstellen.

Bis jetzt sieht es so aus, dass die Login Felder untereinander sind. Ich würde sie aber gerne nebeneinander haben und die Beschriftungen über den Loginfeldern.

Als Beispiel dient hier Facebook.

Wie lautet hier die CSS Anweisung?
Danke

Christian

**Sebastian** · 23.12.2009, 08:09

HI

float hilft dir. Aber nur bei einem tabellenlosen Formular.

Sebastian

**chr.flader** · 23.12.2009, 12:50

Ist mir noch nicht so ganz klar. Das Login Formular ist doch tabellenlos oder nicht?

**grambler** · 23.12.2009, 17:38

Quelltext oder noch besser ein Link würden helfen

**Sebastian** · 23.12.2009, 18:50

HI

ich bin mir da nicht sicher, da die meisten TL-Formulare standardmäßig Tabellen verwenden (igitt). Ein Blick in den Quelltext hilft sicherlich!

Sebastian

**grambler** · 23.12.2009, 18:57

Wir haben bei unseren Kunden jeweils ein tabellenloses Layout mit einem <br /> hinter label und input, welches das float:left der beiden letzteren cleart.

**chr.flader** · 24.12.2009, 14:15

Erstmal Danke, aber irgendwie will das nicht. Hier mal meine Seite:

www.kttk.de

Dort sollte eigentlich das Login-Formular horizontal angeordnet sein und Benutzername und Passwort über den Loginfeldern, wie bei Facebook.

**Sebastian** · 24.12.2009, 14:17

HI

Code:

.mod_login input, .mod_login label {
 display: block;
}

Sebastian

**chr.flader** · 24.12.2009, 14:23

hmm,

danke, aber horizontal ist es noch nicht...

Kannst du da noch einen Tipp abgeben?

**Sebastian** · 24.12.2009, 14:53

HI

achso. Da musst du jeweils die Gruppe aus Label und Input auf eine feste Breite setzen und nach links floaten.

Sebastian

**grambler** · 24.12.2009, 15:37

Guckstu hier

http://screencast.com/t/OGUxZDJmYTAt

Veränderungen eingekreist. Im Quelltext die br's entfernt, dann einfach float:left gesetzt.

Und für dass der Anmelden-Button auch dort ist, folgendes:
http://screencast.com/t/YTVmMWY1

So sollte es klappen!

Gruss

**chr.flader** · 24.12.2009, 17:35

Danke, ist echt nett und gut gemacht, aber was ich nicht verstehe, wieso das Loginformular bei dir rechts angezeigt wird, obwohl du überall links eingegeben hast...

**grambler** · 24.12.2009, 18:15

Das Dingen steckt ja in dem div .mod_login, welches ein float:right zugewiesen hat und deswegen am rechten Rand oben hängt!

Danke übrigens, dass du unser bzw. Toflar's Modul für die Youtube-Videos verwendest

**chr.flader** · 24.12.2009, 18:19

also irgendwie versteh ich das nicht...

Jetzt habe ich auch alles so eingestellt und es geht nicht :-(

**grambler** · 24.12.2009, 23:25

Na jetzt haben wir's ja dann gleich.
Die beiden <br /> müssen noch weg:
http://screencast.com/t/Nzg5NmNkY

Wie man das hinkriegt, weiss ich allerdings nicht so genau.

**chr.flader** · 25.12.2009, 00:54

hmm, ich habs gerade im template versucht, aber da sehe ich nix...

**Sebastian** · 25.12.2009, 10:57

HI

das macht vielleicht form_widget.tpl, das betrifft dann aber alle Formulare. Mach es lieber per CSS:

Code:

.mod_login br {
 display: none;
}

Sebastian

**grambler** · 25.12.2009, 14:56

@Sebastian: Sehr schicke Lösung! Perfekt, wär ich jetzt nicht drauf gekommen

**chr.flader** · 25.12.2009, 14:58

Ja, danke hat geklappt!

Verstehe nur noch nicht, warum float: left sein muss, wenn ich es nach rechts haben will, aber ok!

Hier meine Gotteshelfer ;-) wie mache ich aus der Schrift: Benutzername und Passwort jeweils ein Symbol?

Christian

**Sebastian** · 25.12.2009, 16:05

HI

float:right bringt das komplette Formular nach rechts, float:left die beiden Feldgruppen in eine Reihe.

Du könntest dazu den Text über CSS per

Code:

.mod_login label {
 text-indent: -999em;
}

wegschieben und die Symbole als Hintergrundgrafik einfügen. Das ist dann auch schön barrierefrei.

Sebastian

**chr.flader** · 25.12.2009, 16:08

Danke, aber irgendwie bekomme ich die Felder nicht nach rechts. Mit margin-left geht es nicht....

**Sebastian** · 25.12.2009, 16:09

HI

welche Felder sollen wohin? Ich dachte das Formular ist nun in Ordnung und du willst nur noch Symbole?

Sebastian

**chr.flader** · 25.12.2009, 16:10

nein, die Loginfelder sollen nach rechts, wie du es auch in dem Screenshot gemacht hast. Bei mir sind die links.

**Sebastian** · 25.12.2009, 16:13

HI

ich glaube du verwechselst mich…

Fallbeispiel:

Das Loginformular sitzt in der Kopfzeile und soll dort auf der rechten Seite stehen.

Code:

.mod_login {
 float: right;
}

Das Label und das Formularfeld sollen jeweils untereinander stehen.

Code:

.mod_login label, .mod_login input {
 display: block;
}

Das wolltest du doch, oder?

Sebastian

**chr.flader** · 25.12.2009, 16:17

Zitat von Sebastian

HI

Das Label und das Formularfeld sollen jeweils untereinander stehen.

Code:

.mod_login label, .mod_login input {
 display: block;
}

Das wolltest du doch, oder?

Sebastian

Nein, nebeneinander. Danke jetzt habe ich es. irgendwie ist beim ganze Wüten .mod_login verschwunden.

Jetzt muss ich das noch etwas anhübschen.

**chr.flader** · 25.12.2009, 16:24

Zitat von Sebastian

HI

float:right bringt das komplette Formular nach rechts, float:left die beiden Feldgruppen in eine Reihe.

Du könntest dazu den Text über CSS per

Code:

.mod_login label {
 text-indent: -999em;
}

wegschieben und die Symbole als Hintergrundgrafik einfügen. Das ist dann auch schön barrierefrei.

Sebastian

Kannst du mir noch mal bitte sagen, wie ich jetzt das Symbol jeweils neben die Loginfelder bekomme?!

Irgendwie schaffe ich es nicht die Texte " Benutzername und Passwort gegen ein Symbol auszutauschen.

Die Schrift kann ich verschwinden lassen, aber ich kriege die Symbole nicht dort eingebaut.

**Sebastian** · 25.12.2009, 16:28

HI

einfach per Hintergrundgrafik.

Sebastian

**chr.flader** · 25.12.2009, 16:31

Zitat von Sebastian

HI

einfach per Hintergrundgrafik.

Sebastian

Das ist mir schon klar.

Aber ich weiß nicht, wie ich die jeweiligen Felder direkt abspreche. Es sind ja weder class noch ID

Das ist mein Problem

**Sebastian** · 25.12.2009, 16:52

HI

wenn es wirklich keine ID oder Klasse pro Feld gibt bist du wohl aufgeschmissen. Bist du dir sicher? Als Lösung fiele mir nur ein, das Formular mit dem Formulargenerator nachzubauen und dort IDs zu vergeben oder eine Gesamthintergrundgrafik für das ganze Formular zu nutzen.

Sebastian

**chr.flader** · 25.12.2009, 17:01

Das nachbauen ist wohl nicht so ganz einfach oder? Irgendwie muss ja ne Abfrage erfolgen...

**grambler** · 25.12.2009, 17:06

Eigentlich wäre doch sowas wie bei Facebook eine gute Lösung:
http://screencast.com/t/MzE5MjZkN

Wenn man in das Feld klickt, verschwindet der Text und man kann reinschreiben. Dafür bräuchte es wohl ein Javascript-Snippet. Wäre eigentlich ganz nett, wenn man das einfach mit Häcken aktivieren könnte...

By the way: Username und Passwort-Feld haben jeweils eine ID zugewiesen!
Schau mal hier über den roten Pfeilen:
http://screencast.com/t/Nzg5NmNkY

**Sebastian** · 25.12.2009, 17:11

HI

https://contao.org/erweiterungsliste...efault.de.html

Sebastian

**grambler** · 25.12.2009, 17:26

Na, war ja klar dass es da schon was gibt.
Man merkt wahrscheinlich, dass ich primär Designs bastle und nicht Module installier

**Sebastian** · 25.12.2009, 17:32

HI

Zum Thema: Wenn die Felder ja doch IDs haben, sollte es kein Problem sein, ihnen individuelle Hintergrundgrafiken zuzuweisen

Sebastian

**chr.flader** · 25.12.2009, 17:38

Grundsätzlich schon

Aber ob ich das schaffe steht auf einem anderen Blatt!

**Sebastian** · 25.12.2009, 17:50

HI

es ist wohl doch ziemlich unmöglich. Die ID hat nur das Feld, nicht das dazugehörige Label.

Im Login-Modul hast du wohl das Template „mod_login_1cl.tpl“ ausgewählt, du könntest also über den Backend-Menüpunkte „Templates“ dieses Template anpassen:

HTML-Code:

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> one_column tableless login block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<form action="<?php echo $this->action; ?>" method="post">
<div class="formbody">
<?php if ($this->message): ?>
<p class="error"><?php echo $this->message; ?></p>
<?php endif; ?>
<input type="hidden" name="FORM_SUBMIT" value="tl_login" />
<label for="username" id="username-label"><?php echo $this->username; ?></label>
<input type="text" name="username" id="username" class="text" maxlength="64" value="<?php echo $this->value; ?>" /><br />
<label for="password" id="password-label"><?php echo $this->password; ?></label>
<input type="password" name="password" id="password" class="text password" maxlength="64" value="" /><br />
<div class="submit_container">
<input type="submit" class="submit" value="<?php echo $this->slabel; ?>" />
</div>
</div>
</form>

</div>
<!-- indexer::continue -->

Außerdem kannst du, wenn du magst, zusätzliche Container einbauen und die Zeilenumbrüche entfernen.

Und dann hast du ja für die Labels jeweils eine ID und kannst über CSS eine Hintergrundgrafik zuweisen.

Sebastian

**grambler** · 25.12.2009, 18:29

Als Lösung einfach den input's die Hintergrundbilder zuweisen, dann den Text gegen rechts verschieben indem man(n) dem input ein padding-left gibt.
Einfache und so wie ich das sehe saubere Lösung, da ohne Bahnschranken... äh, Barrieren!