verschachtelte div

[piet]

Hallo,

ich probiere jetzt schon seit Stunden ein verschachteltes div mit style aus

1. Ich möchte eine Grafik1 per absolute setzen
2. Danach kommen Texte und eine weitere Grafiken2-4 die relativ von der ersten Position der ersten Grafik1 abhängig sein sollen.

Google zeigt zwar verschachtelte div aber keine Kombination aus div und img

Hier mein Ansatz

<div style="position:absolute; left:440px; top:360px;>
	<img id="g1" src="gif/1pol/gen.gif" style="position:relative; left:0px; top:0px; height:70px; width:70px;">
	<div style="left:20px; top:-61px; font-size:30pt; position:relative;">G
	<div class="schaltertext" style="left:-17px; top:5px; text-align:center; position:relative;">94
	<img class="schalter1pol" id="gst1" src="gif/1pol/stellungsanzeiger_ein_gruen.gif" style="left:-2px; top:-70px; position:relative;">
	<div class="schaltertext" style="left:-40px; top:-20px; text-align:center; position:relative;">Generator-<br>schalter
</div></div></div></div>

Wo liegt hier der Fehler ? Sitze ich auf der Leitung ... ich sehe nichts, oder gibt es eine bessere Lösung ?

Gruß

[Gunnar Bittersmann]

@@piet

ich sehe nichts,

Ich auch nicht. Was soll denn zu sehen sein?

oder gibt es eine bessere Lösung ?

Für welches Problem?

LLAP 🖖

[beatovich]

hallo

Hallo,

ich probiere jetzt schon seit Stunden ein verschachteltes div mit style aus

1. Ich möchte eine Grafik1 per absolute setzen
2. Danach kommen Texte und eine weitere Grafiken2-4 die relativ von der ersten Position der ersten Grafik1 abhängig sein sollen.

Google zeigt zwar verschachtelte div aber keine Kombination aus div und img

Hier mein Ansatz

Als erstes sollte bei dir Text und Bild in einer aus Sicht des Lesers logischen Abfolge stehen. Alle Bilder brauchen ein alt Attribut.

<div style="position:absolute; left:440px; top:360px;>

Hier fehlt ein schliessendes ["]

<img id="g1" src="gif/1pol/gen.gif" style="position:relative; left:0px; top:0px; height:70px; width:70px;">

hier fehlt das alt Attribut

<div style="left:20px; top:-61px; font-size:30pt; position:relative;">G <div class="schaltertext" style="left:-17px; top:5px; text-align:center; position:relative;">94

Du hast hier den logischen Text "G 94", den du grafisch zerreisst.

Manchmalreichen einfach auch span Elemente.

Da dein Schalter aber eventuell etwas tun soll, wäre wohl ein <button> angebracht.

<img class="schalter1pol" id="gst1" src="gif/1pol/stellungsanzeiger_ein_gruen.gif" style="left:-2px; top:-70px; position:relative;">

Hier fehlt das alt Attribut

<div class="schaltertext" style="left:-40px; top:-20px; text-align:center; position:relative;">Generator-<br>schalter </div></div></div></div>

Wo liegt hier der Fehler ? Sitze ich auf der Leitung ... ich sehe nichts, oder gibt es eine bessere Lösung ?

Drucke zuerst deinen Schalter durch ein logisches Element aus. Das wird wohl ein button sein. Beschrifte diesen Button logisch.

Dann kannst du ein grafisches Element verwenden. Dieses kann je nach Button Zustand auch ausgetauscht werden. Es kann via svg realisiert werden oder als background-image im CSS eigebunden.

aria-label ist in dem Fall dein Freund.

[marctrix]

Hej piet,

1. Ich möchte eine Grafik1 per absolute setzen
2. Danach kommen Texte und eine weitere Grafiken2-4 die relativ von der ersten Position der ersten Grafik1 abhängig sein sollen.

Du kannst nicht Grafik 1 mit absoluter Positionierung aus jedem Kontext rausreißen und dann an dem unabhängig von allem anderen schwebenden Teil irgendwas ausrichten. Das ist, als ob du eine Nagel in einenwolke hauen willst, um einen Baum dran festzubinden... 😉

Google zeigt

Du meinst den Browser Chrome von der Firma Google.

Marc

[Henry]

Hallo marctrix,

Google zeigt

Du meinst den Browser Chrome von der Firma Google.

Das mag in naher Zukunft eventuell das Gleiche sein. 😉 scnr.

Gruss
Henry