Zur Navigation

Textpositionierung ohne Tabelle?

1 Lotti

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

30.08.2005 14:43 | geändert: 30.08.2005 14:47

2 Jörg

Hallo Lotti,

ich würde die inputs in zwei Spalten auflisten, auch damit Vorname und Name im Quelltext beieinander bleiben (und mit der Tastatur auch nacheinander angesprochen werden können). Für die Spalten könntest du zwei divs nehmen, für die du eine feste Breite definierst und die du nebeneinander positionierst, indem sie die Eigenschaft float:left erhalten (linker Umfluss). Das float:left wird am Ende wieder durch ein clear:left (hier für ein leeres div) aufgehoben. Die inputs kann man schließlich bündig übereinander ausrichten, indem die Spalten die Eigenschaft text-align:right erhalten.

In etwa schaut der HTML-Code dann so aus:


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

und der CSS-Teil so:


*.spalte { padding:10px; text-align:right; width:220px; float:left; }

LG Jörg

30.08.2005 16:55 | geändert: 30.08.2005 16:55

3 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

30.08.2005 18:17

4 Jörg

Ich hab das in Netscape 6.1 überprüft, dort muss die Breite noch erhöht werden, damit es passt


*.spalte { padding:10px; text-align:right; width:250px; float:left; }

gegebenenfalls kannst du den Wert auch noch weiter erhöhen, für den Fall dass der User die Schriftgröße höher eingestellt hat.

Ansonsten sollte es eigentlich so funktionieren. Wenn alles unformatiert ist, solltest du noch überprüfen, ob das CSS richtig eingebunden ist, z.B. im head Bereich:


<head>
<title>Titel</title>
<!-- weitere Angaben im head Bereich -->
<style type="text/css">
<!--
*.spalte { padding:10px; text-align:right; width:240px; float:left; }
-->
</style>
</head>

falls es auch daran nicht liegt, cachet der Netscape vielleicht noch das alte Style Sheet

30.08.2005 18:37

5 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

30.08.2005 19:31

6 Jörg

Manchmal haben kleine Ursachen große Folgen - der Fehler liegt in der CSS Datei style.css in Zeile 31:

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

dort schließt du mit einer runden Klammer. Durch diesen Syntaxfehler kommen Netscape, Mozilla und Firefox aus dem Tritt und ignorieren folgende Angaben, darunter wohl auch die für *.spalte.

wenn du die Klammer korrigierst in eine geschweifte:

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

... sollte auch dein Netscape alles korrekt anzeigen :)

LG Jörg

30.08.2005 19:55

7 Lotti

Hi Jörg!

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

Liebe Grüsse

Lotti

30.08.2005 20:10

8 Lotti

Hi Jörg nochmal!

Sag mal, kannst du mir sagen warum bei kontakt2 im Netscape die unterste Zeile von der Namenseingabe um eine Zeichenbreite nach rechts versetzt ist? Wieder so ein bescheuerter Fehler irgendwo?

Ansonsten klappt es echt total prima. :-))
Ich hab zwar noch nicht ganz verstanden welche Angabe jetzt genau was macht, bzw. an was sich welche Angabe ausrichtet, aber es funktioniert :-))

DANKE!

Liebe Grüsse

Lotti

30.08.2005 23:22

9 Jörg

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 :)

30.08.2005 23:55

10 Lotti

Hi Jörg!

Danke, klappt :-)
Ich habs vorher nur mit dem <br> vor der Zeile versucht. Man lernt nie aus :-) Gucke, hier gehts: http://aurora-solarsysteme.de/kontakt3.htm

So, und dann ist mir noch was zum Forum eingefallen, das schreib ich aber noch woanders hin und dann geh ich schlafen :-)

Liebe Grüsse

Lotti

31.08.2005 00:44