Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] Budowa bloku z wierszami
Forum PHP.pl > Forum > Przedszkole
DonJeday
Mój problem polega na tym, że chcę zbudować blok z wierszami tzn. w 1 wierszu ma być 5 divy i chcę żeby budowało się to automatycznie przy pobieraniu rekordów z bazy. Teraz nie wiem jak to zbudować, żeby uniknać tabelek. Czy da się to zbudować na <ul> <li> czy po prostu na div 'ach? I jak to napisać?



Co chcę uzyskać:



Oczywiście te prostokąty będą równe, taki mi się narysowało
artur_dziocha
da się na divach
  1. <?php
  2. foreach($row = mysql_fetch_assoc($wynikZbazy)) {
  3. echo "<div style='width:20%'>$row['id']</div>"; //wyświetla jedną piatą całego diva, możesz też wrzucić stała wielkość Szerokość diva podziel na kiolka część(zależy ile chcesz) i wpisz stało wartość
  4. }
  5. ?>

Pozdrawiam
erix
float: left by się jeszcze przydało. winksmiley.jpg
phpion
Cytat(DonJeday @ 23.11.2008, 14:53:25 ) *
Czy da się to zbudować na <ul> <li> czy po prostu na div 'ach? I jak to napisać?

Da się.
  1. ul {
  2. width: 500px;
  3. }
  4.  
  5. ul li {
  6. width: 80px;
  7. height: 100px;
  8. float: left;
  9. border: 1px red solid;
  10. margin: 0px 10px 10px 0px;
  11. }
l0ud
DonJeday, czy dane, które chcesz zaprezentować są w jakiś sposób powiązane (w pionie, poziomie)? Jeżeli tak, to właśnie nie używanie tabeli jest błędem.

Jeżeli jednak za wszelką cenę chcesz użyć listy/dane nie są powiązane, możesz zrobić coś takiego:
nadaj dla ul overflow: hidden; list-style-type: none; margin:0; padding:0; width: 500px;
dla li margin: 0; padding: 0; float: left; width: 100px;

I teraz tworzysz listę o liczbie elementów podzielnej przez 5... Oczywiście możesz zgodnie z box modelem zmienić wymiary elementów, odstępy itp. smile.gif
artur_dziocha
Cytat(erix @ 23.11.2008, 13:42:13 ) *
float: left by się jeszcze przydało. winksmiley.jpg

ano oczywiscie - małe przeoczenie:)
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.