FlexBox mit Picture-Link

[Gunnar Bittersmann]

@@SchokoJunkie

<a href='index.php'><img src='background_files/LQ-Logo.svg' style='float:left; margin-left:1px; max-height: 6em; height: 90%;' alt='Logo'></a>

Der Alternativtext ist falsch; mit „Logo“ ist der Link nicht sinnvoll betitelt. Richtig:

<a href='index.php'>
  <img src='background_files/LQ-Logo.svg' alt='Startseite'>
</a>

Und die Styleangaben gehören ins Stylesheet, nicht inline in ein style-Attribut.

---

<a href='index2.php' class='menu'>de&raquo;en</a>

Bist du sicher, dass deine Zielgruppe versteht, was mit „de›en“ gemint ist? Warum schreibst du da nicht „English“ hin? Auf der englischsprachigen Seite „deutsch“ – Beschriftung in der jeweiligen Zielsprache.

---

<div style='width: 100%;'class='framebox'>
  <a href='kreativ.php'><img src='background_files\creative.jpg' class='picbox'></a>
  <a href='dokumentarisch.php'><img src='background_files\docu.jpg' class='picbox'></a>
  <!--a href='sideproject.php'--><img src='background_files\sideproject.jpg' class='picbox'><!--/a-->
  <a href='projektb.php'><img src='background_files\projectarea.jpg' class='picbox'></a>
</div>

Auch das ist eine Navigation, d.h. <nav> ist angebracht.

Besser: als Liste auszeichen. Das ul-Element wäre dann die Flexbox.

Allen Links fehlt der zugängliche Linktitel (Alternativtext für Bilder).

Ich glaub auch nicht, dass die Bild-URLs mit \ funktionieren werden.

<nav>
  <ul id='section-menu'>
    <li>
      <a href='kreativ.php'>
        <img src='background_files/creative.jpg' alt='kreativ'>
      </a>
    </li>
    <li>
      <a href='dokumentarisch.php'>
        <img src='background_files/docu.jpg' alt='dokumentarisch'>
      </a>
    </li>
    <li>
      <a href='sideproject.php'>
        <img src='background_files/sideproject.jpg' alt='nebenbei'>
      </a>
    </li>
    <li>
      <a href='projektb.php'>
        <img src='background_files/projectarea.jpg' alt='Projekte'>
      </a>
    </li>
  </ul>
</nav>

Eine Klasse 'picbox' brauchst du nicht, wenn alle Geschwister gleich sind. Dann kannst du sie auch anders selektieren: #section-menu > li.

😷 LLAP