Button zentriert neben dem Eingabefeld

Webdesign & Technik HTML & CSS
1

Hallo zusammen,

hier http://test.elpixo.de/such.html habe ich mal eine Testseite erstellt.

Mein Problem ist, dass ich den Button gerne in der Höhe zentriert neben dem Eingabefeld hätte. Wenn ich einem der beiden (Button/Eingabefeld) ein “margin-top” verpasse, rutscht allerdings beides nach unten.

Ich habe schon etwas herumprobiert, allerdings erfolglos. Ich habe keine Idee, woran das liegen kann oder wie ich es hinbekomme.

Kann mir vielleicht jemand auf die Sprünge helfen? Wo ist der Fehler? Vielen Dank.

Gruß elsner

[code]div {border:1px solid #000000;
}
.eingabe {width:100px;
}
.button {border:1px solid #000000;
padding:5px;
}

[/code]
2

Hi,

probiers doch einfach mal mit

3

div hat aber allenfalls ein Attribut align und nicht valign. Auch
align gilt allerdings als veraltet und sollte durch CSS ersetzt
werden bzw. kommt in neueren Varianten von XHTML nicht mehr
vor.

Bleibt also die Dekoration mit CSS, z.B. könnte das funktionieren,
wobei dem div die Klasse ‘formular’ verpaßt wird:

div.formular
{
line-height: 3em;
vertical-align: middle;
}

input.eingabe
{
border: 1px solid transparent;
padding:5px
}

Da input ein inzeilige Element ist, sollten sich so die beiden
input-Elemente mit vertical-align zur Zeilenmitte ausrichten
lassen (sofern der Platz ausreicht, daß beide in einer Zeile stehen).

4

[quote=“kerbination”]Hi,

probiers doch einfach mal mit

[/quote]Das hat leider keine Auswirkung. Trotzdem Danke.

[quote=“hoffmann”]div hat aber allenfalls ein Attribut align und nicht valign. Auch
align gilt allerdings als veraltet und sollte durch CSS ersetzt
werden bzw. kommt in neueren Varianten von XHTML nicht mehr
vor.

Bleibt also die Dekoration mit CSS, z.B. könnte das funktionieren,
wobei dem div die Klasse ‘formular’ verpaßt wird:

[code]
div.formular
{
line-height: 3em;
vertical-align: middle;
}

input.eingabe
{
border: 1px solid transparent;
padding:5px
}
[/code]Da input ein inzeilige Element ist, sollten sich so die beiden
input-Elemente mit vertical-align zur Zeilenmitte ausrichten
lassen (sofern der Platz ausreicht, daß beide in einer Zeile stehen).[/quote]Das hat leider ebenfalls keine Auswirkung. Gut zu sehen, sobald man dem Button einen Rahmen verpasst (http://test.elpixo.de/such1.html).
Wenn ich dem Button einen Rahmen oder Innenabstand gebe, wächst dieser lediglich nach oben.

Habt ihr noch eine Idee, wie man es umsetzen könnte? Ansonsten werde ich die ungeliebten Tabellen benutzen.

5

vertical-align hat per Definition keine Auswirkung bei einem block-Element wie DIV.

Es ist definiert für Elemente mit bestimmten table-Displaytypen, und inline-Elemente.
Und wenn du es mal für letztere benutzt, die sich innerhalb deines Formulars befinden, dann „funktioniert“ es auch.

6

[quote=“chrisb”]vertical-align hat per Definition keine Auswirkung bei einem block-Element wie DIV.

Es ist definiert für Elemente mit bestimmten table-Displaytypen, und inline-Elemente.
Und wenn du es mal für letztere benutzt, die sich innerhalb deines Formulars befinden, dann „funktioniert“ es auch.[/quote]
Perfekt. Es “funktioniert”. Vielen Dank.

7

d’oh - deprecated Müll, sry :unamused:

8

Jo - das Problem hängt damit zusammen, daß sich vertical-align
nicht vererbt (hatte ich irrtümlich angenommen ;o).
Da müßte man also bei allen Kindelementen vertical-align: inherit
schreiben. Ist natürlich auch nicht effektiver als es in jedes
Element einzeln zu schreiben.

Ergänzung:
div {line-height: 3em; vertical-align: middle}
bedeutet ja nicht, daß dies div selbst zentriert wird, sondern
vielmehr dessen inzeiliger Inhalt (also ein Blockelement darin
wird nicht in einer Zeile zentriert, weil das keine Zeile aufspannt).
Auf einen inzeiligen Inhalt des div wirkt das indes schon, sofern
das nicht durch anderweitige Angaben wie etwa die Stilvorlage
des browsers überschrieben wird.
Wenn man z.B. Text oder span-Elemente in das div schreibt,
funktioniert das schon - auch mit den gängigen browsern. Das
Formular macht hier wohl das Problem.