✔ Formular im Tabellenstil

[Moan]

Gun abend zusammen,

ich habe folgendes Problem. Ich muss eine Homepage von Tabellen in das div-Modell überführen und würde dies ganz gerne auch überall so konsistent halten.

Jetzt steh ich allerdings vor einem kleinen Layoutproblem. Der Anhang zeigt ein Formular, das mit Tabellen gebastelt wurde.

Jetzt hatte ich mein Formular in divs sogar schon recht weit, allerdings machen mir die ganzen Borders etwas zuschaffen.

Ist das etwa eine Grenze von divs? Kann hier nur mit Tabellen gearbeitet werden?

<label for="name" >Benutzerkennung:</label> <input type="text" id="login" name="login" class="text"/><br />
  			<label for="name" >Name: </label> <input type="text" id="name" name="name" /><br />	
			<label for="name" >Vorname: </label> <input type="text" id="vorname" name="vorname" /><br />

und der zugehörige CSS-Schnipsel

label, select { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 155px; /* Breite.*/
  /*margin-right: 5px;*/
  text-align: left;
  font-size: 13px;
}

form{
	font-size: 11px;
}
form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: left;
  
}

Für Anregungen oder Links bin ich dankbar. Oder auch einfach sagen, wenn sowas gar nicht umgesetzt werden kann. Obwohl ich der Meinung bin und auch die Erfahrung gemacht habe, dass sonst alles mit CSS realisierbar sei.

Greetz

Dani

 

[Quaese]

Hi,

versuch mal folgende Konstruktion:

form{ font-size: 13px;}
.holderDiv{ background: #fff;
            padding: 6px;
            width: 500px;
            text-align: left;}
.formRow{ clear: both;
          margin: 2px 0 0;
          height: 24px;
          line-height: 24px;
          background: #ECF1F7;}
.formRow label{ border-right: 2px solid #fff;
                font-size: 11px;
                padding-left: 18px;
                width: 180px;}
.formRow input{ margin: 2px 0 0 3px;
                font-size: 11px;}

HTML-Teil:

<form action="" method="">
  <div class="holderDiv">
    <div class="formRow"><label for="name" >Benutzerkennung:</label><input type="text" id="login" name="login" class="text"/></div>
    <div class="formRow"><label for="name" >Name: </label> <input type="text" id="name" name="name" /></div>
    <div class="formRow"><label for="name" >Vorname: </label> <input type="text" id="vorname" name="vorname" /></div>
  </div>
</form>

Ciao
Quaese

 

[Moan]

Quaese ich danke dir...

So eine ähnliche Idee hatte ich auch heut Nacht im Schlaf, hatte sie aber noch nicht umgesetzt. Mit deiner Methode ist mein Problem nur noch eine Umsetzungsfrage.

Muchas Gracias.

Greetz

Dani