Text ausrichten, die zweite

[Jochen]

Hallo,

<li>
  <a href="https://.......de./">
    <img src="images/b1.webp" alt ="...">
    Bilder von unseren Produkten
  </a>
</li>

erzeugt

Bilder von unseren

Produkten

und sowohl im Bild als auch im Text ist der Link aktiv

Wie erhalte ich das gleiche aber mit folgendem Aussehen

Bilder von unseren

   Produkten

... also der Text in der 2. Zeile bündig unter dem der 1. Zeile.

[MrMurphy]

Bei deiner Beschreibung streike ich grade etwas.

Grund: Bei HTML haben alle Elemente eine Bedeutung. Dein Inhalt stellt für mich eher eine Überschrift oder einen Text dar und keine Liste. Von daher würde ich entweder Überschriftelmente (h1, h2, ...) oder das Absatzelement (p) verwenden.

Um Text innerhalb eines Elements umzubrechen gibt es das br-Element.

Um Text zentriert darzustellen gibt es die CSS-Anweisung "text-align: center;".

[Rolf B]

Hallo Jochen,

du könntest den Link zur Flexbox machen. Dieses HTML unterstellt:

<nav>
  <ul>
    <li>
      <a href="...">
        <img src="..." alt="...">
        <p>Bilder von unseren Produkten</p>
      </a>
    </li>
  </ul>
</nav>

nav li a {
   display: flex;
   gap: 0.5em;
}
nav li a img {
   flex: 0 0 auto;
}
nav li a p {
   flex: 1 0 5em;
   margin: 0;
}

Die Flexbox sorgt dafür, dass img und p nebeneinander gesetzt werden.

Mit "flex: x y z" setzt Du die Eigenschaften flex-grow (x), flex-shrink (y) und flex-basis (z). flex-grow bestimmt, ob das Element sich ausbreiten darf, wenn Platz übrig ist (0 heißt: nicht ausbreiten), flex-shrink erlaubt, dass es schmaler werden kann (0 heißt: nicht schmaler werden) und flex-basis gibt die Breite an, mit der die Berechnungen für die Breitenverteilung starten. "auto" heißt: so breit, wie das Element von sich aus ist. Bei einem Bild hast Du sicherlich irgendwo die width und height Angaben für die intrinsische Größe oder eine width-Angabe im Stylesheet, aber wenn Du eine bestimmte Größe G erzwingen willst, kannst Du die width im Stylesheet weglassen und das mit flex: 0 0 G; tun.

Für das p Element habe ich den Margin auf 0 gesetzt, der stört in der Liste, und mit flex: 1 0 5em sage ich: Basisbreite 5em (ziemlich wenig), darf nicht weiter schrumpfen, aber darf sich auf den verfügbaren Platz ausbreiten.

Die Flexbox dürfte sich dann von der Höhe her am Bild orientieren. Die Höhe der Flex-Items (also der Kind-Elemente des Flexbox-Elements) wird standardmäßig auf die Höhe der Flexbox aufgezogen (align-items:stretch), aber wenn Du z.B. willst, dass das p-Element vertikal zum Bild zentriert ist, kannst Du dem a Element auch align-items:center geben.

Flexbox im Selfwiki

Rolf

[MrMurphy]

Ich habe Jochen so verstanden, das das Wort "Produkten" zentriert unter dem Bild und dem Text "Bilder von unseren" stehen soll.

[Rolf B]

Hallo MrMurphy,

zentriert unter dem Bild und dem Text

Kann man aus dem Versuch einer visuellen Darstellung herausdeuten, ja, aber ich lese den Text

also der Text in der 2. Zeile bündig unter dem der 1. Zeile.

so, dass es so sein soll:

###   Bilder von unseren
      Produkten

Die # symbolisieren das Bild. Welche Größenverhältnisse existieren, ist schwer zu sagen.

Statt Flexbox könnte man auch ein Padding mit einem background-image machen. Oder ein Grid. Vielleicht auch float:left und p mit Margin. Flexbox schien mir am passendsten zu seinem Markup.

Rolf

[Matthias Scharwies]

Servus!

Hallo MrMurphy,

Ich habe Jochen so verstanden, …

Kann man aus dem Versuch einer visuellen Darstellung herausdeuten, ja, aber ich lese den Text

Spökenkiekerei. 😀

Statt Flexbox könnte man auch ein Padding mit einem background-image machen. Oder ein Grid. Vielleicht auch float:left und p mit Margin. Flexbox schien mir am passendsten zu seinem Markup.

Im Wiki gibt es dieses Beispiel mit grid:

• CSS/Tutorials/Grid/Einführung#Das Media-Objekt

Das Tutorial hatte ich schonmal verlinkt.

Herzliche Grüße

Matthias Scharwies

[Jochen]

Hallo Matthias

Im Wiki gibt es dieses Beispiel mit grid:

• CSS/Tutorials/Grid/Einführung#Das Media-Objekt

Wie erreiche ich in diesem Beispiel, dass das Bild und der Text auf eine andere Seite verlinken?

[MudGuard]

Hi,

Wie erreiche ich in diesem Beispiel, dass das Bild und der Text auf eine andere Seite verlinken?

Nicht beide in einen Link packen.

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

Wie erreiche ich in diesem Beispiel, dass das Bild und der Text auf eine andere Seite verlinken?

einfach das Linkziel (href-Attribut) ändern!

Gruß
Kalk

[Rolf B]

Hallo Jochen,

und wieder einmal ist deine Frage mehrdeutig.

Das Beispiel, das Du verlinkst, enthält keinen Link. Möchtest Du, dass aus dem Media-Item ein Link wird? Oder möchtest Du, dass das Bild und der Text im Media-Item jeweils ein eigener Link sind, die unterschiedliche Ziele haben?

Wenn das ganze Media-Item ein Link sein soll, dann hülle den <li>-Inhalt in ein <a>-Element ein und ändere das CSS so, dass nicht mehr das li, sondern das a-Element zum Grid wird. Der Selektor li>img muss dann auch angepasst werden, damit er das img-Element wieder trifft.

Wenn Bild und Text zwei unterschiedliche Links sein sollen, ist die im Beispiel genutzte HTML Struktur ungünstig. Es wäre dann einfacher, wenn man z.B. nur das h3 Element zum Link machte. Wenn man aber img und h3 in a-Elemente einhüllt, muss wieder das CSS angepasst werden. Darauf gehe ich nur dann näher ein, wenn genau das dein Wunsch ist.

Rolf