Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Menu na stronie
Forum PHP.pl > Forum > Przedszkole
david8213
10.02.2021, 06:38:06
Menu na stronie w zależności od rozdzielczosci

Dlaczego drugie menu nie pojawia się na samej górze tylko linijkę niżej ?

[PHP] pobierz, plaintext 
  1. .menu {
  2.   top:0;
  3.   width: 100%;
  4.   min-width:990px;
  5.   position: fixed;
  6.   z-index: 2;
  7.  
  8. border-top:1px solid #bbb;
  9.   border-bottom:1px solid #bbb;
  10.  
  11. }
  12.  
  13. .menu1 {
  14.   top:0;
  15.   width: 100%;
  16.   min-width:600px;
  17.  position: fixed;
  18.   z-index: 1;
  19.  
  20.   border-top:1px solid #bbb;
  21.   border-bottom:1px solid #bbb;
  22. }
  23.  
  24.  
  25. ul {
  26.   list-style-type: none;
  27.   margin: 0;
  28.   padding: 0;
  29.   overflow: hidden;
  30.   background-color: white;
  31. }
  32.  
  33.  
  34. li {
  35.   float: right;
  36.   height: 55px; 
  37.   border-right:1px solid #bbb;
  38. }
  39.  
  40.  
  41. li:last-child {
  42. // border-right: none;
  43. // border-left: none;
  44. }
  45.  
  46. li a {
  47.   display: block;
  48.   color: grey;
  49.  
  50.   text-align: center;
  51.   text-decoration: none;
  52.   font-family: 'Aladin', sans-serif;
  53.   padding: 10px 20px;
  54.   font-size: 30px;
  55. }
  56.  
  57. li a:hover:not(.active) {
  58.   background-color: #91B021;
  59.   transition: 0.6s;
  60.   color: white;
  61.   height:100%;
  62. }
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.  
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 	<link rel="stylesheet" href="style.css">
  8. 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
  9.  
  10.  
  11. <style>
  12. 	@media (max-width: 800px) { .menu { display:none; }      
  13. 	@media (min-width: 800px) { .menu1 { display:none; } 
  14. </style>
  15.  
  16. </head>
  17.  
  18.  
  19. <body>
  20.  
  21. <div class="menu">
  22. <ul>
  23.   <li><a onclick="openNav()" >? </a></li>
  24.   <li><a href="kontakt.php">Kontakt</a></li>
  25.   <li><a href="blog.php">Blog</a></li>
  26.   <li><a href="oferta.php">Oferta</a></li>
  27.   <li><a href="index.php">Portfolio</a></li>
  28. </ul>
  29. </div>
  30.  
  31. <div class="menu1">
  32. <ul>
  33.   <li><a href="index.php">111</a></li>
  34.   <li><a href="index.php">222</a></li>
  35.   <li><a href="index.php">333</a></li>
  36.   <li style="float: left;"> <a onclick="openNav()" >? </a></li>
  37. </ul>
  38. </div>
  39.  
  40. treść strony
  41.  
  42.  
  43. </body>
  44.  
  45. </html>
  46.  
[PHP] pobierz, plaintext
gino
10.02.2021, 07:01:26
Odpowiedź masz np. tutaj
Poza tym na każde menu masz nałożone width=100%, więc sam rozumiesz, że zajmują 100% dostępności ekranu w poziomie.
A już poza tym, to z ciekawości zapytam po co dwa menu obok siebie?
david8213
10.02.2021, 07:15:48
nie ma być dwóch obok siebie.
na komputerze ma być widoczne jedno a na telefonie drugie

W tym linku co mi podałeś nie ma odpowiedzi

mają być 100% w poziomie tyle że widoczne jedno i drugie ma być w zalezności od tego czy strona wyswietlana jest na telefonie czy komputerze

Parametry te same a jedno wyświetla mi sie niżej a nie na tej samej wysokości. dlaczego ?

[PHP] pobierz, plaintext 
  1. .menu {
  2.   top:0;
  3.   width: 100%;
  4.   min-width:990px;
  5. //  position: fixed;
  6.   z-index: 2;
  7.  
  8. border-top:1px solid #bbb;
  9.   border-bottom:1px solid #bbb;
  10.  
  11. }
  12.  
  13. .menu1 {
  14.   top:0;
  15.   width: 100%;
  16.   min-width:600px;
  17. //  position: fixed;
  18.   z-index: 1;
  19.  
  20.   border-top:1px solid #bbb;
  21.   border-bottom:1px solid #bbb;
  22. }
[PHP] pobierz, plaintext


Dodam ze na komputerze działa to normalnie a jak wrzucę na serwer i otwieram z serwera juz jest inaczej
gino
10.02.2021, 07:50:10
To sie nie zrozumieliśmy. Wrzuciłem to na swój serwer i działa tak jak lokalnie:
testo
trueblue
10.02.2021, 07:52:37
1. W obydwu media brak nawiasu zamykającego (możesz je przenieść do CSS).
2. Do komentarzy w CSS używa się /* */.
3. Przy szerokości viewportu=800px znikną obydwa menu.
4. Podałeś dwa kody CSS - jeden z position:fixed dla menu, drugi bez.
david8213
10.02.2021, 07:55:36
Cytat(trueblue @ 10.02.2021, 07:52:37 ) *
1. W obydwu media brak nawiasu zamykającego (możesz je przenieść do CSS).
2. Do komentarzy w CSS używa się /* */.
3. Przy szerokości viewportu=800px znikną obydwa menu.
4. Podałeś dwa kody CSS - jeden z position:fixed dla menu, drugi bez.



Wszystko działa jak należy . Przyczyną było to że css był w pliku style.css a nie bezpośrednio w pliku index.php


Choć dziwne że nie można tego wszystkiego wrzucić do pliku style.css


jak dodałem dwa nawiasy to nie działa . Działa z jednym jak było wcxeśniej

[PHP] pobierz, plaintext 
  1. 	@media (max-width: 800px) {{ .menu { display:none;  }}   
  2. 	@media (min-width: 820px) {{ .menu1 { display:none; } } 
[PHP] pobierz, plaintext
gino
10.02.2021, 08:03:51
To teraz policz ile masz nawiasów otwierających i zamykających.

edit: nie ma znaczenie, że css jest w osobnym pliku.
trueblue
10.02.2021, 08:33:20
Teraz między 800px a 820px, obydwa będą widoczne.
Wystarczy różnica 1px.
david8213
10.02.2021, 08:39:19
Cytat(gino @ 10.02.2021, 08:03:51 ) *
edit: nie ma znaczenie, że css jest w osobnym pliku.


u mnie ma znaczenie. bo jak wrzucę wszystko do pliku to mi nie działa tak jak jest w index.php

co do nawiasów. przeoczyłem. masz rację smile.gif

[PHP] pobierz, plaintext 
  1. <style>
  2. @media (max-width: 800px) { .menu  { display:none; }}      
  3. @media (min-width: 820px) { .menu1 { display:none; }}
  4. </style>
[PHP] pobierz, plaintext


To jak to zrobic żeby menu wyświetlało mi się zawsze poprawnie w zalezności od rozdzielczosci TELEFON/PC
gino
10.02.2021, 08:54:41
Dosyć dobrze mechanizm responsywności oparty o @media jest opisany w tym tutorialu:
tutorial
Albo bootstrap.
david8213
10.02.2021, 10:19:04
jeśli chodzi o plik style.css. Po przeniesieniu styli z pliku index.php do pliku style.css ukrywanie menu i niektóre style nie działają
Co moze byc przyczyną?
trueblue
10.02.2021, 11:21:10
Przyczyną może być kolejność selektorów.
Pokaż CSS po modyfikacjach.
david8213
10.02.2021, 13:06:33 
[PHP] pobierz, plaintext 
  1. <style>
  2. /* -------MENU------- */
  3.  
  4.  
  5. .menu {
  6.   top:0;
  7.   width: 100%;
  8.   min-width:800px;
  9.   position: fixed;
  10.   z-index: 1;
  11.  
  12. border-top:1px solid #bbb;
  13.   border-bottom:1px solid #bbb;
  14.  
  15. }
  16.  
  17. .menu1 {
  18.   top:0;
  19.   width: 100%;
  20.   min-width:250px;
  21.   position: fixed;
  22.   z-index: 1;
  23.  
  24.   border-top:1px solid #bbb;
  25.   border-bottom:1px solid #bbb;
  26. }
  27.  
  28.  
  29. ul {
  30.   list-style-type: none;
  31.   margin: 0;
  32.   padding: 0;
  33.   overflow: hidden;
  34.   background-color: white;
  35. }
  36.  
  37.  
  38. li {
  39.   float: right;
  40.   height: 47px; 
  41.   border-right:1px solid #bbb;
  42. }
  43.  
  44. /*
  45. li:last-child {
  46.  border-right: none;
  47.  border-left: none;
  48. }
  49. */
  50.  
  51. li a {
  52.   display: block;
  53.   color: grey;
  54.  
  55.   text-align: center;
  56.   text-decoration: none;
  57.   font-family: 'Aladin', sans-serif;
  58.   padding: 10px 20px;
  59.   font-size: 22px;
  60. }
  61.  
  62. li a:hover:not(.active) {
  63.   background-color: #91B021;
  64.   transition: 0.6s;
  65.   color: white;
  66.   height:100%;
  67. }
  68.  
  69. 		.img_foto1 {  height:auto; width: 90%; max-width:1024px; } 
  70.      		.img_foto2 {  height:90%; width: auto; } 
  71.  
  72. /*
  73. 	@media (max-width: 800px) { .menu  { display:none; } }      
  74. 	@media (min-width: 820px) { .menu1 { display:none; } }
  75. 	@media (max-width: 800px) and (min-width: 500px) { { }
  76. */
  77.  
  78. 	@media (min-width: 800px) { 
  79. 		.menu1 { display:none;} 
  80. 		.menu  { display:block;} 
  81. 				  }
  82.  
  83. 	@media (max-width: 600px) { 
  84. 		.flex-container { flex-direction: column; } 
  85.  
  86. 		                  }
  87.  
  88.  
  89. 	@media (min-width: 900px) { 
  90. 		 .ukryj	{ display:none; }
  91. 				  }
  92.  
  93.  
  94. </style>
[PHP] pobierz, plaintext
trueblue
10.02.2021, 14:31:57
Działa poprawnie: https://jsfiddle.net/bcr3mLdh/

Dla .menu powinna być domyślnie nadana właściwość display:none, bo cały czas jest wyświetlane, ale pod .menu1.
david8213
11.02.2021, 06:06:46
no to u mnie w pliku css nie działa. Nie wyświetlane są czcionki oraz nie działa @media
Może to kwestia serwera PRV. Bo jak uruchamiam to z dysku na PC to działa
viking
11.02.2021, 07:03:37
A wczytują się? Wielkość liter na linuksie w nazwie ma znaczenie.
david8213
11.02.2021, 08:44:47
Wiem. wielkość liter jest OK. 

[PHP] pobierz, plaintext 
  1. <link rel="stylesheet" href="style.css">
[PHP] pobierz, plaintext


dałem pokaż źródło.
nie wczytuje mi pliku style.css
gino
11.02.2021, 08:53:41
Zrób to jeszcze zgodnie ze sztuką:
Kod
<link href="style.css" rel="stylesheet" type="text/css">
david8213
12.02.2021, 16:42:38
Cytat(gino @ 11.02.2021, 08:53:41 ) *
Zrób to jeszcze zgodnie ze sztuką:
Kod
<link href="style.css" rel="stylesheet" type="text/css">


tak też próbowałem nie wczytuje wszystkich styli


Jak uruchamiam plik z dysku to jest wszystko ok.
Jak uruchamiam z ftp to nie wczytuje mi wszystkich styli z pliku css

Wrzuciłem na serwer płatny i jest ok
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.