Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [MySQL][PHP]Tabelka obok tabelki
Barcelona
post
Post #1





Grupa: Zarejestrowani
Postów: 322
Pomógł: 15
Dołączył: 29.01.2010

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


Witam, aktualnie zastanawiam się nad takim problemem. Chcę na stronie głównej wyświetlać 3 ostatnie dodane rekordy.
Chciałbym aby te rekordy były wyświetlane w 3 osobnych tabelach i aby te 3 tabelki były obok siebie.
Jednak wszystkie moje próby kończą się tym że tabelki są wyświetlane pod sobą:

Niby są to banały ale kombinuje i wykombinować nie mogę:

  1. <table>
  2. <?
  3. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  4. $wykonaj = mysql_query($zapytanie);
  5. while ($rekord = mysql_fetch_array($wykonaj))
  6. {
  7. $obrazek = $rekord['obrazek'];
  8. $data = $rekord['data'];
  9.  
  10. echo <<<KONIEC
  11. <tr><td><table width="33%"><tr><td>
  12. <img src="img/mini/$obrazek.jpg"></td><td>Dzień dodania: $data</td></tr>
  13. </table></td></tr>
  14.  
  15. KONIEC;
  16. }
  17. ?>
  18. </table>


Ten post edytował Barcelona 29.07.2010, 20:59:16
Go to the top of the page
+Quote Post
Kshyhoo
post
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że




Pokaż całość, jak robiłeś.
Go to the top of the page
+Quote Post
thek
post
Post #3





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D




Tabelka to z tego co kojarzę element blokowy... potraktuj więc go jak diva (IMG:style_emoticons/default/winksmiley.jpg) Nadaj floata (IMG:style_emoticons/default/smile.gif) Co prawda nie testowałem tego, ale tak powinno zadziałać.
Go to the top of the page
+Quote Post
everth
post
Post #4





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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


Display:inline-block powinien wystarczyć
Go to the top of the page
+Quote Post
Barcelona
post
Post #5





Grupa: Zarejestrowani
Postów: 322
Pomógł: 15
Dołączył: 29.01.2010

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


acha, czyli tabelkę umiejscowić w divie i nadać mu Display:inline-block, przetestuje i wrócę z editem
Go to the top of the page
+Quote Post
everth
post
Post #6





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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


Poczytaj o właściwości display. Po co go divować? Nadaj go tym trzem tabelom. Jedynie IE robi problemy, ale w linku masz opisany hack (przekreślona ikona IE) który powinien temu zaradzić. Float też zadziała, ale jego funkcja jest troszeczkę inna (i może bardziej problematyczna).
Go to the top of the page
+Quote Post
Barcelona
post
Post #7





Grupa: Zarejestrowani
Postów: 322
Pomógł: 15
Dołączył: 29.01.2010

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


Poczytałem dzięki. Jednak sposób z divem okazał się trafny i pomógł (IMG:style_emoticons/default/smile.gif)

Dzięki chłopaki.
Go to the top of the page
+Quote Post
thek
post
Post #8





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D




Podałem sposób z float bo moim zdaniem jest on mniej problematyczny z racji właśnie IE i jego problemów z display innym niż inline lub block. Moim zdaniem prościej nadać opływanie elementom i na koniec walnąć tylko by następny element po nich miał clear ustawiony, niż kombinować z hackami specjalnie pod IE (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
everth
post
Post #9





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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


Z tego co wiem to IE od v7 już nie ma problemu z inline-block, choć jeśli to element table... Do wyboru, do koloru. Z float to mam nieciekawe wspomnienia gdyż w ten sposób bez dodatkowych elementów ciężko się je np. centrowało, czy np. trzeba było dodawać specjalną regułkę do kontenera żeby uznawał ich istnienie. Ale co kto woli.
Go to the top of the page
+Quote Post
PeHaPowiec
post
Post #10





Grupa: Zarejestrowani
Postów: 14
Pomógł: 2
Dołączył: 13.06.2005

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


Może tak:


  1. <table border="0" cellspacing="30" cellpadding="10"><tr>
  2. <?
  3. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  4. $wykonaj = mysql_query($zapytanie);
  5. while ($rekord = mysql_fetch_array($wykonaj))
  6. {
  7. $obrazek = $rekord['obrazek'];
  8. $data = $rekord['data'];
  9.  
  10. echo '<td bgcolor="gray"><img src="img/mini/'.$obrazek.'.jpg"><br> Dzień dodania: <b>'.$data.'</b></td>';
  11. }
  12. ?>
  13. </tr></table>



Powinno śmigać
Pozdrawiam
Go to the top of the page
+Quote Post
Barcelona
post
Post #11





Grupa: Zarejestrowani
Postów: 322
Pomógł: 15
Dołączył: 29.01.2010

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


@PeHaPowiec działa ale nie mogę robić kolejnych td tylko muszę korzystać z br, więc bedzie to mało eleganckie rozwiązanie.

@everth mam IE w wersji 7.0 i jak zwykle to ustrojstwo robi problemy. Jak zrobiłem inline-block to i tak pokazało mi w pionie, dopiero musiałem z twojego linka skorzystać i tam było lekarstwo na IE ale to i tak papranina wyszła bo musiałem tabele umiejscowić w li i dodatkowo każde td w span - masło maślane. Życie było by łatwiejsze bez IE (IMG:style_emoticons/default/winksmiley.jpg)

@thek mógłbyś zaprezentować jakiś przykład jak by to miało wyglądać?

Już niby działa ale wiem że to jest dobre rozwiązanie.

Pozdrawiam
----------------------------------
EDIT:

Adres strony: http://vikor.eu/index.php?strona=main

Na stronie głównej w "Ostatnio dodane" jest właśnie ta tabelka. Jak pewnie zauważycie jest ona oddalona od lewej krawędzi co psuje wizerunek. Dodatkowo musiałem wykorzystać styl white-space: nowrap; bo łamało mi linie na ostatniej tabelce.

  1. <div class="nobr">
  2. <ul>
  3. <?
  4. $zapytanie = "SELECT * FROM `ogloszenia` LIMIT 3";
  5. $wykonaj = mysql_query($zapytanie);
  6. while ($rekord = mysql_fetch_array($wykonaj))
  7. {
  8. $obrazek = $rekord['obrazek'];
  9. $data = $rekord['data'];
  10. $marka = $rekord['marka'];
  11. $model = $rekord['model'];
  12. echo <<<KONIEC
  13. <li class="test"><span>
  14.  
  15. <table width="200px" class="ogloszenie"><tr><td colspan="2" align="center">
  16. <img src="img/mini/$obrazek.jpg"></td><td></td></tr>
  17. <tr><td class="og">Data:</td><td>$data</td></tr>
  18. <tr><td class="og">Marka:</td><td>$arka</td></tr>
  19. <tr><td class="og">Model:</td><td>$model</td></tr>
  20. </table>
  21. </span></li>
  22. KONIEC;
  23. }
  24. ?>
  25. </ul></div>


  1. .nobr {white-space: nowrap;}
  2. .test {display:inline;}
  3. .test span {display:inline-block;}


Pozdrawiam

Ten post edytował Barcelona 30.07.2010, 20:52:24
Go to the top of the page
+Quote Post
everth
post
Post #12





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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


Trochę pokombinowałeś. Spróbuj tak:
  1. <ul>
  2. <li>
  3. <a href=''><img src='' /></a>
  4. <table>...</table>
  5. </li>
  6. </ul>

Gdzie li ma inline-block, a obrazek i tabela mają block. W IE możesz dopisać hack nadający li właściwość float zamiast inline np
  1. * float:left

Pisane na szybko więc nie wiem czy zadziała
Go to the top of the page
+Quote Post
Barcelona
post
Post #13





Grupa: Zarejestrowani
Postów: 322
Pomógł: 15
Dołączył: 29.01.2010

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


@everth Zrobiłem coś w tym właśnie stylu i działa. Tylko znowu mam mały problem estetyczny. W operze ta tabelka z ostatnimi ogłoszeniami jest opuszczona pare mm a w IE tabelka pokrywa się z górnym marginesem fieldset. Wiem że można to zrobić za pomocą margin-top ale jak zwiększe to wtedy w IE się poprawi ale za to w operze się wtedy za nisko opuści (IMG:style_emoticons/default/sciana.gif)
Dlaczego to IE jest takie kłopotliwe

http://vikor.eu/index.php?strona=main
Go to the top of the page
+Quote Post
everth
post
Post #14





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

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


Całe szczęście IE wie że jest ułomne i udostępnia różne sposoby dzięki którym tylko ona widzi pewne wartości CSS. Pierwszy lepszy opis. Dopisz sobie
  1. * margin-top:costam
dla IE
Go to the top of the page
+Quote Post
PeHaPowiec
post
Post #15





Grupa: Zarejestrowani
Postów: 14
Pomógł: 2
Dołączył: 13.06.2005

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


Zagniezdzaj tabele w tabeli i mozesz rozwijac jak chcesz.

  1. <table border="0" valign="top" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <td valign="top">
  4. <table valign="top" border="0" cellspacing="0" cellpadding="0">
  5. <tr>
  6. <td height="200" width="200" bgcolor="aqua"></td>
  7. </tr>
  8. <tr>
  9. <td height="200" width="200" bgcolor="red"></td>
  10. </tr>
  11. <tr>
  12. <td height="200" width="200" bgcolor="green"></td>
  13. </tr>
  14. </td>
  15. <td valign="top">
  16. <table border="0" cellspacing="0" cellpadding="0">
  17. <tr>
  18. <td height="200" width="200" bgcolor="black"></td>
  19. </tr>
  20. <tr>
  21. <td height="200" width="200" bgcolor="yellow"></td>
  22. </tr>
  23. </td>
  24. <td valign="top">
  25. <table border="0" cellspacing="0" cellpadding="0">
  26. <tr>
  27. <td bgcolor="gray" height="200" width="200" bgcolor="aqua"></td>
  28. </tr>
  29. </td>
  30. </tr>
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 18.09.2025 - 08:15