nicht angemeldet
Hallo zusammen,
ich knobel gerade etwas mit HTML herum und habe aktuell eine Frage zur Positionierung von Elementen in DIV-Containern.
Ich habe einen (vorgegebenen) Aufbau, bei welchem jede Zeile der Ausgabe durch einen DIV-Container abgebildet wird.
Nun bin ich auf der Suche nach einem Weg innerhalb dieser DIV eine Positonierung der Elemente vornehmen zu können.
Ich würde gerne mit Prozent arbeiten, damit das Layout halbwegs mitskaliert.
In jeder Zeile können unterschiedliche Elemente enthalten sind, die auch unterschiedlich angeordnet sein können.
Anbei ein Beispiel-Coding, wie es aktuell leider nicht funktioniert (habe es nun bewusst einmal mit Inline-Tags gemacht, das wird dann noch optimiert).
<html>
<head>
<body>
<div id="cont" style="position:absolute; width:100%; background-color:yellow">
<div id="Row" style="position:relative; width:100%; background-color:green;">
<input style="position:absolute; left:0%; width:30%" />
<span style="position:absolute; left:50%; width:20%; white-space: nowrap;">ADies ist ein Label</span>
</div>
<div id="Row" style="position:relative; width:100%; background-color:red;">
<input style="position:absolute; left:5%; width:20%" />
<span style="position:absolute; left:30%; width:20%; white-space: nowrap;">Zweite Zeile</span>
<input style="position:absolute; left:80%; width:20%" />
</div>
</div>
</body>
</html>
Hier der Link zum Ausführen:
Ausgabe des HTMl-Codings
Meine Frage nun:
Wieso wird nun alles in der Ausgabe "übereinander" geklatscht?
Ich hätte erwartet, dass die Zeilen (mit ID "Row") zunächst einmal untereinander sind (aufgrund der relativen Positionierung).
Die Elemente innerhalb der Zeilen dann jeweils jedoch (auf die Zeile) bezogen absolut positioniert werden.
Dies scheint so nicht zu gehen, aber wie bekomme ich das denn ähnlich hin?
Also Zeilen (DIV) untereinander und dann eine seperate Positionierung der Elemente in Prozent bezogen auf die jeweilige Zeile?
DANKE für eure Hilfe :)
Viele Grüße
Jens
Der Martin