✔ CSS Positionsbestimmung - Zeilenumbruch?

[Basti54]

Einen wunderschönen guten Morgen, CSS-Gemeinde.

Also, ich hatte bis vor kurzem einige Formular-Elemente in einer Tabelle, bis mir jemand dazu geraten hat, dass komplett in CSS auszulagern - ohne Tabellen versteht sich

Soweit, sogut.

Problem jetzt: Ich will nicht mit absoluten Bezügen arbeiten. deshalb hab ich die einzelnen Elemente immer schö nacheinander weg angeordnet, in der Form ungefähr

<span id="nix">eingabe1</span><span id="nix">eingabe1</span>
   <span id="nix2"><input...../><span id="nix2"><input...../></span>

Soll heißen: Auf einer Horizontalen steht als erstes der Bezeichner (also:"Name eingeben" oder sowas). In der zweiten Zeile sollen dann die Eingabefelder dazu folgen.

Problem dabei ist: nach dem span, wird ja bekanntlich nicht umgebrochen, also würde bei dieser Variante alles, soweit es geht, in eine Zeile gepackt werden. Mit div kann ich auch nicht arbeiten, da div vorn und hinten einen Zeilenumbruch macht. Andere Möglichkeit wäre ein <div/> bzw. ein <br/> nach jedem Ende einzufügen. Dies muß jedoch im HTML geschehen. Und damit hab ich mein Design nicht 100%ig ausgegliedert. Also auch nur eine Notlösung. Aussehen soll es ungfähr so:

Kann da einer helfen?

Wenn es geht, soll das komplette Design ausgegrenzt werden, dabei sollte es jedoch relativ bleiben, dass, wenn das Fenster scaliert wird, trotzdem alles lesbar und am rechten Platz ist.

 

[Quaese]

Hi,

mit der CSS-Eigenschaft float kannst du Elemente aus dem normalen Textfluss herausnehmen.

Du könntest zum Beispiel mit DIVs und float: left drei Spalten erstellen. In diese fügst
du dann die Labels und Eingabeelemente ein.

CSS:

.zeile{ clear: both;}
.spalteLinks, .spalteMitte, .spalteRechts{ float: left;
                                           font-size: 10px;}
.spalteLinks{ width: 200px;}
.spalteMitte{ width: 120px;}
.spalteRechts{ width: 180px;}

Der HTML-Code könnte folgende Struktur aufweisen:

<div class="zeile">
  <div class="spalteLinks">Benutzername:</div>
  <div class="spalteMitte">Anrede:</div>
  <div class="spalteRechts">Nachname:</div>
</div>
<div class="zeile">
  <div class="spalteLinks"><input type="text" value="" name="txtVorname" /></div>
  <div class="spalteMitte">
    <select name="selAnrede" size="1">
      <option value="Herr">Herr</option>
      <option value="Frau">Frau</option>
    </select>
  </div>
  <div class="spalteRechts"><input type="text" value="" name="txtNachname" /></div>
</div>

Ciao
Quaese

 

[Gumbo]

Du könntest es auch wie im folgenden Artikel beschrieben formatieren.

 

[Basti54]

Super, danke. Das Verständnis aus Beitrag 1 und dem Artikel geht's super. Dank an beide.