Lastige uitdaging om een tabel te ordenen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Arie Kant

Arie Kant

16/05/2014 13:10:39
Quote Anchor link
Hallo,

Ik heb even een uitdaging waar ik niet mee verder kom, hopelijk kan iemand mij op weg helpen.

Ik wil uit een tabel een aantal records halen welke in een div / ul lijst getoond worden.

In de overall div moeten 3 kolommen komen met daarin per kolom een ul lijst.

Deze ul lijst kan per kolom van hoogte verschillen.

Op het moment dat ik 4 of meer kolommen heb, wil ik dus dat de 4e kolom weer links in de overal div begint en dat de kolommen 4-5-6 aan de bovenkant op dezelfde hoogte beginnen.

Zoiets als hieronder:

111 222 333
111 222 333
111 222
111

444 555 666
444 555 666
444 666
444

Dit is al wel gelukt zonder mysql gegevens dus met vaste ul lijsten door in de div van de ul lijst 1 en 4 style="clear:left;" te zetten, hierdoor beginnen deze lijsten altijd aan de linkerkant. Als ik deze weglaat dan komt lijst 4 onder lijst 2 te staan i.p.v. aan de linkerkant.

De grote vraag is hoe ik nu in de while of for loop moet aangeven dat elke 1, 4, 7 etc kolom style="clear:left;" krijg in de div?

De code die ik nu hebt is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div id="poule-indeling">                  
<div class="column left" style="clear:left;">
<div class="koptekst-poule">POULE 1</div>
<ul class="sortable-list">
<li class="sortable-item">Sortable item 10</li>
<li class="sortable-item">Sortable item 11</li>
<li class="sortable-item">Sortable item 12</li>
<li class="sortable-item">Sortable item 23</li>
</ul>          
</div>

<div class="column left">
<div class="koptekst-poule">POULE 2</div>
<ul class="sortable-list">
<li class="sortable-item">Sortable item 20</li>
<li class="sortable-item">Sortable item 21</li>
<li class="sortable-item">Sortable item 22</li>
</ul>
</div>

<div class="column left">
<div class="koptekst-poule">POULE 3</div>
<ul class="sortable-list">
<li class="sortable-item">Sortable item 30</li>
<li class="sortable-item">Sortable item 31</li>
<li class="sortable-item">Sortable item 32</li>
</ul>
</div>

<div class="column left" style="clear:left;">
<div class="koptekst-poule">POULE 4</div>
<ul class="sortable-list">
<li class="sortable-item">Sortable item 40</li>
<li class="sortable-item">Sortable item 41</li>
<li class="sortable-item">Sortable item 42</li>
<li class="sortable-item">Sortable item 43</li>
</ul>
</div>

<div class="column left">
<div class="koptekst-poule">POULE 5</div>
<ul class="sortable-list">
<li class="sortable-item">Sortable item 50</li>
<li class="sortable-item">Sortable item 51</li>
<li class="sortable-item">Sortable item 52</li>
</ul>
</div>                                                    

<div class="clearer">&nbsp;</div>
</div>


Met vriendelijke groeten,

Arie
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Alvast bedankt!
Gewijzigd op 16/05/2014 13:11:32 door - Ariën -
 
PHP hulp

PHP hulp

14/11/2024 07:50:17
 
- SanThe -

- SanThe -

16/05/2014 13:32:10
Quote Anchor link
div.clear
{
clear : both;
font-size : 0;
line-height : 0;
padding : 0;
margin : 0;
}

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
$teller = 0;
while(.........)
{
   echo ......../
   $teller++;
   if(($teller % 3) == 0) echo '<div class="clear"></div>';
}
?>

Beetje creatief zijn.
Gewijzigd op 16/05/2014 13:45:18 door - SanThe -
 
Arie Kant

Arie Kant

16/05/2014 13:37:59
Quote Anchor link
Tnx, hier ga ik even mee verder stoeien ........ ;-)
 
- SanThe -

- SanThe -

16/05/2014 13:53:41
Quote Anchor link
Ik heb mijn post gewijzigd in hoe ik het vaak gebruik.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.