[HTML][CSS] "max-width" nie działa |
[HTML][CSS] "max-width" nie działa |
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 |
|
|
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. -------------------- |
|
|
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.
|
|
|
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".
-------------------- |
|
|
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?
|
|
|
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%.
-------------------- |
|
|
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 |
|
|
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.
-------------------- |
|
|
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 |
|
|
Wersja Lo-Fi | Aktualny czas: 26.04.2024 - 09:58 |