Bild in Verhältnis zu Bild positionieren

[Shiela]

Hallo.

Ich versuche mich gerade hobbymäßig an einer kleinen Website und schietere daran, dass ich meine Bilder nicht richtig positionieren kann. Mein Ziel ist, dass das zweite Bild ("Stecker1") immer auf dem selben Fleck auf dem zweiten Bild bleibt ("Karte"). Die Angabe der Breite habe ich schon hinbekommen, aber bei der Höhe verscheibt sich mein Bild ständig, da ich oben noch Text habe, der je nach Einstellung unterschiedlich hoch ist und so die Gesamthöhe verändert. Meiner Meinung nach müsste ich also das zweite Bild irgendwie in ein Verhältnis zum ersten Bild setzten, weiß aber nicht, wie das geht... Kann mir jemand helfen?

Der Code ist:

CSS:

	#Karte {
     height:auto; width:70%; 
     margin-top: 50px; margin-left:15%; margin-bottom: 100px; 
     border-style: inset; 
     border-width: 10px;
     border-color: #81DAF5;
     position: relative; 
     z-index: 0
   }	

	#Stecker1 {
     width: 5%; 
     margin-left: -30%; padding-top: 30%; 
     position: absolute; align: bottom; 
     z-index: 2
  }

Html:

	<img src='Stecker.png' id='Stecker1'> </img>

	<img src='Karte.jpg' id='Karte' align='left'> </img>

Lg Shiela

[Matthias Apsel]

Hallo Shiela,

Kann mir jemand helfen?

Beschäftige dich mit der position-Eigenschaft.

Bis demnächst
Matthias

[Rolf B]

Hallo Shiela,

ich habe dein CSS mal etwas umgebrochen. Da kann man es gleich besser lesen.

Es gibt eine Beziehung zwischen position:absolute und position:relative: Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative. Wenn Du nicht selbst eins setzt, ist es der body.

Du hast dagegen ein Bild absolut und ein Bild relativ positioniert. Um die Bilder relativ zueinander zu positionieren, ist das nicht zielführend.

Es ist vermutlich sinnvoll, ein <figure> Element als gemeinsames Elternelement der beiden Bilder hinzuzufügen. Das <figure> Element machst Du position:relative, die Karte lässt Du das figure-Element füllen und den Stecker positionierst Du dann absolut im figure-Element.

Margin und Padding an den Images lässt Du weg. Steuere Abstände mit Margin und Padding am figure-Element. Die Karte positionierst Du am besten gar nicht, und den Stecker positionierst Du mit top und left.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ergänzung: Eine Eigeschaft align gibt es nicht.

Bis demnächst
Matthias

[Linuchs]

Hallo Rolf,

Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative.

Stimmt das? Das Eltern-Element kann doch auch absolute positioniert sein.

Wenn Du nicht selbst eins setzt, ist es der body.

In der Konsole des Firefox habe ich seit einigen Monaten die Warnung:

Relative Positionierung von Tabellenzeilen und Zeilengruppen wird jetzt unterstützt. Diese Website muss möglicherweise aktualisiert werden, weil sie sich darauf verlassen könnte, dass diese Funktion keine Wirkung hat.

Gruß, Linuchs

[Matthias Apsel]

Hallo Linuchs,

Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position:relative.

Stimmt das? Das Eltern-Element kann doch auch absolute positioniert sein.

Ein absolut positioniertes Element positioniert sich relativ zu dem (in der Elternhierarchie) nächstliegenden Element mit position ungleich static.

Wenn man ein Element child an einem parent ausrichten möchte, wird man für parent position: relative setzen, weil das zunächst für parent keine Auswirkungen hat.

Wenn Du nicht selbst eins setzt, ist es der body.

Meiner Meinung nach das Wurzelelement, also html.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

Wenn man ein Element child an einem parent ausrichten möchte, wird man für parent position: relative setzen, weil das zunächst für parent keine Auswirkungen hat.

Ich wollte nur darauf hinweisen, dass nicht nur relative, sondern auch absolute Positionierung auf die Position eines Kind-Elementes wirkt.

Mehrmals habe ich eine Familie von Elementen (Elter und Kinder) absolut platziert. Etwa einen Rahmen und innerhalb des Rahmens wieder absolut platzierte Elemente.

Die Kinder sind damit befriedigt und suchen im Stammbaum der Ahnen nicht weiter nach relative.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Mehrmals habe ich eine Familie von Elementen (Elter und Kinder) absolut platziert. Etwa einen Rahmen und innerhalb des Rahmens wieder absolut platzierte Elemente.

Die Kinder sind damit befriedigt und suchen im Stammbaum der Ahnen nicht weiter nach relative.

Ja, das stimmt. Die Ausrichtung erfolgt am ersten Vorfahrenelement, dessen position-Eigenschaft einen Wert verschieden von static (also relative, absolute, fixed oder sticky) hat.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias und Linuchs,

ok, danke. Das hatte ich nicht im Blick.

Die Warnung mit der table ist aber was anderes, wenn ich das richtig sehe. Da geht's drum, dass man "früher" einem Tabellenelement position:relative geben konnte und das ignoriert wurde, und jetzt nicht mehr

Rolf

[Linuchs]

Hallo Rolf,

Da geht's drum, dass man "früher" einem Tabellenelement position:relative geben konnte und das ignoriert wurde, und jetzt nicht mehr

So ist es. Ich habe zwei, drei HTML-Formulare in Tabellenform. Zum Beispiel fünf Teilnehmer eines Festivals. Beim Tippen poppt ein Vorschlags-Bereich auf mit Chören, die per Klick übernommen werden.

(Formular abschicken und dann die nächsten fünf)

Sehr mühsam habe ich die Position des Vorschlags-Bereichs unterhalb des input-Feldes im <td> ermittelt, indem ich per JS vom Input-Feld hochgelaufen bin bis zum body, weil weder td noch tr relativ zu positionieren waren.

Seltsamkeiten mussten ausgebügelt werden. Etwa dass das erste td zum tr denselben Abstand meldete wie tr zum linken table-Rand. Die tr-Angabe musste also ignoriert werden.

Ist ja nicht verständlich für die, die sich nie damit beschäftigt haben.

Und dann wusste ich immer noch nicht, wie andere Browser das handhaben. Vermutlich ist bei Lesern das Vorschlags-Feld irgendwo aufgetaucht, im schlimmsten Fall außerhalb des Sichtbereichs.

Dass man td relativ machen kann, ist für mich eine große Erleichterung, aber für andere (ohne Firefox) vermutlich nicht.

Linuchs

[Rolf B]

Hallo Linuchs,

Dass man td relativ machen kann, ist für mich eine große Erleichterung, aber für andere (ohne Firefox) vermutlich nicht.

Ich habe das Problem schon mal auf diese Weise gelöst. Ich meine mich allerdings zu erinnern, dass ich die Table dann bezüglich der Spaltenbreiten etwas härter an die Kandare nehmen musste.

<style>
   td .popupContainer { width: 100%; height: 100%; position: relative; }
   td .popupContainer .popup { position:absolute; }
</style>

...

<td>
   <div class="popupContainer">
      <div class="popup">
      </div>
      Weiterer Inhalt
   </div>
</td>

Rolf

[Linuchs]

Hallo Rolf,

Ich habe das Problem schon mal auf diese Weise gelöst.

Habe ich auch durch und zwar - wie du - per div im td. Dann kommen die SelfHTML-Schlauberger (zu Recht) und monieren, dass HTML nicht mit Layout zu belasten wäre.

Irgendwann habe ich auf Schlauberger gepfiffen, war aber mit der eigentlich unsinnigen HTML-Schachtelung sehr unzufrieden.

Das Problem für „uns Genies“: Wir könnten ja, aber die Werkzeuge sind mangelhaft.

Linuchs

[Felix Riesterer]

Liebe Shiela,

der Stecker soll wohl so etwas wie eine Stecknadel sein, die das Bild dekorativ aufhübscht. Aus diesem Grund solltest Du für diese Stecknadel kein <img>-Element verwenden, sondern mit CSS-Mitteln diese Stecknadel anbringen.

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo.

… Bild ("Stecker1") … Bild ("Karte")…

kann es sein, das du eine Nadel in eine Landkarte pieken willst? Da haben wir was:

• Beschreibung
• Beispiel

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

habe ich auch dran gedacht, aber ist doch in diesem Umfeld

Ich versuche mich gerade hobbymäßig an einer kleinen Website

mit Kanonen auf Spatzen geschossen.

Linuchs

[JürgenB]

Hallo Linuchs,

die meisten Anwender meines GPX-Viewers basteln hobbymäßg an ihrem Online-Reisetagebuch.

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

mit leaflet, also mit interaktiven Karten habe ich mich 2017 intensiv beschäftigt.

Aus Anlass einer Messe ging es darum, Positionen auf dem Messeplan zu markieren. Der Messeplan ist eine eigene Grafik:

http://osmer.de/leaflet/

Ich meine, die Einführung in Landkarten (Beispiel 1) kürzer dargestellt zu haben, als ich es anderswo vorgefunden habe.

Der Hallenplan (Beispiel 2) ist etwas umfangreicher. Es wird beschrieben, wie ich die Koordinaten ermittelt habe (die bei Landkarten vorgegeben sind).

Linuchs

[JürgenB]

Hallo Linuchs,

hiermit

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.

Gruß
Jürgen

[Auge]

Hallo

hiermit

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

verstößt du meines Wissend nach schon gegen die DSGVO.

Wessen Rechte werden hier konkret berührt oder gar beeinträchtigt?

Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.

Es kann ja sein (und ist nicht unwahrscheinlich), dass das nachgeladene JS den Besucher trackt oder Ähnliches, also Daten vom Besucher erhebt und verarbeitet. Es kann auch sein, dass das Skript von extern nachgeladen wird, aber nur lokal (im Sinne von „auf der Zieldomain“) arbeitet. Das Gleiche gilt bezüglich der CSS-Datei im Hinblick auf Zugriffslogs beim Anbieter.

Wäre das aber nicht erst zu ermitteln (Datenschutzbestimmungen des Skriptanbieters), bevor mit der großen Keule DSGVO zugeschlagen wird?

Tschö, Auge

[JürgenB]

Hallo Auge,

die IP des Besuchers wird an ein CDN übermittelt. Da viele Seiten Ressourcen von diesem CDN einbinden, können seine Betreiber problemlos den User tracken.

Bei Leaflet nache ich mir da zwar keine Sorgen, aber wer weiß, wer da (irgendwann mal) hinter steckt.

Gruß
Jürgen

[Auge]

Hallo

die IP des Besuchers wird an ein CDN übermittelt. Da viele Seiten Ressourcen von diesem CDN einbinden, können seine Betreiber problemlos den User tracken.

Ja, isso.

Bei Leaflet nache ich mir da zwar keine Sorgen, aber wer weiß, wer da (irgendwann mal) hinter steckt.

Darum empfahl ich ja, das beim Anbieter zu prüfen. Es soll ja welche geben, die entgegen der allgemeinen Gepflogenheiten aus Prinzip keine Logs schreiben.

Tschö, Auge

[JürgenB]

Hallo Auge,

aber bevor ich regelmäßig meine externen Ressourcenanbieter überprüfe, baue ich lieber die Abfrage ein. In meinem GPX-Viewer wird die Entscheidung dann im localStorage gespeichert, damit die Frage nicht immer kommt.

Mein Arbeitgeber hat bei Google Maps auch so eine Abfrage eingebaut, wegen der DSGVO. Bei Leaflet war die Sache einfacher: das Script hosten wir bei uns, und für die Tiles haben wir einen Proxy.

Gruß
Jürgen

[Linuchs]

Hallo Jürgen,

wir diskutieren hier eine technische Lösung, keine juristischen Fragen von 2017.

verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.

Nicht korrekt. Verordnungen gelten nicht rückwirkend.

Wikipedia: „Zusammen mit der so genannten JI-Richtlinie für den Datenschutz in den Bereichen Polizei und Justiz[1] bildet die DSGVO seit dem 25. Mai 2018 den gemeinsamen Datenschutzrahmen in der Europäischen Union.[2]

Meine genannte Seite ist eigentlich nur für mich selbst, habe sie bei Google nicht gefunden und musste auf meinem Rechner suchen. Im Web deshalb, damit ich unabhängig vom Gerät Zugriff habe.

Inzwischen frage ich natürlich vor dem Laden fremder Ressourcen:

https://remso.eu/29860

Gruß, Linuchs

[Matthias Apsel]

Hallo Linuchs,

verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.

Nicht korrekt. Verordnungen gelten nicht rückwirkend.

Stimmt. Aber wenn (d)eine Seite heute im Netz zu finden ist, muss sie die Verordnung erfüllen. Du kannst dich nicht damit rausreden, dass du die Seite bereits vor Inkraftsetzung der DSGVO erstellt hast.

Bis demnächst
Matthias

[Auge]

Hallo

verstößt du meines Wissend nach schon gegen die DSGVO. Du lädst Recourcen von einer externen Domain ohne den Besucher zu fragen.

Nicht korrekt. Verordnungen gelten nicht rückwirkend.

Stimmt. Aber wenn (d)eine Seite heute im Netz zu finden ist, muss sie die Verordnung erfüllen. Du kannst dich nicht damit rausreden, dass du die Seite bereits vor Inkraftsetzung der DSGVO erstellt hast.

Korrrrrekt (mit rrrrrollendem „r“). Dennoch sollte erst einmal geklärt werden, ob und in welchem Rahmen der Anbieter Daten der Besucher einer Seite, auf der das Angebot eingesetzt wird, erhebt und verarbeitet und ob das (bei Bedarf) auf der benutzenden Website dokumentiert ist, bevor ein DSGVO-Verstoß moniert wird.

Tschö, Auge

[Linuchs]

Hallo Matthias,

mir wurde hier bei SelfHTML so oft geholfen, dass ich natürlich gerne meine Erfahrungen zurückgebe.

Aber wenn das so oft in Grundsatzdiskussionen ausartet, überlege ich mir das besser noch mal. Humor wird hier stark kritisiert, aber Erbsenzähler sind willkommen. Auch denen möchte ich gerecht werden, denn beim nächsten Mal helfen sie mir wieder:

Wieviel Erbsen sind das?

Zumal in der ganzen Diskussion die eigentliche Lösung vollkommen untergeht.

Das finde ich auch auf anderen Domains. Inzwischen schaue ich immer nach dem Datum. Alles was älter ist als zwei Jahre, ziehe ich in Zweifel. Aber oft bin ich auch froh, überhaupt einen Tipp zu bekommen. Und wenn er dann im Firefox funktioniert, was soll's.

Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}

Gruß Linuchs

[Auge]

Hallo

Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}

Du solltest da echt mal ausmisten. Den -ms-Präfix gab es für diese Eigenschaft nie und die anderen gelten für (aus heutiger Sicht) Museumsstücke. Mit reichlich und ganz viel guten Willen könnte man noch -webkit für Android-Versionen bis 4.3 gelten lassen. Alle anderen Präfixe kannst du ruhigen Gewissens entsorgen.

Tschö, Auge

[Matthias Apsel]

Hallo Linuchs,

aber Erbsenzähler sind willkommen.

Ich kann in diesem Thread keine Erbsenzählerei entdecken. Auch die Website des OP muss sich an die geltenden Gesetze halten, deshalb ist der Hinweis auf die DSGVO wichtig. Was die OP damit dann tut, ist ihr Problem.

Zumal in der ganzen Diskussion die eigentliche Lösung vollkommen untergeht.

Auch das sehe ich nicht so. Abgesehen davon, dass sich der OP noch nicht wieder gemeldet hat, gibt es mehrere Lösungsvorschläge.

Mit Rücksicht auf (mir unbekannte) Browser übernehme ich schon mal solche Empfehlungen:

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}

Diese Empfehlung war vor einigen Jahren (bis auf -ms) ja auch richtig. Heute sind sie schlicht nicht notwendig und bedeuten unnötigerweise übertragene Daten.

Bis demnächst
Matthias

[JürgenB]

Hallo Linuchs,

Inzwischen frage ich natürlich vor dem Laden fremder Ressourcen:

https://remso.eu/29860

finde ich gut. Aber dann weißt du ja auch, warum das Leafletscript im Blog etwas umfangreicher ist.

Gruß
Jürgen