Forum PHP.pl > [HTML][CSS] "max-width" nie działa

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] "max-width" nie działa

stellatus

30.04.2020, 13:49:28

Na stronie freuciv.com, pod trzema wyróżnionymi postami, na górze strony znajduje się "div.facet-nav-menu" (Alle zeigen, Tags, Kategorie...). Gdy zmniejszymy zawartość okna (zoom minus), zauważymy, że ten div rozciąga się na szerokość okna, a powinien mieć szerokość 1920px i być wyśrodkowany. Wydawało mi się to łatwe do naprawienia:

Kod

.facet-nav-menu {
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
}

Jednak marginesy ściskają tego diva do 881 px. Jaka jest tego przyczyna? Wydawało mi się, że skoro atrybut 'max-width: 1920px" nie jest skreślony, to div powinien rozciągać się max do tej szerokości.

Dla eksperymentu wywaliłem "margin-right: auto" i "margin-left: auto" i wsadziłem "div.facet-nav-menu" w tag <center>. Oczywiście zadziałało, ale wiem że tego tagu już się nie stosuje.

trueblue

30.04.2020, 14:03:56

Ja nie widzę, aby było nadane max-width.

Zacznij korzystać z widoku responsywnego w narzędziach developerskich, a nie skalowania widoku.

stellatus

30.04.2020, 14:17:18

Nie jest wpisane, bo gdy wpiszę to przy zoomie mniejszym niż 100% div.facet-nav-menu przesunie się w lewo. Cały czas korzystam z widoków reponsywnych. Na ekranach do 1920px, powyżej zoomu 100% wszystko działa dobrze na każdym urządzeniu, ale gdy zmniejszę okno zoomem pojawia się problem tylko z tym jednym divem.

trueblue

30.04.2020, 14:46:28

max-width przecież ogranicza rozmiar maksymalny, a nie minimalny. Jeśli element nie potrzebuje więcej, to nie zajmuje 1920px. Nie zachodzi tu żadne "ściskanie".

stellatus

30.04.2020, 14:59:33

To jak zrobić, żeby rozciągał się maksymalnie do 1920px i żeby był wyśrodkowany?

trueblue

30.04.2020, 15:21:47

Musiałbyś nadać min-width:1920px, tyle, że dla 1600px element będzie za szeroki i tu być może dostrzeżesz, że element powinien być w kontenerze nierozciągającym się na całą szerokość okna, bo wtedy mógłbyś nadać min-width:100%.

stellatus

30.04.2020, 16:35:47

Sorry, ale tego nie rozumiem. Dlaczego tutaj to działa: https://codepen.io/reti/pen/yLYomJR ? Kod jest identyczny z tym na stronie + css z pierwszego postu.

trueblue

30.04.2020, 16:47:20

Nie jest identyczny, bo na stronie kontenerem dla paska nawigacji jest #page jako flex, a w przykładzie <body> jako block.

stellatus

30.04.2020, 21:55:01

Jak wywalę tego flexa z #page to oczywiście opisany tutaj problem znika, ale nie wiadomo czy to nie spowoduje jakichś innych błędów. Rozwiązałem to inaczej. Dlaczego z tym divem nie ma tego problemu? Jego rodzic ma klasę '.g1-row' z atrybutem 'width: 100%'. Zatem CSS zostaje taki jak podałem w pierwszym poście, do tego trzeba włożyć 'div.facet-nav-menu' do <div style="width: 100%">. I to był klucz do rozwiązania problemu, jednak... kompletnie nie rozumiem jak to działa. Może jutro mnie olśni.

Edycja:
Wszystko chyba jasne. Bardzo mi pomogłeś. Dzięki!

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.