Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS] "max-width" nie działa
stellatus
post 30.04.2020, 13:49:28
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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.

Ten post edytował stellatus 30.04.2020, 13:58:58
Go to the top of the page
+Quote Post
trueblue
post 30.04.2020, 14:03:56
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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

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


--------------------
Go to the top of the page
+Quote Post
stellatus
post 30.04.2020, 14:17:18
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
trueblue
post 30.04.2020, 14:46:28
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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".


--------------------
Go to the top of the page
+Quote Post
stellatus
post 30.04.2020, 14:59:33
Post #5





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


To jak zrobić, żeby rozciągał się maksymalnie do 1920px i żeby był wyśrodkowany?
Go to the top of the page
+Quote Post
trueblue
post 30.04.2020, 15:21:47
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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%.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 30.04.2020, 16:35:47
Post #7





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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.

Ten post edytował stellatus 30.04.2020, 16:44:23
Go to the top of the page
+Quote Post
trueblue
post 30.04.2020, 16:47:20
Post #8





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post
stellatus
post 30.04.2020, 21:55:01
Post #9





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


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!

Ten post edytował stellatus 1.05.2020, 10:17:13
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 21:02