SchokoJunkie: FlexBox mit Picture-Link

Beitrag lesen

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