CSS Strona nie jest na całą rozdzielczośc ekranu

pytanie zadane 7 listopada 2015 w HTML i CSS przez adamek0123 Obywatel (1,530 p.)

Witam,

Stworzyłem stronę na ,której margin było na 0% i strona była na całą rozdzielczośc mojego ekranu ale kiedy ją zmniejszyłem (razem z preglądarką) strona się rozjechała. Jak zrobić aby srona była na całą rożdzielczość ekranu , po bokach ma ne być żadnego białego odstępu. Proszę o pomoc (oto niekomlętny kod CSS)

#box
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

2 odpowiedzi

odpowiedź 7 listopada 2015 przez Michał628496 Pasjonat (17,340 p.)
wybrane 7 listopada 2015 przez adamek0123

Najlepsza

body
{
margin:0;
}
#box
{
width:100%;
}

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

nadal się rozjeżdza

komentarz 7 listopada 2015 przez MrEryk93 Obywatel (1,260 p.)

Spróbuj tak:

body
{
    width: 100%
}

#box /*Zakładam iż jest to główny kontener z całą zawartością*/
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Teraz są białe pozostaości po bokach :)

komentarz 7 listopada 2015 przez MrEryk93 Obywatel (1,260 p.)

do body wrzuć

margin: 0 !important;

Sprawdź, powinno działać ;)

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

przykleiło się do góry strony ale po bokach na dole jest duzo białego

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

Może lepiej daj link do strony bo może się okazać, że problem jest w czymś innym niż ten jeden tag.

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

http://hunterbright.mintsowy.pl/

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

I jak dodac taki pasek na zdjexiu tym aby przechodzil przez cale zdjecie taki szaro przerocysty pasek z informacja ?

komentarz 7 listopada 2015 przez MrEryk93 Obywatel (1,260 p.)

usuń z body margin: 0 !important; i width: 100%;

#box

{

width: 100%;

margin: 0; /*lub bez*/

}

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)
edycja 7 listopada 2015 przez furas

Sam element #box jest typu div więc jak usuniesz width to automatycznie dopasuje się szerokości okna.

Gorsza sprawa z elementami w środku (np. #menu), nad którymi musisz osobno popracować bo one nie mieszczą się w zmniejszonym obszarze.

Nie wiem o co chodzi z tym białym polem. Może chodzi o to, że zostaje białe pole poniżej dolnego paska z napisem "Strona by ..." ? To normalne - ponieważ obrazek zachowuje proporcje więc jak się zmniejszy szerokość obrazka to też i jego wysokość więc moze pojawić się na dole puste pole.

---

W przeglądarce są narzędzia dla developerów które pozwalają chwilow zmieniać CSS (bez zapisu do pliku) i od razu widać to w przeglądarce więc można eksperymetować.

Mnie wychodzi, że takie ustawienia zapewniają rozciąganie obrazu na szerokość.

body
{
    margin: 0;
}

#box
{
   /* nic */
}

Aby było na całą wysokość to trzeba popracować jeszcze z obrazkiem.

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Ale jak dodam w body margin:0% to strona sie rozdziela na cala szerokosc tylko przyciaki cos nie graja jak zrobic aby sie nierozjezdzaly? Sorki za bledy pisze z telefonu

komentarz 7 listopada 2015 przez MrEryk93 Obywatel (1,260 p.)

spróbuj zamiast % dać średnik - > ;

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Czyli np padding:10; ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

Aby przyciski się nie rozjeżdzały to musisz osobno nad nimi popracować - dorobić im osobne reguły w CSS - wyrazić wymiary w procentach a nie w pikselach.

Można też stosować (jak w frameworkach typu Bootstrap) definiowanie w CSS różnych rozmiarów elementów dla różnych rozmiarów ekranu - z użyciem @media.

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Jak ja nic o tym nie wiem :(

komentarz 7 listopada 2015 przez MrEryk93 Obywatel (1,260 p.)

np margin: 0;

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Gdzie to wpisac ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

To teraz wiesz, że istnieje @media i Bootstrap i musisz to obejrzeć i się nauczyć nowych rzeczy :)

Ludzie męczą się od prawie 20 lat z układaniem elemtów na stronach (zwłaszcza, że różne przeglądarki mogą róznie to wykonać bo mają różne wartości domyślne dla elementów) i dlatego powstały takie rzeczy jak frameworki Bootstrap czy Fundation oraz pliki "reset" , które w różnych przeglądarkach zmieniają wartości domyślne na jednakowe.

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

do tego dochodzi Ci poznanie pojęcia RWD - Responsive Web Design

https://pl.wikipedia.org/wiki/Responsive_Web_Design

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Posiadam ksiaKe o css3 i tam chyba cos jeat a jak to zrobic aby sie noe rozjezdzalo jak w div box daje 1width1000px i margin-left margin -right na auto to sie nie rozjezdzaja :)

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

Jak masz stałą szerokość to nic dziwnego, że elementy wewnątrz się nie rozjeżdzają - bo nie muszą zmieniać swojej wielkośći. Ale za to #box nie dopasowuje się do szerokości okna.

A jak chcesz aby #box się dopasowywał do szerokośći okna to musisz zrezygnować ze stałej szerokości. Wtedy zaś trzeba ostro popracować na przyciskami aby też dopasowywały wymiary do wielkości #box - ale nie zrobisz tego jedną magiczną opcją dodaną do #box tylko musisz mocno popracować nad ustawieniami samych przycisków. Zamiast stosować px musisz stosować inne jednostki np. procenty. Ewentualnie możesz stosować @media aby dla szerszych ekranów elementy i czcionka miały zadane większe rozmiary a dla mniejszych ekranów aby miały zadane inne, mniejsze rozmiary.

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Co to te media ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

A zaglądałeś do podanego linku ? Tam jest przykład użycia @media w pliku CSS

https://pl.wikipedia.org/wiki/Responsive_Web_Design

@media pozwala przypisywać do elementów odmienne reguły CSS w zależności od wymiarów ekranu.

Możesz przykładowo dla szerokich ekranów przypisać napisom `font-size: 18px;` a dla mniejszych ekranów przypisać `font-size: 10px;`

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Tak zagladalem do tego a jak to dodam to juz menu bedzie dIalac ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

Jeśli dla różnych rozdzielczości znajdziesz takie parametry aby przyciski się mieściły to nie będą się już tak rozjeżdzać.

Czasami ekran już jest taki mały, że nie wystarcza zmiana wielkości elementów (bo stają się nieczytelne) i trzeba zmieniać ich układ - np. ustawić je jeden pod drugim zamiast koło siebie.

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

To w takim razie jak to zrobic ?

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Czy moglbys pokazac mi przykladowy kod jak np zmiejsze rozdzielosc na maxa to menu ustawi sie jedo pod drugim ? Moglbys html i css prosze ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

To jest kupę roboty bo trzeba najpierw to przewidzidziec w samym kodzie HTML a potem do tego dobrać różne ustawienia w CSS dla różnych rozdzielczości.

Bootstrap ma takie przykłady - w poniższym kolumny ustawiają się jedna pod drugą przy mniejszej szerokości ekranu.

http://getbootstrap.com/examples/jumbotron/

http://getbootstrap.com/examples/grid/

---

Bootstrap stosuje też zamianę menu w przycisk z trzema poziomymi kreskami (chyba zwany hamburger), który rozwija menu.

http://getbootstrap.com/examples/starter-template/

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Znajde to gdzies na internecie ?

komentarz 7 listopada 2015 przez event15 Szeryf (93,790 p.)

A mnie tak swoją ciekawi, czemu nikt nie powiedział mu o użyciu reseta erica meyera?

Swoją drogą important to brzydki zabieg

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Co to jest ?

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

W którymś momencie wspominając o Bootstrap wspomniałem też o wartościach domyślnych i ich resetowaniu ale nie wskazałem konkretnego linku bo jest wiele plików resetujacych.

Może rzeczywiście należało podać link bo to może być przydatne, a samo wspomnienie o czymś takim może przejść niezauważone :)

Strona z różnymi resetami ustawień domyślnych przeglądarek: http://cssreset.com/

komentarz 7 listopada 2015 przez event15 Szeryf (93,790 p.)

Różne przeglądarki (w skrócie) mają różne ustawienia początkowe. Reset je po prostu ustawia na hmm zresetowane :)

komentarz 7 listopada 2015 przez adamek0123 Obywatel (1,530 p.)

Napisze do pana miroslawa z prosba o nagranie tkiego odcinka o @media

odpowiedź 7 listopada 2015 przez furas Maniak (53,800 p.)

width: 100%

Do tego trzeba dać zerowy margines i padding dla html i body.

komentarz 7 listopada 2015 przez event15 Szeryf (93,790 p.)

Nie wiem czemu ktoś dał Ci -1 więc odbiłem :)

komentarz 7 listopada 2015 przez furas Maniak (53,800 p.)

Gdy pisałem odpowiedź nie była jeszcze znana cała reszta informacji o stronie. Pewnie jak ktoś zajrzał i zobaczył ten wpis pod całą powyższą dyskują to uznał go za bezwartościowy :)

Dzięki za +1 :)