Textbox auf gleiche Höhe bringen

[pallino]

Hallo,
ich habe folgenden HTML Code:

<span>Hostname:</span> <input class="textbox" type="text" name="hostname">
<br>
<span>Datenbank-Name:</span> <input class="textbox" type="text" name="database">

Wenn ihr den Code als HTML Seite abspeichert, werdet ihr sehen, dass die Textboxen nicht auf gleicher Höhe sind. Das liegt daran, dass das Wort "Datenbank-Name:" eben länger als das Wort "Hostname:" ist.

Wie kann ich nun die beiden Textboxen auf die gleiche Höhe bringen?

Vielen Dank.

 

[alogheo]

Ah..., dafür hast du das gebraucht. In diesem Fall würde ich eher <label> verwenden (semantisch korrekter).



Div-Box um die Beschriftungen und Div-Box um die Inputs, beides floaten, fertig.

<style>
#left, #right
{
  float: left;
}
</style>
<div id="left">
  <label for="hostname">Hostname:</label><br>
  <label for="database">Datenbank-Name:</label>
</div>
<div id="right">
  <input class="textbox" type="text" name="hostname"><br>
  <input class="textbox" type="text" name="database">
</div>
<div style="clear:left">&nbsp;</div>

Formularfeld-Beschriftung


edit: Clearen nicht vergessen^^

edit2: float und clear

 

[pallino]

Danke! Wie kann man das ohne die <div> Anbagen schreiben?

 

[alogheo]

in einer Tabelle:

<table>
 <tr>
  <td><label>Hostname:</label></td>
  <td><input class="textbox" type="text" name="hostname"></td>
 </tr>
 <tr>
  <td><label>Datenbank-Name:</label></td>
  <td><input class="textbox" type="text" name="database"></td>
 </tr>
</table>

 

[pallino]

Vielen Dank!

 

[threadi]

Das sind keine tabellarischen Daten. Hier wäre eine Definitionsliste das semantisch Richtige. Führt visuell letztlich aber zum selben Ziel.

 

[pallino]

Und was ist so eine Definitionsliste? Und was passiert, wenn ich es doch mit einer Tabelle mache? Hat das irgendwelche Auswirkungen auf den HTML-Code? Oder wird es in manchen Browsern anders dargestellt?

EDIT: Wenn man es mit einer Tabelle macht, ist dann der HTML-Code trotzdem noch richtig?

Vielen Dank!

 

[Elroy]

Und was ist so eine Definitionsliste? Und was passiert, wenn ich es doch mit einer Tabelle mache? Hat das irgendwelche Auswirkungen auf den HTML-Code? Oder wird es in manchen Browsern anders dargestellt?

EDIT: Wenn man es mit einer Tabelle macht, ist dann der HTML-Code trotzdem noch richtig?

Vielen Dank!

Wenn du bei der Tabelle keine Fehler rein machst ist es syntaktisch richtig, aber semantisch ist es falsch.
Bei einer Webseite sollte aber beides stimmen die Syntax und die Semantik.

Was eine Definitionsliste ist hast du dir ja sicher schon ergoogelt, deswegen spare ich mir das jetzt.

Gruss
Elroy