Forum PHP.pl

Witam. Mam problem. Otóż w panelu administratora dodałem możliwość dodawania zdjęć do galerii (lightbox). Po dodaniu można je obejrzeć na podstronie "galeria.php". Stworzyłem zapytanie pobierające dane z bazy i "ubierające" je w linki. Ogólnie chodzi o to, że mam div główny strony (na 900px) i chciałbym tam wyświetlić te zdjęcia, tj. miniaturka, a pod spodem tekst i tak do końca tego diva, a następne zdjęcia w nowej linii. Próbowałem upchnąć to w tabelkę, w <div class> ale coś nie pasuje. Jakie rozwiązanie byłoby dobre w tym wypadku? Chodzi mniej więcej o coś takiego:


|-----------|
|miniatura |
|________|
|opis, opis|
|opis, opis|
|opis, opis|
|opis, opis|
|________|


i tak następne koło siebie i następne aż do końca diva i później przenieść następne do nowej linii.

Dziękuję za pomysły.

Ten post edytował Mefiuu 3.09.2010, 16:47:50

Co Ci nie pasuje? Wrzuć swój kod (chociażby html + css). Zbuduj jednego DIV'a i wypełniaj nim powierzchnię np. poprzez pętle w PHP. Jeżeli dobrze ostylujesz pojedynczego DIV'a trzymającego obrazek i podpis, nowa linia "zrobi się sama" (tj. kolejny DIV się nie zmieści i wyświetli się poniżej).

<div id="DużyDIV900px">
for (wstaw tu swój warunek) {
wyświetlaj DIV z obrazkiem i podpisem
}
</div>

[PHP] pobierz, plaintext 
$galeria = mysql_query("SELECT * FROM galeria ORDER BY id DESC");
						if(mysql_num_rows($galeria) > 0) {
 
							while($r = mysql_fetch_assoc($galeria)) {
								echo "<div class=\"zdjecia\"><div class=\"zdjecie\"><a href=\"images/big/".$r['big']."\" rel=\"lightbox[".$r['grupa']."]\"><img src=\"images/mini/".$r['mini']."\" alt=\"\" /></a></div><div class=\"opis\">".$r['opis']."</div></div>";
							}
 
						} 
[PHP] pobierz, plaintext 

Tym kodem to odbieram. Kod css:

[CSS] pobierz, plaintext 
.zdjecia {
	padding-right: 15px;
	padding-bottom: 25px;
	margin-left: 8px;
	width: 100px;
	float: left;
}
 
.zdjecie {
	width: 100px; 
}
 
.opis {
	width: 100px;
	background-color: green;
}
[CSS] pobierz, plaintext 

No i wyświetla mi miniaturki i podpis, ale nie jest to wyrównane, jak chociażby w przypadku tabeli by było. Chodzi o to, żeby każda linijka była wyrównana w poziomie.

No to pętlę wyświetlającą wszystkie fotki wsadź w obejmującego DIV'a np. kontener i nadaj mu szerokość - np. 900px. Same divy trzymające fotki nie mają wysokości to jak mają być równe? Jeżeli natomiast szukasz czegoś co wyrówna Ci długości mniejszych DIVów dynamicznie względem tego "najdłuższego" - zerknij tutaj.

Ten post edytował Daiquiri 3.09.2010, 17:22:50

ok, zrobiłem jednak trochę inaczej i powiedzmy że efekt jest taki jak chciałem. Tylko nie wiem dlaczego przy tej pętli tło diva głównego wygląda jakby była zapisana 1 linia? Tzn. wyświetla mi zdjęcia w 2 rzędach, a div tylko kawałek jest w niebieskim kolorze, dalej jest biały.

Daj kod - dzisiaj nie wróżę z fusów

[CSS] pobierz, plaintext 
#content {
	width: 867px;
	height: auto;
	background-color: #068;
	padding: 15px;
}
[CSS] pobierz, plaintext 

to jest div główny, zastosowany na wszystkich podstronach. Wszędzie jest ok, tylko w galerii wygląda jakby tekstu było jedną linię. Resztę kodu podałem wcześniej

To przez to, że te elementy mają float. Jak na końcu dasz div o właściwości clear: both: powinno zadziałać. To pierwsze co mi przychodzi na myśl. Czyli:

<div id="content">
Twoje bloki z fotami
<div id="clear"></div>
</div>

gdzie w CSSie:

#clear {
clear: both;
}

rzeczywiście, jeśli usunę float to jest wszystko ok. Ale musi to być, bo one mają być jedno koło drugiego, a nie jedno pod drugim. A dodanie id="clear" i clear:both nic nie daje :/

dostawiłem do #content właściwości float: left i display: inline i zadziałało. Jest ok, obydwoje dostają pomógł Dzięki.