Textpositionierung ohne Tabelle?

Hallo ihr!

Vorneweg: Ich fuchs mich relativ neu in die Wunder von CSS ein und bin da auch noch nicht sonderlich fit drin. Also habt Gnade mit mir ;-)

Ich versuche grade eine HP komplett mit CSS zu machen und stolper über das Kontaktformular. Links soll der Namen hin, darumter der Vorname, jeweil ein Eingabefeld daneben, rechts daneben soll Strasse, PLZ in die nächste Zeile etc. auch wieder mit Eingabefeld dazu.

Ich verzweifel etwas an der Positionierung der Eingabefelder. Momentan hab ich das so gelöst:

<form method="post" action="">
 Name: 
  <input type="text" name="nname">  <span class="rechter">Strasse:</span> 
  <input type="text" name="strasse">  
  <br>
  Vorname: 
  <input type="text" name="vname"><span class="rechter">PLZ/Ort:</span> 
  <input type="text" name="plz">, <input type="text" name="ort">
  <br>
  Telefon: 
  <input type="text" name="telefon"><span class="rechter">E-Mail:</span> 
  <input type="text" name="email">
  
</form>

Damit hab ich die <input> aber nicht untereinander. Hat jemand einen Tip für mich wie ich das optisch ohne Tabelle hinbekommen kann?

Momentan habe ich "rechter" über eine feste Positionierung gelöst:

*.rechter {margin-left:200px;)   

Glücklicher wäre ich aber mit einer flexiblen Angabe und finde die Syntax dafür nicht raus. Wisst ihr was da hin kommt?

Liebe Grüsse

Lotti

Hi Jörg!

Danke :-)
Leider scheint das nur mit dem IE zu gehen, denn in meinem Netscape 7.1 erscheint alles wie es will untereinander als würde es garkeine Formatierung geben. Aber da ich nochmal im IE geschaut hab bevor ich reklamiere, war mir dann auch klar was du meinst :-)

Hättest du noch einen Tip für den Netscape parat? :-)

Liebe Grüsse

Lotti

Hallo Jörg!

Nee, das ist es nicht, die Weite hatte ich vorher schon höher gestellt, das hat beim IE nur den Unterschied gemacht ob die Beschriftung der Eingabefelder über oder neben dem Eingabefeld auftauchen. Ich habs dann auf 280 gestellt und dann war im IE alles brav nebeneinander.

An der Verlinkung kanns auch nicht liegen, sonst hätte ich das gleiche Problem ja auch im IE und die anderen Formatierungen wären auch nicht sichtbar.

Am Cache liegt es auch nicht, denn andere Veränderungen sehe ich problemlos.

Also konkret geht es um die Seite:
http://aurora-solarsysteme.de/kontakt2.htm
Das ist noch alles halbfertig und auch von der Optik her ist das letzte Wort mit den Leuten noch nicht gesprochen, aber das ist mal so der Grundaufbau an dem ich mich grade abmühe.

Hier hab ich das Ganze über Tabellen gelöst:
http://aurora-solarsysteme.de/kontakt1.htm

Also vorerst kann ich das schon über Tabellen lösen, aber ich würde da gerne eine elegantere Lösung für finden, zumal ich ähnliches auch noch mit der Linkleiste vor mir habe. Die soll ausklappbar mit Unterpunkten werden und der Anfang dafür wäre mal die Positionierung ohne Tabellen :-)

Jaja, das hast du nun davon mir die Vorzüge von CSS so schmackhaft zu machen ;-)

Liebe Grüsse

Lotti

Hi Jörg!

Oh man...
OK, ich versinke gen Erdboden :-))) DANKE!!

Liebe Grüsse

Lotti

Das Problem liegt anscheinend eher in den oberen Zeilen - hier reserviert Firefox (und entsprechend wohl Netscape) noch Platz für den folgenden Umbruch. Wenn die <br>s noch in der gleichen Zeile untergebracht sind wie das vorangehende input Element, ist dies merkwürdigerweise nicht mehr der Fall:

<div class="spalte">
Name: <input type="text" name="nname"><br>
Vorname: <input type="text" name="vname"><br>
Telefon: <input type="text" name="telefon">
</div>

Ich hab zwar noch nicht ganz verstanden welche Angabe jetzt genau was macht, bzw. an was sich welche Angabe ausrichtet

einfach ein bischen ausprobieren, was passiert, wenn man bestimmte Werte verändert - und ansonsten hier nochmal nachfragen :)