• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie działająca poprawnie szerokość body

VPS Starter Arubacloud
0 głosów
281 wizyt
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ź

0 głosów
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.

Podobne pytania

0 głosów
1 odpowiedź 295 wizyt
pytanie zadane 6 października 2018 w HTML i CSS przez bartekDSAXN Użytkownik (560 p.)
0 głosów
3 odpowiedzi 522 wizyt
pytanie zadane 18 grudnia 2015 w HTML i CSS przez lukasz23 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 147 wizyt
pytanie zadane 27 listopada 2016 w HTML i CSS przez redstar1 Bywalec (2,200 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...