Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Okienka galerii
Terrorizer
post 9.09.2014, 14:59:41
Post #1





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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


Staram się stworzyć galerię zdjęć.
Każde zdjęcie powinno znajdować się w środku odpowiedniego kafelka, a same kafelki poukładane jeden obok drugiego, powiedzmy ,że po 3 w rzędzie.
Walczę z tym już jakąś dłuższą chwilę, ale ani zdjęcia nie chcą mi się równo ustawić w kafelkach, ani kafelki jeden obok drugiego.
Poprosiłbym o pomoc.
Tak wyświetlam obrazki:
  1. <div id="photobox">
  2. <?php
  3. $allphotos = mysql_query("SELECT * FROM photos WHERE user='".$nick['nick']."'");
  4. while ($numphotos = mysql_fetch_assoc($allphotos)){
  5. echo '<div class="thisphotobox"><img src="'.$numphotos['link'].'" alt="photo" class="photolink"></div>';
  6. }
  7. ?>
  8. </div>

CSS:
  1. #photobox{
  2. background-color:blue;
  3. width:560px;
  4. margin-left:auto;
  5. margin-right:auto;
  6. box-shadow: 2px 2px 2px 2px grey;
  7. }
  8.  
  9. .thisphotobox{
  10. background-color:green;
  11. padding:10px;
  12. margin:10px;
  13. width:120px;
  14. height:120px;
  15. }
  16. .photolink{
  17. background-color:yellow;
  18. margin:auto;
  19. max-height:90px;
  20. max-width:90px;
  21. padding:auto;
  22. }

A poniżej link jak to obecnie wygląda. Kolory nałożyłem celowo ,żeby było widać obszar poszczególnych divów:


Ten post edytował Terrorizer 9.09.2014, 15:04:14
Go to the top of the page
+Quote Post
trueblue
post 9.09.2014, 15:04:24
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


margin-left:auto i margin-right:auto, nie pomogą, bo img domyślnie ma layout inline.
.thisphotobox{
text-align:center;
float:left; //obok siebie
}
Możesz również oprzeć całość o układ tabeli (nie znaczniki, ale css).

Jeśli chcesz wyśrodkować w pionie, poszukaj o "vertical centering".


--------------------
Go to the top of the page
+Quote Post
Terrorizer
post 9.09.2014, 15:08:55
Post #3





Grupa: Zarejestrowani
Postów: 345
Pomógł: 3
Dołączył: 31.03.2012

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


Genialnie! dziękuję

P.S. Co się stało z polem o niebieskim tle? Zostały po nim tylko cienie na górnej ścianie
Go to the top of the page
+Quote Post
toffiak
post 9.09.2014, 17:14:03
Post #4





Grupa: Zarejestrowani
Postów: 395
Pomógł: 80
Dołączył: 24.08.2009

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


Poszukaj pod frazą "clearfix"


--------------------
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 19.04.2024 - 17:10