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

Strona www rozmieszczenie divów zalezne od rozdzielczosci

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+1 głos
579 wizyt
pytanie zadane 22 czerwca 2016 w HTML i CSS przez ciemnos Nowicjusz (210 p.)

witam mam taki problem gdyż stworzyłem stronę swoją własną na monitorze full hd i po wrzuceniu jej na serwer znajomi którzy posiadają mniejsze monitory widzą tą stronę jako rozsypaną bez spójnosci jak zrobic zeby na kazdym komputerze monitorze ta strona byla tak samo wyswietlana bez przesuwajacych sie divów

dziekuje za pomoc

oto moja strona  http://www.downhillisawesome.cba.pl

 

5 odpowiedzi

+1 głos
odpowiedź 22 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
edycja 22 czerwca 2016 przez mitelak
  • Twój container nic nie robi
  • styluj klasami nie id
  • ogólnie chaos niesamowity, pół css do wywalenia tak naprawdę
  • wywal center i rób to w cssie
  • cały Twój problem to pływające elementy (float) które mają ustaloną szerokość sztywno w px na taką jaka Tobie odpowiadała na monitorze 
  • rozwiązanie? poczytaj o float dlaczego dzieje się tak a nie inaczej http://webkod.pl/kurs-css/wlasciwosci/pozycja/float
    możesz zainteresować się gridami, czy flex-boxem

//edit ogólnie rzecz biorąc, container powinien być jakby maksymalną szerokością i często jest to 960px, albo troche więcej jak 1170px, po co to? Gwarantuje że strona zawsze będzie wyglądać tak jak zakodowaliśmy jeżeli będzie miała więcej niż 960px po prostu po bokach będzie przestrzeń. Można oczywiście zrobić stronę tak, że nie mamy przestrzeni po bokach tylko całość rozciągniętą, ale tutaj już trzeba wiedzieć więcej, żeby zrobić to dobrze dla różnych rozdzielczości, a na pewno nie używać wszędzie sztywnych px. 

–1 głos
odpowiedź 22 czerwca 2016 przez kubaapk Nałogowiec (44,270 p.)
Zamiast 'px' używaj %.
komentarz 22 czerwca 2016 przez ciemnos Nowicjusz (210 p.)
ale jak podam wartosci w procentach np max-width 100% to mi sie rozjedzie menu ktore mialo miec wartos 1000px ? czy nie
komentarz 22 czerwca 2016 przez Pampi Początkujący (390 p.)

Jeśli twój ekran ma szerokość równą 1000px, to 100% ekranu to dalej 1000px.
Pamiętaj jednak o tym, że musisz uwzględnić padding i margin. O ile dobrze pamiętam to szerokość procentowa bierze jako 100% szerokość bloku, który jest rodzicem. A to znaczy, że jeśli masz coś takiego

 <div style="width: 100px" > <div style="width: 50%" > </div> </div> 

 to div w środku będzie miał 50px bo 100px*50% = 50px ;) 

–1 głos
odpowiedź 22 czerwca 2016 przez AV'ger Użytkownik (790 p.)
Cały Twój problem to nic innego jak responsywność. Poczytaj o tym trochę, zagłąb się w temat i wszystko pójdzie jak elegancko.

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

http://webkod.pl/kurs-css/lekcje/dzial-4/responsywny-uklad-elementow-html
komentarz 22 czerwca 2016 przez ciemnos Nowicjusz (210 p.)

WPISALEM DO HTML TO

<meta name="viewport" content="width=device-width, initial-scale=1" />

I nic nie dalo dalej namieszane jest 

komentarz 22 czerwca 2016 przez niezalogowany
Z łaski swojej przeczytaj ten kurs, a dopiero później mów, że coś Ci nie działa.
–1 głos
odpowiedź 22 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)
edycja 22 czerwca 2016 przez CzikaCarry
Jak powiedział mój przedmówca problemem jest resposnywność. Jest wiele frameworków ułatwiających tworzenie stron responsywnych (np Bootstrap), lecz można zrobić to inaczej. Zamiast używać px lub innych jednostek "nieresponsywnych" możesz użyć wartości procentowych, lub vh, vw, vmin, vmax http://webroad.pl/html5-css3/4052-rozmiary-obszar-roboczy-vw-vh-vmax-vmin @edit nie rozumiem za co te minusy, podpadłem komuś czy co? Piszę tutaj prawdę i wyłącznie prawdę która jest prawdziwa (takie masło maślane hyh).
komentarz 22 czerwca 2016 przez ciemnos Nowicjusz (210 p.)
po  zmianie rozsypuje sie strona nawet u mnie
komentarz 22 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)
A używasz vh do wysokosci, vw do szerokości oraz czy używasz tylko tych jednostek? (ewentualnie %). 1vh jest to 0.01 wysokości okna, czyli jeśli okno ma 1080px wysokości , to 1vh to 10.8px. Podobnie jest z vw, tyle że to tyczy się szerokości. Zrobiłem kilka stronek z użyciem tego i chromowe narzędzia deweloperskie mówią mi, ze moje strony działają poprawnie i zachowują proporcje od malych smartfonow, przez komputery, aż po monitory 4k, w każdym stosunku szerokości do wysokości ekranu.
komentarz 22 czerwca 2016 przez ciemnos Nowicjusz (210 p.)
zmienilem tylko wysokosc oraz szerokosc containera czyli glownego pojemnika ktory wseptna wartosc mial 100% i wpisalem do id w css width: 1920vmax; i 320vmin; ale nie wiem czy dobrze pierwszy raz sie spotykam z tymi zapisami wartosci
komentarz 22 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)
vmax to vh lub vw w zależności od tego, które jest większe. Jesli wieksza jest szerokość ekranu, vmax=vw, jeśli wieksza jest wysokość vmax=vh. Z vmin jest na odwrót. Te dwie jednostki przydają się szczególnie, gdy chcemy uzyskać inny widok dla orientacji poziomej i pionowej wyświetlacza telefonu. Aby div container miał szerokość ekranu musi mieć 100vw/vmax, a aby miał np. 5 wysokości ekranu musi mieć 500vh/vmin. Zmiana wartości tylko dla pojemnika nic tu nie da, musisz pozmieniać resztę divów, marginesy, paddingi, czasami nawet rozmiar czcionki. Na początku może to się wydawać trudne ale spokojnie można to ogarnąć w jeden dzień. Nauczenie się tego jest opłacalne, ponieważ według mnie jest to szybszy sposób niż bootstrap czy inne frameworki.
komentarz 22 czerwca 2016 przez ciemnos Nowicjusz (210 p.)
czyli mam rozumiec ze jezeli moj div logo ma szerokosc 1000px to w wartosci viewport mam go zapisac jako width:100vw;

i tyle starczy?

???
komentarz 22 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)
Twój ekran jest w fullhd, czyli zakładam że ma szerokość 1920px. 1vw=0.01 szerokości ekranu czyli 1vw=0.01*1920~19px. Twój div ma 1000px szerokości, zatem 1000px/19px~50vw. Oczywiście podaje wartości zbliżone ponieważ piszę w pospiechu z telefonu i nie mam czasu korzystać z kalkulatora.
–1 głos
odpowiedź 22 czerwca 2016 przez ISO Początkujący (350 p.)



Spróbuj oba marginy dać na auto, być może to też coś psuje :P

Podobne pytania

0 głosów
2 odpowiedzi 598 wizyt
0 głosów
1 odpowiedź 235 wizyt
pytanie zadane 26 września 2020 w HTML i CSS przez filip.r00 Początkujący (270 p.)
–3 głosów
0 odpowiedzi 126 wizyt
pytanie zadane 10 listopada 2019 w HTML i CSS przez fff Gaduła (3,950 p.)

93,102 zapytań

142,068 odpowiedzi

321,530 komentarzy

62,443 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...