Element überragt das Elternelement / Warum?

einsiedler

Hallo liebe Forumer,

ich kann mir nicht erklären warum hier die div.nav-group a Elemente über das #main-nav herüberragt

Kann mir das bitte jemand erklären? Ich kann mir das nur durch den Gebrauch von display: block in einer flexbox erklären, aber warum?

was ist hier falsch?

Achso: Ihr müsst das Bildschirmfenster kleiner schieben ab dem Breakpunkt @media screen and (max-width: 62.500em) bis zum kleinsten Punkt wo man das Bildschirmfenster zusammenschieben kann.

Um diese Website geht es:

Ich bitte um Mithilfe

der misanthrop

NaThan

Möchtest du, wenn du die Navigationsbar öffnest, dass sich das Dropdown in den Content öffnet?
Sprich dein main nicht nach unten verschoben wird?

einsiedler

nee nee nee, innerhalb vom #main-nav

HTML

<ul class="group" role="group">

       <li class="treeitem" role="tree-item">
                 <a class="a-link" href="http://foo.de/aktuell.html">Aktuelles</a>
                 <button aria-expanded="true"><span class="visually-hidden">SubNavigation Item 1</span></button>
                 <div class="nav-group" role="group">
                        <a class="a-sublink" href="http://foo.bplaced.net/foo/ausstellungen.html" role="treeitem">aktuelle Ausstellungen</a>
                        <a class="a-sublink" href="http://foo.bplaced.net/foo/ausstellungen.html" role="treeitem">Blog</a>
                 </div>
       </li>

[ ... ]

Alles anzeigen

zeigen die Elemente von li.treeitem über #main-nav hinweg

wie auf dem jpg zu sehen ist, und ich frage mich warum das so ist. Es soll nicht so sein.

wenn man das Bildschirmfenster weiter zusammenschiebt , kleiner als @media screen and (max-width: 28.125em)

ist das Problem wieder weg.

Die inneren Elemente fügen sich wieder #main-nav

Und ich frage, warum das so ist, es ist falsch so.

Der misanthrop

Sempervivum

Das Problem sind nicht die a-Elemente sondern die lis. Dafür hast Du eine minimale Breite definiert, die die Breite des ul überschreitet, so dass sie nach rechts heraus ragen.

Meine Empfehlung: Auf komplizierte Berechnungen möglichst verzichten und konsequent auf Flexlayout setzen, dann richtet der Browser es so ein, dass es passt.

html-seminar.de/woltlab/attachment/1832/

einsiedler

Aaaah, ja coool, dann muss das aber kleiner als @media screen and (max-width: 62.500em) gelten, davor zwischen @media screen and (min-width: 62.500em) and (max-width: 90.000em) nimmt sonst #main-nav nicht die nötige Breite mehr ein. (AHA, jetzt weiß ich warum man vom kleinen zum großen stylt...)

Mal gucken ob es geht...

Jetzt guck ich mal beim kleinsten zusammengeschobenen Zustand das da der Botton mittig sitzt...

DANK der misanthrop

einsiedler

Nö, isset nich, jetzt macht Opera auch Probleme und im Firefox isset ganz besch....PIIIEP

Siehe:

Jetzt mitmachen!