gerade Ausrichtung der Felder untereinander

[RalfB]

Hallo,
ich habe ein Problem mit der Ausrichtung der Felder auf der FE-Login Seite. Verwendeter Browser SeaMonkey 2.9.1
http://www.galerie-schwarz-weiss.de/ind ... eder-login

Die Eingabefelder hinter Benutzername und Passwort verspringen ein wenig. Ich möchte sie aber gerade untereinander anordnen.

In der /template/inc_cntpart/felogin/fe_login_mod.tmpl sind die Felder so programmiert:

<p class="field">
<label for="feLogin">Benutzername: </label>
<input type="text" name="feLogin" id="feLogin" value="{LOGIN}" />
</p>
<p class="field">
<label for="fePassword">Passwort: </label>
<input type="password" name="fePassword" id="fePassword" value="{PASSWORD}" />
</p>
<!--<p class="checkbox">
<input type="checkbox" name="feRemember" id="feRemember" value="1"{REMEMBER} />
<label for="feRemember">Anmeldedaten auf diesem Computer merken</label>
</p>-->
<p>
<input type="submit" value="Senden" name="feSubmit" id="feSubmit" class="formButton" />
</p>

Gibt es eine Möglichkeit für eine solche Ausrichtung? Auch weil es das selbe Problem im Registrierungsformular gibt.

LG RalB

[top]

CSS ist dein Freund:

Code: Select all

.field label {
        display: inline-block;
        min-width: 100px;
}
#feLogin, 
#fePassword {
         margin-left: 0 !important;
}

Wobei es für #feLogin und #fePasswort natürlich sinnvoller wäre die entsprechenden Abstände in der login_form.css zu entfernen.

[RalfB]

CSS ist dein Freund:

Code: Select all

.field label {
        display: inline-block;
        min-width: 100px;
}
#feLogin, 
#fePassword {
         margin-left: 0 !important;
}

Wobei es für #feLogin und #fePasswort natürlich sinnvoller wäre die entsprechenden Abstände in der login_form.css zu entfernen.

Hallo top,
hat gut geklappt mit deiner Anweisung. Danke!

In der login_form.css stehen die beiden Felder mit:

Code: Select all

#feLogin {
      margin-left: 10px;
}

#fePassword {
      margin-left: 10px;
)

Soll ich da wirklich noch etwas dran ändern?
P.S. Kannst du mal einen Blick auf die Registierungsseite werfen, da habe ich das gleiche Problem.

LG
RalfB

[top]

...
In der login_form.css stehen die beiden Felder mit:

Code: Select all

#feLogin {
      margin-left: 10px;
}

#fePassword {
      margin-left: 10px;
)

Soll ich da wirklich noch etwas dran ändern?
P.S. Kannst du mal einen Blick auf die Registierungsseite werfen, da habe ich das gleiche Problem.

LG
RalfB

Die beiden Anweisungen kannst du einfach ignorieren. Anweisungen mit !important haben Vorrang.

Hier einmal die Ergänzung:

Code: Select all

/* Nachtrag zur Begradigung */

.field label {
        display: inline-block;
        min-width: 100px;
}

#feLogin,
#fePassword {
        margin-left: 0 !important;
}

.fieldset label { 
        display: inline-block;
        min-width: 125px;
}
.fieldset label.inline { 
        min-width: 5px; 
        margin-right: 8px;
}
.fieldset input { 
        margin-left: 0 !important ;
}

/* Nachtrag # Ende */ 

Wobei es natürlich eleganter wäre, wenn du bei den input-Feldern die verschiedenen Anweisungen für margin-left einfach löscht. Dann kannst du dir das !important sparen und nur das hier ergänzen:

Code: Select all

/* Nachtrag zur Begradigung */

.field label {
        display: inline-block;
        min-width: 100px;
}

.fieldset label { 
        display: inline-block;
        min-width: 125px;
}
.fieldset label.inline { 
        min-width: 5px; 
        margin-right: 8px;
}

/* Nachtrag # Ende */ 

Wenn du dir unsicher bist was alles raus muss, kannst du auch erst einmal auskommentieren:

Code: Select all

...
#user_login {
      margin-top: 0px;
/*      margin-left: 100px; */
      border: none;
...

Viel Erfolg,
top

[update]

Anmerkung (als Ergänzung): !important ist eine Anweisung für "richtige" Browser und steht in der Reihenfolge zuerst. Der IE(6) kennt das nicht und nimmt dann die folgende Anweisung. Lediglich die Browser, die das verstehen, führen das auch aus und ignorieren die darauf folgende Anweisung. Insofern steht das gerne immer unmittelbar hintereinander...

[top]

Deshalb vermeide ich nach Möglichkeit auch das !important bei meinenen Seiten. Gelegentlich erspart es einem aber eine menge Frimmelei - vor allem wenn einige CSS-Anweisungen nicht aus der eigenen CSS-Datei kommen, sondern von irgend einem CMS oder Javascript erzeugt werden. Dann ignoriere ich den IE6 mittlerweile einfach weg.
Solange die Seite noch benutzbar ist, stört es mich kleine Darstellungsfehler dort nicht mehr wirklich. Wer heutzutage noch mit den IE6 zum Surfen nutzt, ist gewohnt, dass das halbe Internet nicht mehr richtig funktioniert.

[update]

Wer heutzutage noch mit den IE6 zum Surfen nutzt, ist gewohnt, dass das halbe Internet nicht mehr richtig funktioniert.

Der war gut

[flip-flop]

.... bzw. der surft wahrscheinlich gar nicht mehr selbst, denn es gibt reichlich Unterstützung von diversen versteckten Tools, die einem die halbe Kommunikation abnehmen. Pfiffige Seiten zeigen die auch von Zeit zu Zeit ganz automatisch an.

[juergen]

wo hat das Forum die Like Knöpfe, oder geht das nur mit IE6 ?

[RalfB]

...
In der login_form.css stehen die beiden Felder mit:

Code: Select all

#feLogin {
      margin-left: 10px;
}

#fePassword {
      margin-left: 10px;
)

Soll ich da wirklich noch etwas dran ändern?
P.S. Kannst du mal einen Blick auf die Registierungsseite werfen, da habe ich das gleiche Problem.

LG
RalfB

Die beiden Anweisungen kannst du einfach ignorieren. Anweisungen mit !important haben Vorrang.

Hier einmal die Ergänzung:

Code: Select all

/* Nachtrag zur Begradigung */

.field label {
        display: inline-block;
        min-width: 100px;
}

#feLogin,
#fePassword {
        margin-left: 0 !important;
}

.fieldset label { 
        display: inline-block;
        min-width: 125px;
}
.fieldset label.inline { 
        min-width: 5px; 
        margin-right: 8px;
}
.fieldset input { 
        margin-left: 0 !important ;
}

/* Nachtrag # Ende */ 

Wobei es natürlich eleganter wäre, wenn du bei den input-Feldern die verschiedenen Anweisungen für margin-left einfach löscht. Dann kannst du dir das !important sparen und nur das hier ergänzen:

Code: Select all

/* Nachtrag zur Begradigung */

.field label {
        display: inline-block;
        min-width: 100px;
}

.fieldset label { 
        display: inline-block;
        min-width: 125px;
}
.fieldset label.inline { 
        min-width: 5px; 
        margin-right: 8px;
}

/* Nachtrag # Ende */ 

Wenn du dir unsicher bist was alles raus muss, kannst du auch erst einmal auskommentieren:

Code: Select all

...
#user_login {
      margin-top: 0px;
/*      margin-left: 100px; */
      border: none;
...

Viel Erfolg,
top

Hallo top,

ich hab mal die erste Variante mit !important genommen. Vielen Dank, deine Anweisung funzt wunderbar mit dem SeaMonkey, der IE6 interessiert mich nicht wirklich. Der IE8 macht es und stellt die Felder gerade untereinander. Hat nur Probleme das jeweils unterste Eingabefeld mit Platz zum Rand des Kategorierahmens darzustellen.

P.S. Kennst du das Modul/dieTemplate welches ich verwende?

(Hab mal den Kommentar aus der fe_user_register.php rauskopiert.)
Erweitertes FE-User-Formular (FE-User-Register)
basiert auf die Vorlage von Oliver Georgi
(/html/cms1/template/inc_script/frontend_render/disabled/fe_user.php)
mit Änderungen von Caramello
(phpwcms-Forumsbeitrag: http://forum.phpwcms.org/viewtopic.php?p=114049#p114049)
und Änderungen von novallis

Ich hätte dann nämlich noch ein zwei zusätzliche Fragen.
Eigentlich müsste ich doch nur einen Artikel: Artikelinhalt — Frontend Login, Inhaltsart: Frontend Login, Ausgabe Hauptspalte
anlegen und alles ist gut, oder?
Bei mir bricht dann das Layout im Fußbereich komplett zusammen. Deshalb denke ich da da noch irgendwo der Wurm drin ist.
Der Programmierer hat sich da mit zwei Krücken geholfen. Als erstes schiebt er vor den Login-Artikel einen Artikel mit der html-Anweisung:
<div id="fe_register_wrapper">

Diesen hat er im Standard-css wie folgt definiert:

Code: Select all

#fe_register_wrapper {
        float: left;
        clear: none;
}

Da das aber immer noch nicht reicht um das Layout richtig aufzubauen, wird hinter dem Login-Artikel noch ein Artikel benötigt, mit folgender html-Anweisung:

{SPACER:500x10}
</div>

Damit werden die Masken Anmeldung, Passwort anfordern, Registrieren/Zugang beantragen richtig dargestellt. Bei Profil bearbeiten zerschießt es dann den Fußbereich wieder oder trotzdem komplett.
Irgendwas ist da doch nur hingewurschtelt, ich weiß nur nicht was?

Beste Grüße
RalfB

[pepe]

Was ist denn mal mit einem ADMIN Account (per PN) ... dann könnte man sich das mal "von INNEN" ansehen

Geht vielleicht schneller, oder?

[top]

Mit dem FE-Login kenne ich mich nicht wirklich aus. (Mit HTML und CSS dafür um so besser. )
Ich würde an deiner Stelle das Angebot von pepe annehmen. Erstell ihm einen Admin-Account und schick ihm per die Zugangsdaten per PM.

[RalfB]

Mit dem FE-Login kenne ich mich nicht wirklich aus. (Mit HTML und CSS dafür um so besser. )
Ich würde an deiner Stelle das Angebot von pepe annehmen. Erstell ihm einen Admin-Account und schick ihm per die Zugangsdaten per PM.

Hi top,
vielen Dank für deinen Einsatz und deine Hilfe.
LG
RalfB