przerobienie tabeli na div Opcje

[Seraph]

mam problem :roll2:

chciałem przerobić poniższy kod, żeby zamiast w tabeli tworzył się w warstwach.

[PHP] pobierz, plaintext 
<?php
$sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
	$i = 0; // liczba dodanych na stronę kategorii
	echo '<table><tr><td colspan="6">kategorie</td><tr>' ;// zaczyna rysować tabelę z kategoriami
	while ($row = mysql_fetch_array($sql) ) {
		$id = $row ['id'];
		$nazwa = $row ['nazwa'];
		$sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
		$row2 = mysql_fetch_array ($sql2);
		$zdjecie = $row2['zdjecie'];
 
		$i =$i +1; // powieksza liczbe zdjec o 1
		echo ' <td><a href="/galeria/galeria.php?action=wypisz&amp;kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a></td>';
 
		if ($i == 6) { // jeśli w jednym wierszu jest już 6 kategorii, dodaje drugi wiersz
			echo '</tr><tr>';
			$i = 0;
		}
	}
	if ($i != 0 ){
		while ($i < 6) {
		++$i;
		echo ' <td>&nbsp;</td>';
		}		
	}
	echo ' </tr></table>';
?>
[PHP] pobierz, plaintext 

Poczytałem trochę i spróbowałem... jednak totalna klęska.
Jako <table> zrobiłem 1 div, potem jako <td> 2 i <td> 3 - czytałem o tym w jakimś kursie...
tylko, że przy tych ustawieniach wszystko mi się rozjeżdża i obrazki nachodzą jeden na drugi a nie obok siebie, jak było w tabeli.
Proszę o jakieś wskazówki albo pomoc. (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)

[wipo]

DIV to zupełnie coś innego niż table tr i td

[Seraph]

No wiem, jestem tego świadomy, ale chciałem cały lay strony przenieść na warstwy... to był jedyny sposób jaki znalazłem...
w takim razie jak inaczej mogę się za to zabrać, żeby mi podobnie podzieliło wyniki?

[Zajec]

[PHP] pobierz, plaintext 
<?php
$sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
	echo '<div class="naobrazki"><p>kategorie</p>' ;// zaczyna rysować tabelę z kategoriami
	while ($row = mysql_fetch_array($sql) ) {
		$id = $row ['id'];
		$nazwa = $row ['nazwa'];
		$sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
		$row2 = mysql_fetch_array ($sql2);
		$zdjecie = $row2['zdjecie'];
 
		echo ' <a href="/galeria/galeria.php?action=wypisz&kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a><';
	}
	echo ' </div>';
?>
[PHP] pobierz, plaintext 

Kod

div.naobrazki:after {
content: "";
clear: both;
display: block;
}
div.naobrazki a {
float: left;
margin-right: 5px;
}

W razie kłopotów pisz, a najlepiej daj jeszcze adres to strony z zastosowaniem mojej wersji skryptu.

Ten post edytował Zajec 30.09.2006, 20:09:04

[Seraph]

Stronka póki co na dysku, więc adresu nie dam, gdybyś był później zainteresowany to mogę dać znać.
Całość napisana przez Ciebie działa w porządku, mam tylko jeszcze problem kiedy np. mam zdjęcia o różnej wysokości to wtedy kolejnego wiersza nie wyświetla już od lewej tylko od miejsca gdzie kończy się większy obrazek i wtedy np. przed mniejszym obrazkiem, który był wcześniej zostaje puste miejsce.
Nie wiem czy da się coś z tym jeszcze zrobić, bo wysokości wiersza chyba nie dam rady zmodyfikować (obym się mylił).

[Zajec]

Przyznam, że nie wziąłem pod uwagę różnych rozmiarów zdjęć. Spróbuj czegoś takiego.

[PHP] pobierz, plaintext 
<?php
$sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
	$i = 0; // liczba dodanych na stronę kategorii
	echo '<div class="naobrazki"><p>kategorie</p><div>' ;// zaczyna rysować tabelę z kategoriami
	while ($row = mysql_fetch_array($sql) ) {
		$id = $row ['id'];
		$nazwa = $row ['nazwa'];
		$sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
		$row2 = mysql_fetch_array ($sql2);
		$zdjecie = $row2['zdjecie'];
 
		$i++; // powieksza liczbe zdjec o 1
		echo ' <a href="/galeria/galeria.php?action=wypisz&amp;kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a>';
 
		if ($i == 6) { // jeśli w jednym wierszu jest już 6 kategorii, dodaje drugi wiersz
			echo '</div><div style="clear: both;">';
			$i = 0;
		}
	}
	echo ' </div></div>';
?>
[PHP] pobierz, plaintext 

Kod

div.naobrazki:after {
content: "";
clear: both;
display: block;
}
div.naobrazki a {
float: left;
margin-right: 5px;
}

Edycja: było class="" zamiast class="naobrazki"

Ten post edytował Zajec 30.09.2006, 23:49:08

[Seraph]

ok teraz wszystko działa już dobrze, dzięki za pomoc

[shpyo]

IMO przerabianie tabelki na wartwy w tym przypadku to jest masochizm i strata czasu. Mozna to zrobić - tylko po co?!

[Zajec]

IMO przerabianie tabelki na wartwy w tym przypadku to jest masochizm i strata czasu. Mozna to zrobić - tylko po co?!

Dla semantyczności. Zresztą jak widziałeś, nie było to masochizmem, poszło całkiem sprawie. Nawet dość łatwo biorąc pod uwagę, że pozybliśmy się dorabiania sztucznych <td>&nbsp;</td>

[shpyo]

Dla semantyczności. Zresztą jak widziałeś, nie było to masochizmem, poszło całkiem sprawie. Nawet dość łatwo biorąc pod uwagę, że pozybliśmy się dorabiania sztucznych <td>&nbsp;</td>

Jakby tabela mnie miała kilkadziesiąt kolumn i trochę bardziej zakręconą strukturę, też byś przerobił na bloki dla semantyczności?