Textformatierung in Forms

[nuutztier]

Hallo,

beim Erstellen des Stylesheets stoße ich momentan auf ein Problem, was mir große Kopfschmerzen bereitet:

Ich habe ein div mit bestimmter Größe. Dortdrin vorhanden ist eine Form die linksbündig sein soll. Ebenfalls soll rechtsbündig ein Link dargestellt werden. Bevor nun alle die Händer über'm Kopf zusammenschlagen und "Float" rufen: mein Problem ist, dass der Link Teil der form sein soll, damit ich ihn per

vertical-align: bottom;

mit den anderen inputs formatieren kann. Heißt also, dass es nicht mit zwei divs geht.
Oder gibt es dafür noch einen anderen Ansatz, damit der Link auf gleicher Höhe mit den inputs ist? Habe schon float mit zwei divs probiert und den Link ebenfalls mit

vertical-align

formatiert. Angezeigt wird er allerdings standardmäßig vertikal zentriert.

Ich hoffe jemand hat eine Lösung für mich :S

 

[Waffelheld]

vertical-align funktioniert nur im zusammenspiel mit display:table-cell.

.. oder wars doch display:table? naja probiers einfach aus. Ich hab zwar keine Ahnung wie das im Endeffekt aussehen soll, aber so sollte der Befehl greifen.

 

[nuutztier]

Ich dachte vertical-align funktioniert nur mit inline-Elementen, wobei <span> ja ein solches ist. In der Form direkt klappt das auch super. Aber gut, ich werde deinen Vorschlag mal ausprobieren.

 

[Wustersoss]

Ohne Code kann man nur raten.
Ich würde sagen text-align:right angewendet auf den Link müsste das Ergebnis liefern, das du dir vorstellst.

 

[nuutztier]

Okay, ich poste mal ein wneig Code:

So sieht die Form aus:

<div class="login">
<form action="index.php" method="post">
            <span class="login">Username:</span>
            <input type="text" name="username" id="username" />
            <span class="login">Password:</span>
            <input type="password" name="password" id="password" />
            <input type="submit" name="submit" value="Login" />
        </form>
<a href="../register/" class="login">Register</a>
</div>

Die drei Klassen sehen dazu so aus:

div.login {
    width: 1163px;
    height: 22px;
    text-align:left;
}

span.login {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:bold;
    vertical-align:bottom;
    color:#FFFFFF;
}

a.login {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
    text-align:right;
    color:#FFFFFF;
}

Mein Ziel ist, dass die Form linksbündig ist, wobei der Text ("Username:") unten abschließen soll mit den input-Feldern. Das klappt schon mal super. Aber der Link soll rechtsbündig sein UND ebenfalls auf einer Höhe mit dem Text in der Form sein.

 

[Wustersoss]

So sollte es funktionieren.
Ist nicht perfekt, wollte aber nicht zu viel eingreifen in deinen Code.

<div class="login">
        <form action="index.php" method="post">            
            <label for="username">Username:
            </label>            
            <input type="text" name="username" id="username" />            
            <label for="password">Password:
            </label>            
            <input type="password" name="password" id="password" />            
            <input type="submit" name="submit" value="Login" /> 
        </form>            
            <a href="../register/" class="login">Register</a> 
    </div>

/* CSS */
div.login {
    width: 1163px;
    height: 22px; 
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:bold;  
}

form { 
    width:50%; 
    float:left;
}

div.login label{
    vertical-align:bottom;
    line-height:12px;
}

a.login {
    text-decoration:none;
    width:49%;
    text-align:right;
    color:#000;
    display:inline-block;
    padding-top:5px;
}

.login {
    height:22px;
    line-height:22px;
}

 

[nuutztier]

Hat super, funktioniert!
Hast recht, ein wenig komisch mit diesen "verlängerten" Links. Habe statt dem Anchor ein span als inline-block deklariert und dort hinein den Link gepackt. Jetzt funktioniert alles gut :mrgreen: