HTML Code Bild+Link+ausrichten

  • Hallo liebe Community !


    Ich habe eine Frage zu einem html Code.


    Da ich ein absoluter Frischling bin und mich wenig damit auskenne bitte ich um Nachsicht, falls die Lösung einfach sein sollte, aber ich nicht selbst darauf gekommen bin. Ich möchte ein Bild als LINK posten und zwar mit 1 Codezeile und alles muß als HTML geschrieben sein, denn CSS geht dort nicht, wo ich das posten möchte.


    Der aktuelle Code den ich verwendet funktioniert zwar super, aber das Bild sollte jetzt BITTE mittig auf der Seite erscheinen, oder zumindest nach eigenen Angaben versetzt erscheinen.


    <a href="LINK"><img src="BILD.png" alt="TEXT" /></a>


    Wenn ich nun versuche das Bild zu versetzen, oder an irgendwas auszurichten, dann wird der leere Platz davor und dahinter automatisch auch zum Link.

    Ich verstehe nicht was ich da falsch mache und wie man es hinbekommt, das mein Bild versetzt / eingerückt wird, oder das er mir den ganzen leeren Platz davor und dahinter zu einem Link macht, wo nichts zusehen ist. Dafür habe ich den folgenden Code versucht:


    <a href="LINK"><img src="BILD.png" style="display:block; width:600px; height:300px; margin: 0 auto;" alt="TEXT" /></a>


    Bitte helft mir ich weiß nicht was ich noch machen soll sonst 😢

  • Ohne die wirkliche Größe des Bildes zu kennen:


    Code
    <a href="LINK" style="display:block; width:600px; height:300px; margin: 0 auto;"> <img src="BILD.png"style="display:block; width:600px; height:300px;" alt="TEXT"/> </a>
  • Ohne die wirkliche Größe des Bildes zu kennen:


    Code
    <a href="LINK" style="display:block; width:600px; height:300px; margin: 0 auto;"> <img src="BILD.png"style="display:block; width:600px; height:300px;" alt="TEXT"/> </a>

    Oh mein Gott das ist ja traumhaft !
    Du bist der Retter des Tages !!!1

    Vielen herzlichen Dank mit dem Code ist das Bild endlich wo es sein soll udn auch der leere Platz davor udn danach ist jetzt kein Link mehr, sondern wirklich nur das Bild.

    Die Bildgröße ist übrigens genau 600px breit und 300px hoch.

  • Ich möchte jetzt nicht übertreiben, aber könnte man nicht auch noch im Bild selbst nur eine bestimmte Stelle markieren die dann als klickbarer Link fungiert ?

    Sowas habe ich nämlich auch schon öfter gesehen auf der Website und frage mich, wie man das macht und wie schwer das umzusetzen ist.

    Ich meine damit die beiden Wörter auf dem Beispielbild:

    test.png

  • Dazu benötigst du HTML und CSS in aktueller Version. Die beiden Texte werden als Text zusammen mit dem Bild in einen Container in HTML eingegeben und mittels CSS ausgerichtet. Aus dem Bauch raus würde ich die Texte mittels Flexbox (display: flex;) ausrichten, das hängt aber von der gesamten Seite ab, die ich nicht kenne.


    Als Einzeiler geht das etwas komplizierter auch, das hat aber mit aktuellem HTML und CSS nichts zu tun.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!