Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przerobienie tabeli na div
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Seraph
mam problem :roll2:

chciałem przerobić poniższy kod, żeby zamiast w tabeli tworzył się w warstwach.
  1. <?php
  2. $sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
  3. $i = 0; // liczba dodanych na stronę kategorii
  4. echo '<table><tr><td colspan="6">kategorie</td><tr>' ;// zaczyna rysować tabelę z kategoriami
  5. while ($row = mysql_fetch_array($sql) ) {
  6. $id = $row ['id'];
  7. $nazwa = $row ['nazwa'];
  8. $sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
  9. $row2 = mysql_fetch_array ($sql2);
  10. $zdjecie = $row2['zdjecie'];
  11.  
  12. $i =$i +1; // powieksza liczbe zdjec o 1
  13. echo ' <td><a href="/galeria/galeria.php?action=wypisz&amp;kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a></td>';
  14.  
  15. if ($i == 6) { // jeśli w jednym wierszu jest już 6 kategorii, dodaje drugi wiersz
  16. echo '</tr><tr>';
  17. $i = 0;
  18. }
  19. }
  20. if ($i != 0 ){
  21. while ($i < 6) {
  22. ++$i;
  23. echo ' <td>&nbsp;</td>';
  24. }
  25. }
  26. echo ' </tr></table>';
  27. ?>


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. 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
  1. <?php
  2. $sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
  3. echo '<div class="naobrazki"><p>kategorie</p>' ;// zaczyna rysować tabelę z kategoriami
  4. while ($row = mysql_fetch_array($sql) ) {
  5. $id = $row ['id'];
  6. $nazwa = $row ['nazwa'];
  7. $sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
  8. $row2 = mysql_fetch_array ($sql2);
  9. $zdjecie = $row2['zdjecie'];
  10.  
  11. echo ' <a href="/galeria/galeria.php?action=wypisz&kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a><';
  12. }
  13. echo ' </div>';
  14. ?>
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.
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.

  1. <?php
  2. $sql = mysql_query( " SELECT * FROM kategoria "); //pobiera nazwy i ID wszystkich kategorii
  3. $i = 0; // liczba dodanych na stronę kategorii
  4. echo '<div class="naobrazki"><p>kategorie</p><div>' ;// zaczyna rysować tabelę z kategoriami
  5. while ($row = mysql_fetch_array($sql) ) {
  6. $id = $row ['id'];
  7. $nazwa = $row ['nazwa'];
  8. $sql2 = mysql_query ( " SELECT zdjecie FROM galeria WHERE kategoria='$id' ORDER BY rand() limit 1 "); // pobiera losowe zdjęcie z wybranej kategorii
  9. $row2 = mysql_fetch_array ($sql2);
  10. $zdjecie = $row2['zdjecie'];
  11.  
  12. $i++; // powieksza liczbe zdjec o 1
  13. echo ' <a href="/galeria/galeria.php?action=wypisz&amp;kat=' . $id .'">' . $nazwa . '<br><img name="' . $zdjecie . '" src="/galeria/img/small/' . $zdjecie . '" ></a>';
  14.  
  15. if ($i == 6) { // jeśli w jednym wierszu jest już 6 kategorii, dodaje drugi wiersz
  16. echo '</div><div style="clear: both;">';
  17. $i = 0;
  18. }
  19. }
  20. echo ' </div></div>';
  21. ?>
Kod
div.naobrazki:after {
content: "";
clear: both;
display: block;
}
div.naobrazki a {
float: left;
margin-right: 5px;
}




Edycja: było class="" zamiast class="naobrazki"
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
Cytat(shpyo @ 1.10.2006, 11:26:59 ) *
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
Cytat(Zajec @ 1.10.2006, 11:53:16 ) *
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?
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.