HTML Text verschiebt sich?
Hallo... Ich programmiere gerade eine Seite und möchte ein Bild rechts oben einfügen. Dazu benutze ich diesen Script: <img src="https://steamuserimages-a.akamaihd.net/ugc/109607797360622796/082FD74234D265BD8E8F60B2F75F94288E506F54/" img align="right">
Mein Problem ist dass sich der Text der links davon centriert in der Mitte ist weiter nach Links verschiebt obwohl das Bild den Text nicht berührt. Wenn ich das Bild in hintergrund setze um dieses Problem zu vermeiden wird das Bild unsichtbar. Und die größe des Bildes möchte ich auch nicht ändern. Kann mir wer sagen wie ich das Bild so hinbekomme das es den Text nicht verschiebt?
4 Antworten
Zuerst: Der Bild-Tag müsste eher so aussehen:
<img alt="Terraria" src="https://steamuserimages-a.akamaihd.net/ugc/109607797360622796/082FD74234D265BD8E8F60B2F75F94288E506F54/">
Das alt-Tag sollte das Bild kurz und passend beschreiben, das align-Attribut fliegt raus, denn es ist deprecated.
Wenn ich das Bild in hintergrund setze um dieses Problem zu vermeiden wird das Bild unsichtbar.
Ich würde eher vermuten, dass du entweder falschen Code schreibst oder der Container, der das Hintergrundbild bekommen hat, nicht in Breite und Höhe aufgezogen wird.
Mein Problem ist dass sich der Text der links davon centriert in der Mitte ist weiter nach Links verschiebt obwohl das Bild den Text nicht berührt.
Das liegt daran, da beide sich im selben Textfluss befinden und das Bild dabei natürlich auch Platz fordert. Du könntest das Bild stattdessen also absolut positionieren.
Plumpes Beispiel:
HTML:
<p>
<span>Some text</span>
<img alt="Terraria" src="https://steamuserimages-a.akamaihd.net/ugc/109607797360622796/082FD74234D265BD8E8F60B2F75F94288E506F54/">
</p>
CSS:
img {
position: absolute;
right: 0;
z-index: -1;
}
p {
color: white;
text-align: center;
position: relative;
}
Der Paragraph wird mit seiner relativen Positionierung zum Ankerpunkt für das absolut positionierte Bild. Dieses wird zudem in seiner z-Ebene nach unten verschoben, um den Text nicht zu verdecken.
Dein HTML-Code ist schonmal fehlerhaft. Was Du erreichen willst, wirst Du mit HTML alleine auch gar nicht hinbekommen. Gestaltung macht man mit CSS. Und um dir dabei dann helfen zu können wäre ein Link zu deiner Seite hilfreich da man dir dann sagen kann was Du genau in CSS angeben müsstest.
Gib dem Bild eine id.
Schreibe per CSS Position:absolute; hin.
Mit
top:0px;
left:0px;
kannst du dann das Bild positionieren.
Diese Zeile
<img src="https://steamuserimages-a.akamaihd.net/ugc/109607797360622796/082FD74234D265BD8E8F60B2F75F94288E506F54/" img align="right">
ist falsch.
Richtig wär's
<img src="" align="right">
Nein, das wäre ebenso noch falsch. Zum einen fehlt das alt-Attribut, zum anderen ist das align-Attribut längst als deprecated gekennzeichnet worden. Das src-Attribut sollte natürlich nicht leer sein, aber da hast du sicherlich nur vergessen, die URL mit zu kopieren.