nicht angemeldet
Layout / Positionierung - Hilfe :(
0 0 0 
Der Martin
0 0 Der Martin
0 0 Der Martin
Layout / Positionierung - Hilfe :(
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
-
Ergänzung:
Ich habe irgendwie gedacht, dass es so funktionieren müsste, wie hier beschrieben:http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Geht aber irgendwie nicht? :(
-
Hallo
Nun bin ich auf der Suche nach einem Weg innerhalb dieser DIV eine Positonierung der Elemente vornehmen zu können.
Das sagt leider recht wenig über deine Ziele aus. Gib mal ein Beispiel dieser Inhalte.
Ich habe einen (vorgegebenen) Aufbau, bei welchem jede Zeile der Ausgabe durch einen DIV-Container abgebildet wird.
Das hört sich verwegen und unlogisch an.
Zur Zeit kann ich deshalb nur eine allgemeine Info geben: Lass die Finger von "position: absolute".
Gruss
MrMurphy
-
Hi,
Ich habe einen (vorgegebenen) Aufbau, bei welchem jede Zeile der Ausgabe durch einen DIV-Container abgebildet wird.
Das hört sich verwegen und unlogisch an.ja, ich kann mir im Moment auch noch keinen überzeugenden Anwendugnszweck vorstellen. Das muss aber nicht heißen, dass es den nicht gibt. Wenn die einzelnen Zeilenblöcke z.B. Tage darstellen sollen, und die Elemente darin Veranstaltungen, die sowohl einen Zeitbereich überdecken, als auch durch ihre Position einen Ort/Raum vermitteln sollen ... Aber dann könnte man sich bestimmt auch eine Struktur ausdenken, die besser geeignet ist, um dieses Datenmodell abzubilden.
Zur Zeit kann ich deshalb nur eine allgemeine Info geben: Lass die Finger von "position: absolute".
Und ich ergänze noch: Vergib keine IDs doppelt. IDs müssen dokumentweit eindeutig sein. Das hat zwar mit an Sicherheit grenzender Wahrscheinlichkeit keinen Einfluss auf die Darstellung, ist aber ein HTML-Fehler.
Ciao,
Martin--
Heutzutage gilt ein Mann schon dann als Gentleman, wenn er wenigstens die Zigarette aus dem Mund nimmt, bevor er eine Frau küsst.
(Barbra Streisand, US-Schauspielerin)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Danke für Eure Hinweise.
In meinem Fall ist dieser Aufbau leider bereits größtenteils vorgegeben, d.h. der Grundaufbau der Seite steht bereits fest und ich habe nur einen direkte Einfluss auf die Objekte innerhalb dieses DIV-Containers.
Konkret geht es dabei um die Abbildung von Mini-HTML-Seiten, welche im Lager auf solchen kleinen mobilen Geräten verwendet werden - diese nutzen meist noch ein etwas älteres Windows Mobile.Was wäre denn die Alternative zu position:absolute, um innerhalb eines DIV-Containers die Elemente bei einer bestimmten Position zu positionieren?
Prozente habe ich deswegen versucht zu verwenden, da ich es gerne hätte, dass die Objekte etwas mitskalieren (macht natürlich nur bei kleinen Größen-Anpassungen Sinn, das ist mir klar).Ich frage mich primär: Was habe ich bei meinem CodingFragment denn falsch gemacht?
Ich habe nun bereits einiges nachgelesen und dabei oft gefunden, dass die absolute Positionierung innerhalb von relativen Containern funktionieren sollte.Links:
http://www.mediaevent.de/tutorial/css-position-absolute-relative.html
http://little-boxes.de/lb1/12.5.2-absolute-positionierung-kombiniert-mit-einem-umgebenden-relativ-positionierten-element.html
usw.Nur wieso werden bei mir die relativen Container schon gar nicht erst "untereinander" dargestellt?
Das ist mir ein Rätsel :-(Danke für Eure Hilfe
-
Hallo,
In meinem Fall ist dieser Aufbau leider bereits größtenteils vorgegeben, d.h. der Grundaufbau der Seite steht bereits fest und ich habe nur einen direkte Einfluss auf die Objekte innerhalb dieses DIV-Containers.
das ist natürlich Pech für die Kuh Elsa.
Was wäre denn die Alternative zu position:absolute, um innerhalb eines DIV-Containers die Elemente bei einer bestimmten Position zu positionieren?
Es gibt keine wirkliche Alternative, wenn du tatsächlich frei positionieren willst oder musst.
Ich habe nun bereits einiges nachgelesen und dabei oft gefunden, dass die absolute Positionierung innerhalb von relativen Containern funktionieren sollte.
Ja. Aber ganz außenrum hast du nochmal ein Containerlement mit position:absolute. Warum das? Ich könnte mir vostellen, dass hier der Knackpunkt liegt. Zumal ich für die absolute Positionierung dieses Elements keinen Grund sehe.
So long,
Martin--
Die letzten Worte des Polizisten:
Ich hab mitgezählt, Leute: Sechs Schuss, jetzt hat er keine Munition mehr!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Hallo
Nur wieso werden bei mir die relativen Container schon gar nicht erst "untereinander" dargestellt?
Werden sie doch, du siehst es nur nicht. Lösung: Lösch' deine "position: absolute".
Gruss
MrMurphy
-
Hi,
Nur wieso werden bei mir die relativen Container schon gar nicht erst "untereinander" dargestellt?
Das ist mir ein Rätsel :-(mir ist es plötzlich klar geworden: Sie haben nur absolut positionierte Kindelemente. Allerdings nimmt position:absolute das Element aus dem normalen Fluss heraus, so dass es die Größe seines Elternelements nicht mehr beeinflusst. Deine relativ positionierten Containerelemente haben also die Höhe 0. Gib ihnen eine feste Höhe, dann sollte es besser sein.
Ciao,
Martin--
Gibst du dem Opi Opium, haut Opium den Opi um.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
Nur wieso werden bei mir die relativen Container schon gar nicht erst "untereinander" dargestellt?
Das ist mir ein Rätsel :-(mir ist es plötzlich klar geworden: Sie haben nur absolut positionierte Kindelemente. Allerdings nimmt position:absolute das Element aus dem normalen Fluss heraus, so dass es die Größe seines Elternelements nicht mehr beeinflusst. Deine relativ positionierten Containerelemente haben also die Höhe 0. Gib ihnen eine feste Höhe, dann sollte es besser sein.
Ciao,
MartinDanke für den Tipp!
Die Hlhe hatte gefehlt und nun klappt auch alles andere, so wie ich es gerne hätte!!D-A-N-K-E! :)
-
-
-
-