0 votes
in SoSci Survey (dt.) by s283650 (120 points)

Hallo zusammen,

wie muss der HTML-Code aussehen, dass der kursive Text über dem Bild steht und der Text ,,bis 5kg'' mittig neben dem Bild steht, auf Höhe des Auswahlpunktes?

Vielen Dank!

by s285666 (120 points)
Laut ChatGPT: Bei image{... muss noch die URL vom Bild rein

<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kursiver Text über Bild</title>
  <style>
    .container {
      position: relative;
    }
    .image {
      display: block;
      width: 200px; /* anpassen Sie die Breite nach Bedarf */
      height: auto; /* um das Seitenverhältnis beizubehalten */
    }
    .overlay-text {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      font-style: italic;
    }
    .beside-image {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px; /* oder passen Sie den Abstand nach Bedarf an */
    }
  </style>
</head>
<body>

<div class="container">
  <img class="image" src="bild-url.jpg" alt="Bildbeschreibung">
  <div class="overlay-text">Kursiver Text über dem Bild</div>
</div>

<div class="beside-image">bis 5kg</div>

</body>
</html>
by SoSci Survey (309k points)
Zum Verständnis: Links mittig (also in der Gegend wo es schon steht) das "5 kg" und rechts dann "Beispieleikauf 4,5 kg" und darunter das Bild?
by s283650 (120 points)
@SoSci Survey Ja, genau. Ich hoffe, dass das überhaupt geht.

aktueller Code:

//Beispieleinkauf 4,5kg//
<p><img src="Einkauf_4.5kg.jpeg" style="max-width: 50%" class="right"> bis 5 kg</p>

1 Answer

0 votes
by SoSci Survey (309k points)
edited by SoSci Survey

Probieren Sie bitte mal folgendes:

<div style="display: flex; align-items: center;">
  <div style="flex: 1 1 auto; min-width: 60px;">Beispieleinkauf 4,5kg</div>
  <div style="flex: 1 1 auto; min-width: 120px;">
    <p><img src="Einkauf_4.5kg.jpeg" style="max-width: 100%" class="right"></p>
    <p>bis 5 kg</p>
  </div>
</div>

Zum Nachlesen und Feinjustieren: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

asked May 15 in SoSci Survey (dt.) by s283650 (120 points) Bildformatierung

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...