Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Centrowanie elementu w div
david8213
post
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

Nie mogę wycentrować obrazka

[HTML] pobierz, plaintext 
  1. .kontener_blog {
  2.   background-color: white;
  3. //  min-width: 1000px;
  4.   width: 100%;
  5.   font-family: Arial;
  6.   z-index: 1;
  7.   left:0 ;
  8.   margin:0 auto;
  9.   margin-top: 5em;"
  10. }
  11.  
  12.  
  13. <div class="kontener_blog">
  14.  
  15. <center> <table width=90% bgcolor=green></tr><td>
  16.  
  17.  
  18.  
  19.  <table width=60% bgcolor=yellow style="float:left; min-width: 300px;"></tr><td><center> 
  20. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  21. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  22.  <br><br> 
  23.  
  24. </td></tr><table>
  25.  
  26.  
  27. <div width="40%" style="float:left; background-color: blue; ">
  28.  
  29. <img width="300" src="http://www.tapetynapulpitkomputera.pl/uploads/58c283736b72e_3840x2160.jpg" border="0" style="margin:0 auto; display:block;">
  30.  
  31. </div>
  32.  
  33. <br>  </td></tr><table>
  34.  
  35. </div>
  36.  
  37.  
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
kapslokk
post
Post #2





Grupa: Zarejestrowani
Postów: 965
Pomógł: 285
Dołączył: 19.06.2015
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Zacznij od poprawienia htmla.


[HTML] pobierz, plaintext 
  1. <table width=90% bgcolor=green></tr><td>
[HTML] pobierz, plaintext

otwierasz <table> i zamykasz <tr> ? Popraw to tak, zeby html byl poprawny, jesli nadal nie bedzie dzialalo to wrzuc poprawiony kod jeszcze raz.
Go to the top of the page
+Quote Post
david8213
post
Post #3





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

nie działa

chciałem zrobic dwa divy obok siebie.po lewej wycentrowany tekst a po prawej wycentrowany obrazek.

Przy zmniejszaniu okna przeglądarki prawy div ma przeskoczyć na dół pod tekst
Go to the top of the page
+Quote Post
viking
post
Post #4





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Poczytaj o grid i flex a nie jakieś archaizmy.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
david8213
post
Post #5





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

Dlaczego nie przesuwa mi itemów w dół jak zmniejszam rozmiar okna przeglądarki

[XML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.  
  6.  
  7. .flex-container {
  8.   background-color: gray;
  9.   padding: 10px;
  10.   display: flex;
  11.  justify-content: center;
  12.  
  13.  align-content: center;
  14.   height: 200px;
  15.   flex-wrap: wrap; 
  16.  
  17. }
  18. .flex-item1 {
  19.   background-color: red;
  20.   border: 1px black solid;
  21.   width: 20%; 
  22. }
  23.  
  24. .flex-item2 {
  25.   background-color: red;
  26.   border: 1px black solid;
  27.   width: 20%; 
  28.  
  29. }   
  30.  
  31. .flex-item3 {
  32.   background-color: red;
  33.   border: 1px black solid;
  34.   width: 20%; 
  35.  
  36. } 
  37.     </style>
  38.   </head>
  39.   <body>
  40.  
  41.  
  42.  
  43. <div class="flex-container">
  44.   <div class="flex-item1">fffffff<br>ggggggggggggg</div>
  45.   <div class="flex-item2"></div>
  46.   <div class="flex-item3"></div>
  47. </div>
  48.  
  49.  
  50.  
  51.   </body>
  52. </html>
[XML] pobierz, plaintext


Ten post edytował david8213 20.03.2020, 13:33:18
Go to the top of the page
+Quote Post
viking
post
Post #6





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

A gdzie to niby masz w kodzie?

Kod
.flex-container {
  flex-direction: column;
}
@media (min-width: 400px) {
  .flex-container {
    flex-direction: row;
  }
}


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
david8213
post
Post #7





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

Jak podaje szerokość w procentach to nie działa a jak wpisze wartość stała to działa .tyle że ja chcę aby było w procentach
Go to the top of the page
+Quote Post
viking
post
Post #8





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

flex-basis: 20%; jak już.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
david8213
post
Post #9





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

Zrobiłem jak poniżej i wszystko ładnie działa tylko ... jakich parametrów użyć żeby w telefonie wyświetlało mi zdjęcie pod tekstem?

[XML] pobierz, plaintext 
  1.  
  2. <html>
  3.  
  4. <head>
  5.  
  6. <style>
  7. .flex-container {
  8.  width: 80%;
  9.  background-color: gray;
  10.  padding: 10px;
  11.  display: flex;
  12.  justify-content: center;
  13.  align-content: center;
  14.  margin-left: auto;
  15.  margin-right: auto;
  16.  
  17. //flex-basis: auto;
  18. //flex-wrap: wrap; 
  19. }
  20.  
  21.  
  22. .flex-item1 {
  23.  
  24.  
  25.  background-color: red;
  26.  
  27.  
  28.  border: 1px black solid;
  29.  
  30. flex-basis: 80%;  
  31.  
  32. //flex-grow: 1;
  33.  
  34. text-align: center;
  35. }
  36.  
  37.  
  38. .flex-container {
  39.   flex-direction: column;
  40. }
  41. @media (min-width: 800px) {
  42.   .flex-container {
  43.     flex-direction: row;
  44.   }
  45. }
  46.  
  47. </style>
  48.  
  49. </head>
  50.  
  51. <body>
  52.  
  53.  
  54. <br>
  55.  
  56. <div class="flex-container">
  57.  
  58.  
  59. <div class="flex-item1" style="min-width: 200px">
  60. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  61. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  62. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  63. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  64. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  65. tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst 
  66.   </div>
  67.  
  68.   <div class="flex-item1" style=" flex-basis:auto; min-width: 200px">
  69.  
  70. <img width="80%" src="https://cdn.pixabay.com/photo/2017/01/06/19/12/soap-bubble-1958648_960_720.jpg" border="0" style="margin:0 auto; display:block; padding: 5px 5px 5px 5px;">
  71.  
  72.   </div>
  73.  
  74. </div>
  75.  
  76.  
  77. <!----contener end-----> 
  78.  
  79. </body>
  80.  
  81. </html>
  82.  
[XML] pobierz, plaintext


Dostawiłem jak poniżej i działa ale na moim telefonie..
Czy bedzie działać na innych... ?

[XML] pobierz, plaintext 
  1. @media (min-height: 1079px) {
  2.   .flex-container {
  3.     flex-wrap: wrap; 
  4.   }
  5. }
[XML] pobierz, plaintext


a drugie pytanie
Jest coś takiego w CSS żeby np uzyć 

[XML] pobierz, plaintext 
  1. flex-basis: auto -5%;
[XML] pobierz, plaintext


Ten post edytował david8213 21.03.2020, 09:45:26
Go to the top of the page
+Quote Post
viking
post
Post #10





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Typowe wymiary dla uderzeń: 640 768 1024 1280 i 1600px.

flex-basis: auto -5%; a co to ma robić?


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
david8213
post
Post #11





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----

na monitorze wyświetlany jest obrazek z ramką ale dolną cześć zasłania go kocówka przeglądarki przez pasek zadań
Go to the top of the page
+Quote Post
viking
post
Post #12





Grupa: Zarejestrowani
Postów: 6 380
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Szczerze mówiąc nie rozumiem co do mnie piszesz. Albo pokaż kod, albo się określ co chcesz osiągnąć.


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 02:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn