Zwei Felder nebeneinander & 4 untereinander

[Jule]

Wie bekomme ich ohne Tabellen so eine Anordnung hin? Vielleicht auch auf RWD Rücksicht nehmen, was aber kein muss ist.

Bin für jede Hilfe sehr dankbar.

[MrMurphy]

Hallo,

ohne deinen Quellcode läßt sich das nur allgemein beantworten: Mit CSS.

Gruss

MrMurphy

[Jule]

Hallo,

mein HTML sieht so aus

  
      <p>  
        <label for="genero_pe">Anrede:</label>  
        <input type="radio" checked="" value="Frau" id="genero_pe-frau" name="genero_pe">  
        Frau  
        <input type="radio" value="Herr" id="genero_pe-herr" name="genero_pe">  
        Herr </p>  
      <p class="clearboth">  
        <label for="nombre_pe">Vorname:</label>  
        <input type="text" class="required copiadato" id="nombre_pe" name="nombre_pe">  
      </p>  
      <p>  
        <label for="apellido_pe">Nachname:</label>  
        <input type="text" class="required copiadato" id="apellido_pe" name="apellido_pe">  
      </p>  
      <p>  
        <label for="empresa_pe">Firma:</label>  
        <input type="text" class="copiadato" id="empresa_pe" name="empresa_pe">  
      </p>  
      <p>  
        <label for="calle_pe">Straße, Nr.:</label>  
        <input type="text" class="required copiadato" id="calle_pe" name="calle_pe">  
      </p>  
      <p>  
        <label for="postal_pe">PLZ, Ort:</label>  
        <input type="text" class="muycorto required copiadato" id="postal_pe" name="postal_pe">  
      </p>  

Hab das CSS von Matthias genommen http://forum.de.selfhtml.org/?t=217684&m=1495885 es geht auch, aber ich möchte jetzt gerne immer ein Feld Links, ein Feld rechts usw.. haben.

Geht das ohne große DIVS?

[Matthias Apsel]

Om nah hoo pez nyeetz, Jule!

Hab das CSS von Matthias genommen http://forum.de.selfhtml.org/?t=217684&m=1495885 es geht auch, aber ich möchte jetzt gerne immer ein Feld Links, ein Feld rechts usw.. haben.

Dein HTML sieht aus, als käme es aus einer großen Baukastenseite. Wofür denn die ganzen Klassen? Warum spanische(?) Bezeichner?

Wenn das umgebende Element eine definierte Breite hat, sollten eigentlich immer 2 label-Elemente nebeneinander stehen.

Alternativ geht auch display table-cell für die label und display table für das umgebende Element.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Jule!

HTML

<label>  
  <input>  
</label>

label {  
  display: inline-block;  
  width: 40%;  
}  
input, select {  
  margin-left: 4.2em;  
  border: 1px solid tomato;  
  border-radius: 8.2px;  
  padding: 3px;  
}

Matthias

[molily]

Hallo,

Wie bekomme ich ohne Tabellen so eine Anordnung hin? Vielleicht auch auf RWD Rücksicht nehmen, was aber kein muss ist.

Da die Frage sehr allgemein ist, ist die Antwort allgemein: Mit CSS-Layout.

Genauer: Mit Floats, gegebenenfalls display: inline-block, gegebenenfalls mit CSS-Tabellen (display: table, table-row, table-cell).

Ist dir grundsätzlich das Arbeiten mit Float geläufig?

Tutorials:
http://de.learnlayout.com/
http://de.selfhtml.org/css/layouts/
http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/

In deinem Screenshot sehe ich erst einmal eine Menge von Listenelementen, die 50% der Breite einnehmen und Spalten bilden. Das geht z.B. mit float: left und width: 50% für die betreffenden Elemente. Dann stapeln sie sich schon automatisch horizontal und dann vertikal.

In diesen Listenelementen gibt es ein Label, das links mit einer festen Breite floatet, oder display: inline-block hat. Daneben stehen oder mehrere Formularfelder mit bestimmten Breiten (width) und ein paar Abständen (margin).

»Responsive« bekommt man Float-Layouts über Media Queries. Üblicherweise wird die Mehrspaltigkeit erst ab einer bestimmten Viewport-Breite hergestellt. float wird also auf kleinen Bildschirmen nicht oder nur im Kleinen angewendet (z.B. um ein kurzes Label und ein Feld nebeneinander zu positionieren).

Wo genau hapert es? Fehlt dir der Ansatz? Den hoffe ich nun gegeben zu haben.

Mathias