SchokoJunkie: FlexBox mit Picture-Link

SELF-Forum

FlexBox mit Picture-Link

SchokoJunkie
– Informationen zu den Bewertungsregeln

Hallo,

Auf meiner Frontpage, unter dem Menü, habe ich vier Bilder nebeneinander, die als Link zu den vier Bereichen der Seite führen. Ich möchte die Seite nun mit Flexbox umgestalten, damit sie responsive wird. Im ersten Schritt sollen die vier Bilder einfach nur als inline-Elemente ihre Größe ändern, im zweiten sich dann umordnen.

Das funktioniert auch ganz gut, solange ich nur die Bilder in der Flexbox habe. Sobald ich den Link-Tag darum herumbaue funktioniert das mit der Größenanpassung überhaupt nicht mehr. Offenbar wird das Bild dann nicht mehr als Kind-Element erkannt. Es ist sicher furchtbar einfach zu lösen aber ich seh's einfach nicht. Kann mir bitte jemand helfen?

Hier das Beispiel - nur das dritte Bild passt sich an das Fenster an:

<style>
                         .framebox { display: flex; align-items: flex-start; justify-content: center; }
                         .picbox { margin-left: 1%; flex: 0 1 auto;}

                </style>
        </head>
        <body>
                <nav>
                         <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>
                         <span>

                                 <?php
                                 include("menu_de.htm");
                                 ?>

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

                          </span>

                </nav>

                <hr>

                <main>

                        <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>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. FlexBox mit Picture-Link

    Matthias Apsel Homepage des Autors
    ±0 Informationen zu den Bewertungsregeln

    Hallo SchokoJunkie,

    Die Bilder sind ja dann auch keine Kindelemente des div mehr, sondern Enkel. Gib die Flexbox-Eigenschaften einfach den neuen Kindern.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    Beitrag melden
    ±0
    Informationen zu den Bewertungsregeln

    1. FlexBox mit Picture-Link

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Matthias Apsel

      Der Minuspunkt von mir, weil du keinen der offensichtlichen Fehler genannt hast. Dir sollten die nicht durch die Lappen gehen.

      😷 LLAP

      --
      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. FlexBox mit Picture-Link

    Gunnar Bittersmann Homepage des Autors (Versionen)
    – Informationen zu den Bewertungsregeln

    @@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

    --
    „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln