Druckbare Version
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
HI
float hilft dir. Aber nur bei einem tabellenlosen Formular.
Sebastian
Ist mir noch nicht so ganz klar. Das Login Formular ist doch tabellenlos oder nicht?
Quelltext oder noch besser ein Link würden helfen :cool:
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
Wir haben bei unseren Kunden jeweils ein tabellenloses Layout mit einem <br /> hinter label und input, welches das float:left der beiden letzteren cleart.
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.
HI
SebastianCode:.mod_login input, .mod_login label {
display: block;
}
hmm,
danke, aber horizontal ist es noch nicht...
Kannst du da noch einen Tipp abgeben?
HI
achso. Da musst du jeweils die Gruppe aus Label und Input auf eine feste Breite setzen und nach links floaten.
Sebastian
Guckstu hier :eek:
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
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...
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 :)
also irgendwie versteh ich das nicht...
Jetzt habe ich auch alles so eingestellt und es geht nicht :-(
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.
hmm, ich habs gerade im template versucht, aber da sehe ich nix...
HI
das macht vielleicht form_widget.tpl, das betrifft dann aber alle Formulare. Mach es lieber per CSS:
SebastianCode:.mod_login br {
display: none;
}
@Sebastian: Sehr schicke Lösung! Perfekt, wär ich jetzt nicht drauf gekommen :D
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
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
wegschieben und die Symbole als Hintergrundgrafik einfügen. Das ist dann auch schön barrierefrei.Code:.mod_login label {
text-indent: -999em;
}
Sebastian
Danke, aber irgendwie bekomme ich die Felder nicht nach rechts. Mit margin-left geht es nicht....
HI
welche Felder sollen wohin? Ich dachte das Formular ist nun in Ordnung und du willst nur noch Symbole?
Sebastian
nein, die Loginfelder sollen nach rechts, wie du es auch in dem Screenshot gemacht hast. Bei mir sind die links.
HI
ich glaube du verwechselst mich…
Fallbeispiel:
Das Loginformular sitzt in der Kopfzeile und soll dort auf der rechten Seite stehen.
Das Label und das Formularfeld sollen jeweils untereinander stehen.Code:.mod_login {
float: right;
}
Das wolltest du doch, oder?Code:.mod_login label, .mod_login input {
display: block;
}
Sebastian
Nein, nebeneinander. Danke jetzt habe ich es. irgendwie ist beim ganze Wüten .mod_login verschwunden.Zitat:
Zitat von Sebastian
Jetzt muss ich das noch etwas anhübschen.
Kannst du mir noch mal bitte sagen, wie ich jetzt das Symbol jeweils neben die Loginfelder bekomme?!Zitat:
Zitat von Sebastian
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.
HI
einfach per Hintergrundgrafik.
Sebastian
Das ist mir schon klar.Zitat:
Zitat von Sebastian
Aber ich weiß nicht, wie ich die jeweiligen Felder direkt abspreche. Es sind ja weder class noch ID
Das ist mein Problem
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
Das nachbauen ist wohl nicht so ganz einfach oder? Irgendwie muss ja ne Abfrage erfolgen...
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
Na, war ja klar dass es da schon was gibt.
Man merkt wahrscheinlich, dass ich primär Designs bastle und nicht Module installier :D
HI
:D
Zum Thema: Wenn die Felder ja doch IDs haben, sollte es kein Problem sein, ihnen individuelle Hintergrundgrafiken zuzuweisen :)
Sebastian
Grundsätzlich schon :D
Aber ob ich das schaffe steht auf einem anderen Blatt! :D:D:D;);););)
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:
Außerdem kannst du, wenn du magst, zusätzliche Container einbauen und die Zeilenumbrüche entfernen.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 -->
Und dann hast du ja für die Labels jeweils eine ID und kannst über CSS eine Hintergrundgrafik zuweisen.
Sebastian
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!
;)