Bilder in Verhältnis positionieren (Hilfe benötigt)

[Shiela]

Hallo.

Ich habe vor einiger Zeit bereits einen Beitrag erstellt, bei dem ich gefragt habe, wie ich Bilder im Verhältnis zueinander positioniere. Danke für die Antworten bei diesem Beitrag, sie haben mir sehr geholfen. Jetzt habe ich allerdings das Problem, dass die abolsut-positionierten Stecker (Asien, ...) nicht zu sehen sind, ich vermute, sie befinden sich irgendwie hinter der Karte. Kann mir jemand sagen, was ich falsch gemacht habe und wie ich es beheben kann? -Danke auf jeden Fall für die Hilfe

Kann mir noch jemand bezüglich des Forums erklären, wie ich den Code so unterbrechen kann, dass er in zwei Zeilen angezeigt wird? Wenn ich einen Absatz eingebe, nimmt er die zweite Zeile immer als normaler Text... komme mir bei dieser Frage ein wenig blöd vor, bekomme es aber gerade nicht hin (sorry!)

#Karte {height: auto; width: 100%; z-index: 0; float: none}

#Asien 		{width: 5%; position: absolute; z-index: 2; margin-top: 10%; margin-left: -20%}
#Nordamerika 	{width: 5%; position: absolute; z-index: 2; margin-top: 10%; margin-left: -57%}
#Südamerika 	{width: 5%; position: absolute; z-index: 2; margin-top: 25%; margin-left: -50%}
#Europa 	{width: 5%; position: absolute; z-index: 2; margin-top: 10%; margin-left: -35%}
#Afrika 	{width: 5%; position: absolute; z-index: 2; margin-top: 20%; margin-left: -35%}
#Australien	{width: 5%; position: absolute; z-index: 2; margin-top: 27%; margin-left: -15%}

<figure>
	<img src='Bilder/Karte.jpg' id='Karte' alt='Karte'> </figure>

	<a title='Unsere Reisen durch Asien' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' id='Asien' alt='Stecker Asien'> </a> 
	<a title='Unsere Reisen durch Nordamerika' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' 	id='Nordamerika' alt='Stecker Nordamerika'> </a>
	<a title='Unsere Reisen durch Südamerika' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' id='Südamerika' alt='Stecker Südamerika'> </a>
	<a title='Unsere Reisen drch Europa' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' id='Europa' alt='Stecker Europa'> </a>
	<a title='Unsere Reisen drch Afrika' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' id='Afrika' alt='Stecker Afrika'> </a>
	<a title='Unsere Reisen durch Australien' href='Asien/Asien.html'> <img src='Bilder/Stecker.png' id='Australien' alt='Stecker Australien'> </a>

[Matthias Apsel]

Hallo Shiela,

Kann mir noch jemand bezüglich des Forums erklären, wie ich den Code so unterbrechen kann, dass er in zwei Zeilen angezeigt wird?

Schau dir mal die Icons oberhalb des Textfeldes an.

Bis demnächst
Matthias

[Rolf B]

Hallo Shiela,

so, wie es jetzt ist, können wir nur raten, aber ich befürchte, dass Du für die Stecker keinen eigenen Container mit position:relative vorgesehen hast. Und Du gibst ihnen keinen Ort, sondern setzt Margins.

Ein absolut positioniertes Element ist, wenn man den Ort nicht festlegt, zunächst einmal an der Stelle, wo es ohne position:absolute gelandet wäre. Durch die margin-top Angaben schiebst Du es dann noch nach unten, und vermutlich landet es dann unter dem Bildschirmrand (oder im Nichts, wenn das Dokument hinter der Karte zu Ende ist).

Mit den CSS Eigenschaften top und left kann man den Ort eines absolut positionierten Elements festlegen. Diese Eigenschaften haben ihren Nullpunkt in der oberen linken Ecke des nächstliegenden Elternelements, das nicht statisch positioniert ist (also z.B. position:relative).

Ich würde Dir empfehlen, die Stecker mit in die figure hineinzunehmen und der figure ein position:relative zu geben. Dadurch sind die Stecker Teil der figure und können sich im Zweifelsfall auch zusammen mit der figure bewegen. Das ist schonmal eine gute Sache.

Die Position der Stecker legst Du nicht mit Margins fest, sondern mit top und left. Da die Karte wegen des width:100% mit dem Viewport (Fenster) skaliert, dürfte eine Positionierung mit % ebenfalls sinnvoll sein. Aber probiere es aus, wie sich die Steckerpositionen verhalten wenn Du mit der Fenstergröße spielst.

Rolf

[Shiela]

@Rolf B

Du hast richtig geraten und es mir auch noch gut erklärt, danke dir! Jetzt funktioniert es :)

[Felix Riesterer]

Liebe(r) Shiela,

Ich habe vor einiger Zeit bereits einen Beitrag erstellt, bei dem ich gefragt habe, wie ich Bilder im Verhältnis zueinander positioniere.

Du meinst diesen hier, der bereits archiviert wurde?

Danke für die Antworten bei diesem Beitrag, sie haben mir sehr geholfen.

Schade, dass Du es nicht für nötig empfunden hast, Dich dort überhaupt noch einmal zu melden. Außer Deinem Ausgangsposting steht da von Dir nichts mehr.

Jetzt habe ich allerdings das Problem,

Da Du Dich dort nicht mehr gerührt hast, sehe ich für mich keinen Grund, Dir hier überhaupt zu helfen.

Liebe Grüße

Felix Riesterer

[Shiela]

Hallo! Es tut mir leid, dass ich bei dem Post dann nicht geantwortet habe... irgendwie scheine ich das dann vergessen zu haben, von da her wollte ich (zumindest jetzt) darauf antworten und mich entschuldigen

Liebe Grüße, Shiela