Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Wyśrodkowanie zdjęcia w pionie nie działa
Forum PHP.pl > Forum > Przedszkole
david8213
11.02.2021, 08:46:11 
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"> 
  5.  
  6. <style>
  7. .mod {  /* czarne tło pod zdjęciem */
  8.   z-index:10;
  9. //display:none;
  10. //padding-top:53px;
  11. //padding-bottom:53px;
  12.   position:fixed;
  13.   left:0;top:0;
  14.   width:100%;
  15.   height:100%;
  16.   background-color:rgb(0,0,0);
  17.   background-color:rgba(0,0,0,0.8);
  18. }
  19.  
  20. .container { /* kontener - zdjęcie z krzyżykiem */
  21.  position:relative;
  22.  width:65%;
  23.  cursor:pointer;
  24.  text-align: center;
  25.  vertical-align: middle;
  26.  justify-content: center;
  27.  align-content: center;
  28.  margin-left: auto;
  29.  margin-right: auto;
  30.  margin-top: +0.3em;
  31.  text-align: center; 
  32.  margin: 0 auto;
  33.  
  34. }
  35.  
  36.  
  37. .krzyzyk { /* położenie i rozmiar krzyżyka */
  38.     position: absolute;
  39.     top: 8px;
  40.     right: 16px;
  41.     width:20px;
  42.     opacity: 0.3;
  43.     background-color: inherit;
  44. }
  45.  
  46.  
  47. img {  width: 100%;
  48.   border-radius: 0px;
  49.   background-color: white;
  50.   padding: 2px 2px 2px 2px;   /* grubość obramowania zdjęcia */
  51. }
  52.  
  53. </style>
  54. </head>
  55. <body>
  56.  
  57. <div class="mod">
  58. <div class="container">
  59.   <img src="03.jpg">
  60.   <div><img class="krzyzyk" src="close9.png"></div>
  61. </div>
  62. </div>
  63.  
  64.  
  65. </body>
  66. </html>
  67.  
  68.  
[PHP] pobierz, plaintext
trueblue
11.02.2021, 09:52:17
1. Komentarze w CSS oznacza się poprzez /* */
2. Wyrzuć z .container align-content oraz justify-content
3. Do .mod dodaj display flex, align-items i justify-content na center oraz height 100%.
david8213
11.02.2021, 10:04:01
Niestety dalej nie ma centrowania w pionie

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"> 
  5.  
  6. <style>
  7. .mod {  /* czarne tło pod zdjęciem */
  8.   z-index:10;
  9. /*display:none;
  10. padding-top:53px;
  11. padding-bottom:53px; */
  12.   position:fixed;
  13.   left:0;top:0;
  14.   width:100%;
  15.   height:100%;
  16.   background-color:rgb(0,0,0);
  17.   background-color:rgba(0,0,0,0.8);
  18.   justify-content: center;
  19.   align-items: center;
  20.   display flex;
  21. }
  22.  
  23. .container { /* kontener - zdjęcie z krzyżykiem */
  24.  position:relative;
  25.  width:65%;
  26.  cursor:pointer;
  27.  text-align: center;
  28.  vertical-align: middle;
  29.  margin-left: auto;
  30.  margin-right: auto;
  31.  
  32.  margin-top: +0.3em;
  33.  text-align: center; 
  34.  
  35. }
  36.  
  37.  
  38. .krzyzyk { /* położenie i rozmiar krzyżyka */
  39.     position: absolute;
  40.     top: 8px;
  41.     right: 16px;
  42.     width:20px;
  43.     opacity: 0.3;
  44.     background-color: inherit;
  45. }
  46.  
  47.  
  48. img {  width: 100%;
  49.   border-radius: 0px;
  50.   background-color: white;
  51.   padding: 2px 2px 2px 2px;   /* grubość obramowania zdjęcia */
  52. }
  53.  
  54.  
  55. </style>
  56. </head>
  57. <body>
  58.  
  59. <div class="mod">
  60. <div class="container">
  61.   <img src="03.jpg">
  62.   <div><img class="krzyzyk" src="close9.png"></div>
  63. </div>
  64. </div>
  65.  
  66.  
  67. </body>
  68. </html>
  69.  
  70.  
[PHP] pobierz, plaintext
trueblue
11.02.2021, 10:21:28
Tak jest niepoprawnie:
display flex;
david8213
11.02.2021, 11:59:04
OK. Dostawiłem link na fotce i zdjęcie powiększone widoczne jest przed kliknięciem
Gdzie nalezy wstawić ukrywanie zeby dopiero po klkneciu na miniaturkę otworzyło sie duże zdęcie ?
A druga rzecz po kliknięciu fotka jest znowu na górze a nie na środku w pionie ... dlaczego questionmark.gif? 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.         <meta http-equiv="content-type" content="text/html; charset=utf-8">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <style>
  12.  
  13. .mod {  /* czarne tło pod zdjęciem  - główny kontener */
  14.   z-index:1;
  15.   display:none;
  16.   position:fixed;
  17.   left:0;
  18.   top:0;
  19.   width:100%;
  20.   height:100%;
  21.   background-color:rgb(0,0,0);
  22.   background-color:rgba(0,0,0,0.8);
  23.   justify-content: center;
  24.   align-items: center;
  25.   display: flex;
  26. }
  27.  
  28. .container { /* kontener - zdjęcie z krzyżykiem */
  29.  position:relative;
  30.  width:85%;
  31.  cursor:pointer;
  32.  text-align: center;
  33.  vertical-align: middle;
  34.  margin-left: auto;
  35.  margin-right: auto;
  36.  /*margin-top: +0.0em;
  37.  margin-bottom: +0.0em;*/
  38.  text-align: center; 
  39.  
  40. }
  41.  
  42. .krzyzyk { /* położenie i rozmiar krzyżyka */
  43.     position: absolute;
  44.     top: 8px;
  45.     right: 8px;
  46.     width:15px;
  47.     opacity: 0.3;
  48.     background-color: inherit;
  49. }
  50.  
  51. .img_ramka {  width: 100%;
  52.   border-radius: 0px;
  53.   background-color: white;
  54.   padding: 2px 2px 2px 2px;   /* grubość obramowania zdjęcia */
  55.  }
  56.  
  57. .paczka {
  58.  width: 80%; 
  59.  min-width:402px; 
  60.  max-width:1000px;
  61.  margin-left: auto;
  62.  margin-right: auto;
  63.  
  64.  
  65. } 
  66.  
  67. .button {
  68.   border:none;
  69.   display:inline-block;
  70.   padding:0px 0px;
  71.   text-decoration:none;   
  72.   background-color:inherit;  
  73.   width:100%;
  74.   cursor:pointer;
  75. }
  76.  
  77. </style>
  78. </head>
  79. <body>
  80.  
  81.   <button onclick="document.getElementById('id03').style.display='block'" class="button">
  82.     <img width="300" src="galeria/03.jpg" border="0" style="margin:0 auto; ">
  83.   </button>
  84.  
  85.  
  86. <div id="id03" class="mod">
  87.  <div class="paczka">
  88.   <div class="container">
  89.   <a onclick="document.getElementById('id03').style.display='none'"> <img src="03.jpg" class="img_ramka"></a>
  90.   <div><img class="krzyzyk" src="close.png"></div>
  91.   </div> 
  92.  </div>
  93. </div>
  94.  
  95. </body>
  96.  
  97. </html>
[PHP] pobierz, plaintext
trueblue
11.02.2021, 12:05:00
Skoro ma się nie wyświetlać, to może warto nadać display:none dla .mod, czyż nie?
A kiedy ma się wyświetlać, to chyba raczej nie display:block, prawda?
david8213
11.02.2021, 12:11:15
display:none jest w .mod
trueblue
11.02.2021, 12:24:35
W .mod jest display:flex, przejrzyj wszystkie właściwości.
david8213
11.02.2021, 12:26:19
no dobra . Dołożyłem w tym miejscu i juz się na starcie nie pojawia

[PHP] pobierz, plaintext 
  1. <div id="id03" class="mod" style=" display:none;">
  2.  <div class="paczka">
  3.   <div class="container">
  4.   <a onclick="document.getElementById('id03').style.display='none'"> <img src="03.jpg" class="img_ramka">
  5.   <div><img class="krzyzyk" src="close.png"></a></div>
  6.   </div> 
  7.  </div>
  8. </div>
[PHP] pobierz, plaintext



Teraz druga sprawa. Dlaczego nie wyswietla mi się znowu na środku w pionie ?
trueblue
11.02.2021, 12:44:39
W selektorze .mod ustawiłeś:
display:none
a potem
display:flex
więc druga właściwość nadpisała pierwszą.

Robisz coraz większy bałagan. Najwygodniej by było dodawać i usuwać klasę z elementu, a nie sterować bezpośrednio stylami.

Dlaczego nie środkuje się? Pisałem o tym 2 posty wcześniej.
david8213
11.02.2021, 13:12:59
Jak byś to zrobił bo ąż tak to ja w tym nie siedzę żeby to zrobić

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.         <meta http-equiv="content-type" content="text/html; charset=utf-8">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <style>
  12.  
  13.  
  14.  
  15.  
  16. .mod {  /* czarne tło pod zdjęciem  - główny kontener */
  17.   display:none;
  18.   z-index:1;
  19.   position:fixed;
  20.   left:0;
  21.   top:0;
  22.   width:100%;
  23.   height:100%;
  24.   background-color:rgb(0,0,0);
  25.   background-color:rgba(0,0,0,0.8);
  26.   justify-content: center;
  27.   align-items: center;
  28.  
  29.  
  30.  
  31.  
  32. }
  33.  
  34. .container { /* kontener - zdjęcie z krzyżykiem */
  35.  position:relative;
  36.  width:85%;
  37.  cursor:pointer;
  38.  text-align: center;
  39.  vertical-align: middle;
  40.  margin-left: auto;
  41.  margin-right: auto;
  42.  
  43.  /*margin-top: +0.0em;
  44.  margin-bottom: +0.0em;*/
  45.  text-align: center; 
  46.  display: flex;
  47. }
  48.  
  49.  
  50. .krzyzyk { /* położenie i rozmiar krzyżyka */
  51.     position: absolute;
  52.     top: 8px;
  53.     right: 8px;
  54.     width:15px;
  55.     opacity: 0.3;
  56.     background-color: inherit;
  57. }
  58.  
  59.  
  60. .img_ramka {  
  61.   width: 100%;
  62.   border-radius: 0px;
  63.   background-color: white;
  64.   padding: 2px 2px 2px 2px;   /* grubość obramowania zdjęcia */
  65.  
  66. }
  67.  
  68. .paczka {
  69.  
  70.  min-width:402px; 
  71.  max-width:1000px;
  72.  width: 100%;
  73.  margin-left: auto;
  74.  margin-right: auto;
  75.  background-color: white;
  76.  
  77. } 
  78.  
  79. .button {  /* wygląd miniaturki zdjecia */
  80.   border:none;
  81.   display:inline-block;
  82.   padding:0px 0px;
  83.   text-decoration:none;   
  84.   background-color:inherit;  
  85.   width:100%;
  86.   cursor:pointer;
  87. }
  88.  
  89.  
  90. </style>
  91.  
  92. </head>
  93. <body>
  94.  
  95.   <button onclick="document.getElementById('id03').style.display='block'" class="button">
  96.     <img width="300" src="galeria/03.jpg" border="0">
  97.   </button>
  98.  
  99.  
  100. <div id="id03" class="mod">
  101.  <div class="paczka">
  102.   <div class="container">
  103.   <a onclick="document.getElementById('id03').style.display='none'"> <img src="03.jpg" class="img_ramka">
  104.   <div><img class="krzyzyk" src="close.png"></a></div>
  105.   </div> 
  106.  </div>
  107. </div>
  108.  
  109. </body>
  110.  
  111. </html>
[PHP] pobierz, plaintext
trueblue
11.02.2021, 13:25:55
Zmieniłbym:
document.getElementById('id03').style.display='block'
na:
document.getElementById('id03').style.display='flex'
bo taka wartość dla display powinna być, aby zawartość była środkowana.
david8213
12.02.2021, 14:19:10
a jakbym chciał dodać 100 zdjęć to muszę dla każdego zrobić osobno kod czy da rade to w miarę jakos uproscić ?

[PHP] pobierz, plaintext 
  1. ...
  2.   <button onclick="document.getElementById('id01').style.display='flex'" class="button">
  3.     <img width="300" src="galeria/01.jpg" border="0">
  4.   </button>
  5.  
  6. <div id="id01" class="mod">
  7.   <div class="container">
  8.      <a onclick="document.getElementById('id01').style.display='none'"> <img src="01.jpg" class="img_ramka">
  9.      <div><img class="krzyzyk" src="close.png"></a></div>
  10.   </div> 
  11. </div>
  12.  
  13.  
  14.  
  15.   <button onclick="document.getElementById('id02').style.display='flex'" class="button">
  16.     <img width="300" src="galeria/02.jpg" border="0">
  17.   </button>
  18.  
  19. <div id="id02" class="mod">
  20.   <div class="container">
  21.      <a onclick="document.getElementById('id02').style.display='none'"> <img src="02.jpg" class="img_ramka">
  22.      <div><img class="krzyzyk" src="close.png"></a></div>
  23.   </div> 
  24. </div>
  25.  
  26.  
  27.  
  28.   <button onclick="document.getElementById('id03').style.display='flex'" class="button">
  29.     <img width="300" src="galeria/03.jpg" border="0">
  30.   </button>
  31.  
  32. <div id="id03" class="mod">
  33.   <div class="container">
  34.      <a onclick="document.getElementById('id03').style.display='none'"> <img src="03.jpg" class="img_ramka">
  35.      <div><img class="krzyzyk" src="close.png"></a></div>
  36.   </div> 
  37. </div>
  38.  
  39. ...itd
[PHP] pobierz, plaintext
trueblue
12.02.2021, 14:50:40
Da radę uprościć.
1. Przede wszystkim najlepiej przełączać widoczność sterując klasą elementu - kiedy element posiada daną klasę, jest widoczny, kiedy nie, nie jest.
2. Do obsługi zdarzenia click należy podpiąć listener - addEventListener (w nim dodawać/odejmować klasę).

Można to zrobić również bez użycia JS - zapoznaj się z pseudoselektorem :target.
david8213
12.02.2021, 15:24:28
Dzięki za info ale chyba zostanę przy tym. To co piszesz to juz nie dla mnie biggrin.gif
poczytam o tym :target .To może bardziej obczaję
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.