tag:forum.selfhtml.org,2005:/self Bilder in Verhältnis positionieren (Hilfe benötigt) – SELFHTML-Forum 2020-08-09T17:56:17Z https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774005?srt=yes#m1774005 Shiela 2020-07-31T18:07:07Z 2020-07-31T18:24:30Z Bilder in Verhältnis positionieren (Hilfe benötigt) <p>Hallo.</p> <p>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</p> <p>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!)</p> <pre><code class="block language-css"><span class="token selector">#Karte</span> <span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span> <span class="token selector">#Asien</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -20%<span class="token punctuation">}</span> <span class="token selector">#Nordamerika</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -57%<span class="token punctuation">}</span> <span class="token selector">#Südamerika</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -50%<span class="token punctuation">}</span> <span class="token selector">#Europa</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -35%<span class="token punctuation">}</span> <span class="token selector">#Afrika</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -35%<span class="token punctuation">}</span> <span class="token selector">#Australien</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 5%<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 27%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> -15%<span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Karte.jpg<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Karte<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Karte<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen durch Asien<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Asien<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen durch Nordamerika<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Nordamerika<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Nordamerika<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen durch Südamerika<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Südamerika<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Südamerika<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen drch Europa<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Europa<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Europa<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen drch Afrika<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Afrika<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Afrika<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Unsere Reisen durch Australien<span class="token punctuation">'</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Asien/Asien.html<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Bilder/Stecker.png<span class="token punctuation">'</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Australien<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>Stecker Australien<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774006?srt=yes#m1774006 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-07-31T18:25:12Z 2020-07-31T18:25:12Z Bilder in Verhältnis positionieren (Hilfe benötigt) <p>Hallo Shiela,</p> <blockquote> <p>Kann mir noch jemand bezüglich des Forums erklären, wie ich den Code so unterbrechen kann, dass er in zwei Zeilen angezeigt wird?</p> </blockquote> <p>Schau dir mal die Icons oberhalb des Textfeldes an.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774007?srt=yes#m1774007 Rolf B 2020-07-31T20:12:27Z 2020-07-31T20:12:27Z Bilder in Verhältnis positionieren (Hilfe benötigt) <p>Hallo Shiela,</p> <p>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.</p> <p>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).</p> <p>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).</p> <p>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.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774017?srt=yes#m1774017 Felix Riesterer https://felix-riesterer.de 2020-07-31T22:42:27Z 2020-07-31T22:42:27Z keine Lust (mehr) <p>Liebe(r) Shiela,</p> <blockquote> <p>Ich habe vor einiger Zeit bereits einen Beitrag erstellt, bei dem ich gefragt habe, wie ich Bilder im Verhältnis zueinander positioniere.</p> </blockquote> <p>Du meinst <a href="https://forum.selfhtml.org/self/2020/jul/07/bild-in-verhaltnis-zu-bild-positionieren/1773083#m1773083" rel="noopener noreferrer">diesen hier, der bereits archiviert wurde</a>?</p> <blockquote> <p>Danke für die Antworten bei diesem Beitrag, sie haben mir sehr geholfen.</p> </blockquote> <p>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.</p> <blockquote> <p>Jetzt habe ich allerdings das Problem,</p> </blockquote> <p>Da Du Dich dort nicht mehr gerührt hast, sehe ich für mich keinen Grund, Dir hier überhaupt zu helfen.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774008?srt=yes#m1774008 Shiela 2020-07-31T20:36:58Z 2020-07-31T20:36:58Z Bilder in Verhältnis positionieren (Hilfe benötigt) <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a></p> <p>Du hast richtig geraten und es mir auch noch gut erklärt, danke dir! Jetzt funktioniert es :)</p> https://forum.selfhtml.org/self/2020/jul/31/bilder-in-verhaltnis-positionieren-hilfe-benotigt/1774366?srt=yes#m1774366 Shiela 2020-08-09T17:56:17Z 2020-08-09T17:56:17Z keine Lust (mehr) <p>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</p> <p>Liebe Grüße, Shiela</p>