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

Nie poprawnie wyświetlona strona

VPS Starter Arubacloud
0 głosów
475 wizyt
pytanie zadane 18 listopada 2017 w HTML i CSS przez lalanablanalala Bywalec (2,090 p.)
edycja 27 grudnia 2017 przez lalanablanalala

Zacznę na nowo żeby było łatwiej zrozumieć. Chcę aby na strona book na urządzeniu mobilnym ( telefonie ) wczytywała się do najniżej zdeklarowanej wartości, czyli 

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 720PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (max-width: 720px) {
#container {
width: 100%;
}		
link do pliku css tutaj oraz cały kod css:
/* _________   B O O K   _________ */

body {
margin: 0 !important;
background-color:#222;
font-size:20px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
text-shadow: 1px 1px #000, 2px 2px #000;
transition: all .3s ease-in-out;	
}
body a {	
color: #ccc;
text-decoration: none;
transition: all .3s ease-in-out;
}
body div {
transition: all .3s ease-in-out;		
}
img {
transition: all .3s ease-in-out;	
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: auto;
margin-right: auto;
min-width: 720px;	
max-width: 1250px;	
padding: 30px 0px 140px 0px;
}
.logo {
display: flex;
align-items: center;
justify-content: space-around;
width: 95%;
height: 60px;
min-width: 720px;
margin-bottom: 30px;
background-image:radial-gradient(ellipse at bottom, #e59400 5%, transparent 100%);
box-shadow:0 0px 20px 0px #e59400 inset;
border-radius: 15px;
}
.logo div {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
}
.logotitle {
min-width: 380px;
}
.logotitle div {
border-radius: 15px;	
box-shadow:0 10px 20px 0px #000;
}
.logotitle div:hover {
border-radius: 15px;	
box-shadow:0 0px 30px 10px #e59400;
}
.logoimg {
min-width:85px;	
background: url("../image/book.png") no-repeat center;
background-size:50px 50px;
}
.logotitle a {
font-size: 25px;
padding: 15px 15px 15px 20px;
letter-spacing: 5px;
background-image:radial-gradient(ellipse at bottom, #e59400 10%, #111 130%);
border: 3px solid #ccc;
box-shadow:0 0px 10px 0px #e59400 inset;
text-shadow:  1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000;
border-radius: 15px;
} 
.logotitle a:hover {
color: #fff;
font-size: 28px;
border: 4px solid #eee;
background-image:radial-gradient(ellipse at bottom, #e59400 10%, #222 130%);
box-shadow:0 0px 20px 0px #e59400 inset;
} 
.logohome {
min-width:85px;	
}
.logohome img {
width: 60px;	
border: 2px solid #ccc;
border-radius: 15px;	
}
.logohome img:hover {
width: 65px;	
border: 3px solid #eee;
-webkit-filter: brightness(120%); 
filter: brightness(120%);
}	
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ BOOK BOX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
.bookbox {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 90%;
max-width: 1000px;
margin-bottom: 30px; 
border: 5px solid #ce8500;
background-color: #e59400;
box-shadow:0 10px 20px 0px #000;
border-radius: 10px;
}
.bookbox:hover {
border: 5px solid #a06700;
background-color: #ce8500;
box-shadow:0 0px 20px 0px #a06700;
}	
.booktitle {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
padding: 10px;
color: #fff;
font-size: 28px;
letter-spacing: 3px;
margin-left: 3px;
text-shadow:  1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000;
} 
.aboutbox {
width: 100%;
margin: 0px 10px 10px 10px;
padding:20px;
text-indent: 30px;
border-radius: 10px;
background-color: #222;
box-shadow:0 0px 100px 0px #000 inset;
color:fff;
} 
.aboutbox img {
float: left;
max-width: 250px;
max-height: 250px;
border: 3px solid #ccc;
margin-right: 20px;
}
.aboutbox p {
text-indent: 30px;
margin: 10px 0px 0px 0px;
}
.aboutbox span {
font-size: 14px;	
}
#bgimage {
height: 0;
width: 0;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 720PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (max-width: 720px) {
#container {
width: 100%;
}		

}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 720PX END ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
#topbox {
display: none;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1150PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width: 1150px) {
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ TOP ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 
#topbox {
display: flex;
align-items:  center;
justify-content: center;
width: 100%;
padding: 5px 0px 5px 0px;
}
#fb {
display: flex;
align-items: center;
justify-content: flex-start;
width: 50%;
height: 40px;
margin-left: 50px;
}
#top {
display: flex;
align-items: center;
justify-content: flex-end;
width: 50%;
height: 40px;
margin-right: 50px;
}
#top div {
display: flex;
align-items: center;
justify-content: center;
width: 13%;
height: 100%;
}
#onlinebox {	
background-color:#333;
box-shadow:0 5px 30px 0px #000 inset;
border-radius:10px;
font-size: 35px;
background: url("../image/listeners.png") no-repeat center;
background-size: 35px 35px;
transition: all .3s ease-in-out;	
}
#onlinebox:hover {	
color: #fff;
font-size: 40px;
background: url("../image/listeners.png") no-repeat center;
background-size: 40px 40px;
}			
#bgimage {
height: auto;
width: 100%;
position: fixed;
z-index: -100;
left: 0px;
min-height: 938px;
min-width: 1250px;
}	
#container {
padding: 0px 0px 70px 0px;
}	
.logohome {
width:100px;	
}	
.logohome img {
width: 70px;	
border: 2px solid #ccc;
border-radius: 15px;	
}
.logohome img:hover  {
width: 75px;	
border: 3px solid #eee;
-webkit-filter: brightness(120%); 
filter: brightness(120%);
}	

}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 1150PX END ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 900PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (min-width: 900px) {
.aboutbox {
color: #ccc;	
box-shadow:0 0px 50px 0px #000 inset;
} 
.bookbox:hover .aboutbox {
color: #fff;
}
.bookbox:hover .aboutbox {
box-shadow:0 0px 100px 0px #000 inset;
} 

}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 900PX END ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

 

Oczywiście w pliku css mam również inne wartości jak np. 

@media screen and (min-width: 1150px) {

gdyż chcę aby strona dostosowywała się również do okna(iframe)  na stronie głównej  tzn index

 

Dodając do kodu html tą wartość: 

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

spowodowało, że na telefonie strona wczytuje się do najniższej zdeklarowanej wartości, czyli 720px .

Jednak okno o wartości 720px po załadowaniu jest przybliżone za każdym razem o ok. 50% do lewego górnego rogu, a nie wyświetlone w pełnej swojej okazałości. Nie wiem czemu ma miejsce taka sytuacja. 

Na stronie phone posiadam ten sam kod html, lecz css bez użytego @media screen, i strona wczytuje się w pełnej swojej okazałości czyli 400px . Na telefonie kiedy z menu wybieram Contact, wczytuje się div który rozciąga swoją szerokością domyślną wartość 400px w ten sposób że strona wygląda dziwnie. Identyczna sytuacja ma się z Song History (ikona zegara). 

komentarz 19 listopada 2017 przez jaca121212 Nałogowiec (40,760 p.)

Na wstępnie zapoznaj się z tym następnie poczytaj o tym oraz z tym . 

komentarz 25 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
Brawo za mądre rady. Pytanie po co mi te 3 linki? Przecież każdy może sb zobaczyć kod strony a na urządzeniach mobilnych i tak wklejane kody nie wyglądają klawo. prawidłowa budowa strony - była zaczęta od innych szablonów zatem nie wiem o co chodzi ? To że nie ma jakiejś idealnej kolejności daruj sb :p Ważne że i tak mam łatwiej bo nauczyłem się trochę divów a ongiś robiłem na tabelach gdzie kolory dawałem ręcznie dla każdej :D Mi ID przydaje się bo później w CSS szybciej mogę znaleźć dany kod , gdyż wyświetla się pod innym kolorem :p
komentarz 26 listopada 2017 przez jaca121212 Nałogowiec (40,760 p.)
Chodziło mi z pierwszym linkiem o to.

1. Jak wstawić do pytania kod źródłowy?

nie poprzez podanie linku z kodem css a szukaj sobie div-ów odpowiedzialnych za to

Drugi link - struktura (szkielet strony w HTML5) zrozumiesz  kiedyś dlaczego podałem ci ten link abyś się z nim zapoznał.

jeśli chodzi o stylizację strony to powinno się stylizować po class a nie po ID, ID to skrót od nazwy identyfikator sama nazwa ci mówi po co on jest potrzebny. Ale  w większych projektach lub zaawansowanych projektach (głównie mam na myśli o pisanie styli) zobaczysz dlaczego nie powinno się  po ID stylować.
komentarz 26 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
Wiem jak wstawić kod jednak jak wyżej mówiłem na urządzeniach mobilnych lepszy jest link.

Raczej nie zrozumiem bo nie chcę być w przyszłości informatykiem a jedynie móc zrobić prostą stronę dla siebie :P

Wiem, że nie lecz jak mówię w programie darmowym Notepad ++ ułatwia mi ID szukanie :D
komentarz 26 listopada 2017 przez jaca121212 Nałogowiec (40,760 p.)
Bodajże jak wciśniesz  ctr + F to przechodzisz w wyszukiwarkę wtedy wyszukujesz.

Stawiam że większość osób  korzysta z komputera więc podałem abyś wstawił kod w bloczku a nie podawał link.
komentarz 26 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
Już wstawiłem :P Jenak jak się szuka czegoś, co jest powyżej to nie może znaleźć. Już od dłuższego czasu mam tak w tym programie. Muszę kliknąć kursorem nad i wtedy działa...

5 odpowiedzi

0 głosów
odpowiedź 18 listopada 2017 przez bk20 Użytkownik (740 p.)
edycja 18 listopada 2017 przez xmentor

Więc tak:

W headzie umieść: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Następnie do linku do CSS dodaj jeszcze media="all"

Przejdźmy do pliku Css.

Umieszczasz gdziekolwiek (najlepiej pod danym elementem):
 

@media only screen and (max-width: 720px) {
    [nazwa twojego elementu z wpisem] {
        /* kod kiedy strona będzie miała do 720px */
        /* Według mnie mogłoby być: */
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}


PS: Sorka, że kod nie w odpowiednim formacie, ale piszę na telefonie.

komentarz 18 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
dałem mate jednak nie wiem co miałoby to dać gdyż w book i innych stronach tego nie mam a działa np. http://ilbb.cba.pl/cd/1.html

all również dałem jednak tak jak wyżej nie mam w innych a tam działa

@media only screen and (max-width: 400px) - dałem 400 bo źle napisałem że chodzi tutaj o 400 :P

[nazwa twojego elementu z wpisem] - tutaj dałem  #container { width: 100%;   }

I nic nie pomogło :(
komentarz 2 grudnia 2017 przez Tomek Sochacki Ekspert (227,510 p.)

maximum-scale=1

Wg mnie używanie max nie ma sensu. Sam już parę razy spotykałem stronki, gdzie chciałem sobie przeskalować na mobile, żeby coś lepiej odczytać, lepiej fotke obejrzeć, jakieś szczegóły itp. Nie każdy ma mobilka z ekranem prawie jak PC (czasami boję się, że chyba do tego zmierzają dzisiejsze smartfony :) i warto dać możliwość powiększenia.

komentarz 2 grudnia 2017 przez lalanablanalala Bywalec (2,090 p.)

Ok. Faktycznie. A wiesz może co mogę zrobić z zbyt dużym przybliżeniem do lewego rogu? Book

komentarz 6 grudnia 2017 przez bk20 Użytkownik (740 p.)
Emm... Może pomoże padding do body?

PS: Sorka, że czekałeś na odp. 3 dni :P
0 głosów
odpowiedź 19 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
Pomoże ktoś?
komentarz 19 listopada 2017 przez pablop76 VIP (123,060 p.)

Witam.

W twoich stylach dla #container jest ustawione

#container {
...
width: 100%;
max-width: 400px;
min-width: 400px;
...
}

w media masz

@media only screen and (max-width: 400px) {
    #container {
        width: 100%;
    }
}

To nie ma sensu. Pomyśl nad tym. :)

komentarz 25 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)
edycja 25 listopada 2017 przez lalanablanalala

Jednak jak mowilem na innych stronach również mam ustawione 100% i wszystko działa prawidłowo. Np. Book Book a tutaj mam niby to samo a jednak źle.. jeszcze spróbuję skasować 100% w media 

Ale jak w booku nie mam container w media? To co tam dodać jego id i wpisać 0%? Albo 900px? 

 

W sumie nie działa na innych prawidłowo bo nie dokonują się zmiany na 900px a 1150 czyli ino kolor tła się zmienia...

komentarz 25 listopada 2017 przez pablop76 VIP (123,060 p.)
Chodzi o max-width i min-width. masz to ustawione na sztywno 400px i tak się container zachowuje (width: 400px) a 100% z 400 to ile? :)
komentarz 26 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)

Już mi zaczyna się to wszystko mieszać. Dałem w phone samo with: 400px; bez żadnych max i min. . Jak dawałem w media to też taki sam efekt był. Teraz jest już znacznie lepiej niż było bo nie da się oddalić bardziej niż 400px, jednak po załadowaniu strony przybliża z 5% za dużo do lewego rogu :P Nie wiem jak z tego wyjść.. 

 

Jeszcze mam problem w booku . Ino tam dałem sporo tych media aby też na zwykłej przeglądarce na komputerze dokonywały mi się zmiany i na niej elegancko wszystko chodzi. Jednak kiedy otwieram na telefonie czyli okno najmniejsze niż 720PX to i tak nie dostosowuje mi się do :

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 720PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (max-width: 720px) {
#container {
width: 720px;	
max-width: 720px;
min-width: 720px;
}	

a jakby dalej brało @media screen and (min-width: 1150px) 

komentarz 26 listopada 2017 przez pablop76 VIP (123,060 p.)

Może zrezygnuj całkiem z px na kożyść %;

Najczęściej stosowane punkty przerwania. Oczywiście w tym przykładzie użyłem wszystkich (można jesczcze dołożyć ekrany retina) ale to tylko dla przykładu. Np bootstrap3 używa trzech (991,768,480)bootstrap4 czterech(1199,991,768,575)

<div class="container"></div>
.container{
  width: 60%;
  height: 500px;
  background-color: lightblue;
  margin: 0 auto;
}
@media all and (max-width: 1690px) { 
  .container{
  width: 80%;
  background-color: red;
  }
}
@media all and (max-width: 1280px) { 
  .container{
  width: 90%;
  background-color: green;
  }
}
@media all and (max-width: 980px) {
  body{
    background-color: red;
  }
  .container{
  width: 90%;
  background-color: blue;
  } 
}
@media all and (max-width: 736px) { 
  .container{
  width: 90%;
  background-color: magenta;
  }
}
@media all and (max-width: 480px) { 
  .container{
  width: 90%;
  background-color: black;
  }
}

 

komentarz 26 listopada 2017 przez lalanablanalala Bywalec (2,090 p.)

Phone działa mi już dobrze

Dałem tak jak mówiłeś:

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ 400PX ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */ 	
@media screen and (max-width: 400px) {
#container {
width: 100%;	
}		

}

oraz okazało się że w html ważne też jest ale co on robi to nie mam pojęcia :P

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

bo inaczej nie działa. Lecz w booku dalej mam to samo

0 głosów
odpowiedź 2 grudnia 2017 przez lalanablanalala Bywalec (2,090 p.)
Proszę o pomoc. Edytowałem górny post gdyż trochę się zmieniło
komentarz 6 grudnia 2017 przez bk20 Użytkownik (740 p.)
Jakbyś mógł to wstawiaj kod na bieżąco na stronę, wtedy można łatwiej zrozumieć Twój problem, a dla Ciebie nie jest to dużo pracy :)
komentarz 9 grudnia 2017 przez lalanablanalala Bywalec (2,090 p.)
zrobiłem aktualizacje. Sprawa jest najlepiej widoczna kiedy otwieramy strony tzn. podstrony  na telefonie. Od razu widać że przybliża zbędnie do lewego rogu za każdym razem kiedy wchodzimy na jakąś podstronę
0 głosów
odpowiedź 25 grudnia 2017 przez lalanablanalala Bywalec (2,090 p.)

Odświeżam. Dalej nie potrafię wyjść z problemu. Dodatkowo sytuacja wali się gdy w phone otwieram z menu -> Contact lub klikam na Song history wtedy oba divy rozszerzają stronę(widać ten efekt na telefonie nie na PC)

0 głosów
odpowiedź 7 sierpnia 2018 przez lalanablanalala Bywalec (2,090 p.)
ODŚWIEŻAM proszę o pomoc...
2
komentarz 7 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
Kolego... dostałeś parę porad, ale z tego co czytam to parę osób bardziej chciałeś zakrzyczeć niż coś się nauczyć...

Przez ten czas co widzę, że post powstał już dawno powinieneś śmigać w kwestii RWD więc chyba po prostu nie chcesz się nauczyć, skoro od grudnia siedzisz i nic nie robisz :) Poczytaj sobie wcześniejsze wypowiedzi i spróbuj z nich coś wyciągnąć i poczytaj choćby parę artykułów o RWD...
komentarz 5 listopada 2018 przez lalanablanalala Bywalec (2,090 p.)
edycja 5 listopada 2018 przez lalanablanalala

Odpowiedzi, które nie pomogły. Nie chcę się nauczyć RWD gdyż nie jestem webem a potrzebuje ino prostych podstaw :P Stąd moja prośba bo wydaje mi się że osoby które się na tym znają powinny wiedzieć co jest nie tak w tym kodzie, że źle otwiera strony na urządzeniu mobilnym....

ROZWIĄZAŁEM PROBLEM laugh

okazało się  że wystarczyło skasować z kodu html initial-scale=1 laugh Przeto udało się z samych podstaw cheeky

Podobne pytania

0 głosów
1 odpowiedź 464 wizyt
0 głosów
0 odpowiedzi 208 wizyt
pytanie zadane 28 lutego 2018 w HTML i CSS przez Paweł Sypek Początkujący (440 p.)
0 głosów
0 odpowiedzi 228 wizyt

92,452 zapytań

141,262 odpowiedzi

319,080 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!

...