Nie działająca poprawnie szerokość body

pytanie zadane 7 października 2018 w HTML i CSS przez bartekDSAXN Użytkownik (560 p.)

Edit: lepiej to zobaczyć w kodzie lokalnie, bo na jsfidle jest żleto widać

Cześć.. jest problem.

chodzi o to że footer przy wyglądzie responsywnym np. 345x510 , nie jest w prawym dolnym rogu, a przy końcu elementu poprzedniego, jeśli szerokość okna jest większa, wszystko działa, usunięcie bottom sprawia, że wyświetla się prawidłowo, ale nie wiem dlaczego --->

i jeszcze jedno chyba bardzo powiązane, pytanie <nav class="nav-main-mobile">…</nav> ma właściwość width 100%, a rodzic <body> ma nie określoną ( i jest to chyba min.szerokość okna, czyli jeśli mam okno 345x510 to będzie to 345px, natomiast, w podglądzie widze że body zawiera dużo więcej w prawo, zawiera wszystko, ale nie jest to wliczone do width, bo jak widać element <nav> ma tylko szerokość okna.I teraz nie wiem co jest grane, dlaczego tak jest? i jak zrobić aby tak nie było.

https://jsfiddle.net/j9ed85fb/1/

1 odpowiedź

odpowiedź 7 października 2018 przez imklau Nałogowiec (42,090 p.)

1. Gdzie ta stopka w takim razie powinna być? Właściwie nawet bez odpowiedzi na to pytanie podejrzewam, że w ogóle nie powinna być pozycjonowana absolutnie. Bo po co?

2. Body będzie miało taką szerokość, jaką ma zawartość. Ty masz tam np .main-content, które ma min-width: 1200px i to ono Ci rozszerza body.

komentarz 7 października 2018 przez bartekDSAXN Użytkownik (560 p.)
edycja 7 października 2018 przez bartekDSAXN

wiem, wiem, div i text-align: right, ale nie o to chodzi, nie czujesz że nie o to chodzi? 0_o

po za tym, tam bedzie inny contetnt, więc .... musi być absolute, ale jeszcze go nie ma

no ma min-width 1200px, więc o co chodzi? w poglądzie body, wszystko jest ok, ma w sobie całość, przecież content ma ponad 345px, natomiast box-model pokazuje że width: 345px.

komentarz 8 października 2018 przez imklau Nałogowiec (42,090 p.)

Wiem o co chodzi i wiem, że stopka nie powinna być pozycjonowana absolutnie, no chyba, że chcesz żeby nachodziła na inne elementy :)
Masz świadomość tego, że element mający absolute jest pozycjonowany względem jakiegoś innego, który ma pozycjonowanie inne niż statyczne? A jeśli jego "przodek" takiego nie ma to wtedy jest pozycjonowany względem okna przeglądarki, czyli u Ciebie jest idealnie tak, jak sobie zapisałeś w CSS. Stopka nie jest na samym dole body, a na samym dole okna. Czujesz, że o to chodzi? 0_o

Weź to proszę na logikę, zapomnij o CSS.
Do garażu o długości 5m wejdzie merc mający 5,5m? Bo to chyba normalne, że będzie mu tyłek z garażu wystawał, nie? :D

A teraz CSS. Twoja zawartość ma minimum 1200px, więc na każdej mniejszej rozdzielczości będzie wystawać ileś tam poza body.
Masz szerokości ekranu 520px, a jakaś część strony ma ustalone na sztywno, że ma mieć nie mniej niż 1200px to myślisz, że mimo wszystko się dopasuje do 520px? Usuń sobie tymczasowo ten napis i zobaczysz o co chodzi :)

komentarz 8 października 2018 przez bartekDSAXN Użytkownik (560 p.)

no jest pozycjonowany do body, więc powinien być w prawym dolnym rogu body.

ale określiłem że <body> ma co najmniej 1200px, więc nie rozumiem o co chodzi. Czyli body powinno mieć 1200px, no i na poglądzie tak ma, a nie w wartości, no co z tego że będzie wystawał poza ekran urządzenia, od tego są scrolle, nie no nie rozumiem, przecież szerokość body to 1200px i contetnu w środku też, więc nie wiem dlaczego szerokość body to tylko szerokość ekranu, to bez sensu.

komentarz 8 października 2018 przez imklau Nałogowiec (42,090 p.)

No to niby, jak przeglądarce powiedziałeś, że chcesz mieć stopkę pozycjonowaną względem body? :D bo to, że dałeś absolute na stopkę to za mało.

W Twoim kodzie nigdzie nie ma określone, że body ma minimum 1200px. A nawet jeśli by było to byłby błąd :)

no co z tego że będzie wystawał poza ekran urządzenia, od tego są scrolle

raczej na tym nie polega responsywność, ale co ja tam wiem...

komentarz 8 października 2018 przez bartekDSAXN Użytkownik (560 p.)
edycja 8 października 2018 przez bartekDSAXN

nie chodzi o responsywność, dlaczego body na podglądzie zawiera wszystko, a i tak jego szerokość to szerokość okna urządzenia. Min 1200px; dlaczego to jest bląd? w jakim sensie.

komentarz 8 października 2018 przez imklau Nałogowiec (42,090 p.)

Czuje się jakbym mówiła do ściany :D

może ktoś inny będzie miał więcej cierpliwości....

komentarz 8 października 2018 przez bartekDSAXN Użytkownik (560 p.)

jak nie odpowiedziałeś, wtf? body jest mniejsze niż jego content, i nie odpwiedziałeś na to?

komentarz 8 października 2018 przez imklau Nałogowiec (42,090 p.)

jestem kobietą, więc wypadałoby stosować odpowiednie końcówki - to po pierwsze :)

A po drugie skoro jakiś element w body ma ustawione min-width na 1200px to n i g d y nie będzie ta strona działać dobrze na mobile. Myślę, że temat zamknięty :)

komentarz 8 października 2018 przez bartekDSAXN Użytkownik (560 p.)

dobra, pomyliły mi się nazyw, miało być fixed.Nauczę się w końcu tego css lepiej.

Skąd mam wiedzieć że jesteś kobietą, połowa mężczyzn ma awatary kobiet.

ale to jest tylko tymczasowe, sprawdzałem jakby działało wysietlanie całych informacji z dangeo posta, ale i tak to był tylko test!!! ahahaah arrrrr.. Myślisz myślisz, a mnie to irytuje.

nie wiedziałem że jeśli content wystaje ponad szerokość okna to jest nie wliczany w body, przykre.