Resultaten uit query per 4 in een rij plaatsen en dan een nieuwe rij beginnen. Hoe doe ik dat?
Ik ben bezig me een portfolio site aan het maken en zou graag m'n foto's per 4 naast elkaar plaatsen en daarna een nieuwe rij beginnen met opnieuw weer 4 foto's maar hoe speel ik dat nu klaar in een query?
Ik heb hieronder eens een simpel voorbeeldje.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$result=mysql_query("SELECT id, title
FROM photos
ORDER BY id");
while ($row = mysql_fetch_array($result))
{
$id=$row["id"];
$title=$row["title"];
echo " <div class='preview'>
<img src='$id.jpg'alt='$title' />
</div>";
}
?>
$result=mysql_query("SELECT id, title
FROM photos
ORDER BY id");
while ($row = mysql_fetch_array($result))
{
$id=$row["id"];
$title=$row["title"];
echo " <div class='preview'>
<img src='$id.jpg'alt='$title' />
</div>";
}
?>
Dus eigenlijk wil ik zoiets bekomen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="row">
<div class="preview">
<img src='1.jpg' alt='foto 1' />
</div>
<div class="preview">
<img src='2.jpg' alt='foto 2' />
</div>
<div class="preview">
<img src='3.jpg' alt='foto 3' />
</div>
<div class="preview">
<img src='4.jpg' alt='foto 4' />
</div>
</div>
<div class="row">
<div class="preview">
<img src='5.jpg' alt='foto 5' />
</div>
...
</div>
<div class="preview">
<img src='1.jpg' alt='foto 1' />
</div>
<div class="preview">
<img src='2.jpg' alt='foto 2' />
</div>
<div class="preview">
<img src='3.jpg' alt='foto 3' />
</div>
<div class="preview">
<img src='4.jpg' alt='foto 4' />
</div>
</div>
<div class="row">
<div class="preview">
<img src='5.jpg' alt='foto 5' />
</div>
...
</div>
Dus per 4 resultaten moet er een <div class="row"> ... </div> komen te staan.
Kan iemand me hier mee helpen aub?
Vriendelijke groeten,
Ief
Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 11/07/2012 14:12:08 door Bas IJzelendoorn
Gewijzigd op 10/07/2012 20:42:56 door Ief De Laender
Ief De Laender op 10/07/2012 20:22:30:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$result=mysql_query("SELECT id, title
FROM photos
ORDER BY id");
while ($row = mysql_fetch_array($result))
{
$id=$row["id"];
$title=$row["title"];
echo " <div class='preview'>
<img src='$id.jpg'alt='$title' />
</div>";
}
?>
$result=mysql_query("SELECT id, title
FROM photos
ORDER BY id");
while ($row = mysql_fetch_array($result))
{
$id=$row["id"];
$title=$row["title"];
echo " <div class='preview'>
<img src='$id.jpg'alt='$title' />
</div>";
}
?>
Mis foutafhandeling
Waarom mysql_fetch_array en niet mysql_fetch_assoc?
Waarom $id en $title aanmaken als variabelen?
Gebruik bij php (echo) ' en in html "
Variabelen buiten quotes.
Ten aanzien van je vraag: laat een teller meelopen (zie de link van SanThe)
Gewijzigd op 10/07/2012 20:47:09 door Obelix Idefix
Ief De Laender op 10/07/2012 20:42:40:
Wel in breedte maar niet in hoogte
Als ze in de breedte allemaal even groot zijn dan is het donders eenvoudig. Maak 1 container div waarin je alle foto divjes gooit en geef die een breedte. Daarnaast geef je de foto divjes een float: left mee, zodat ze naast elkaar worden gepositioneerd.
De divjes komen dan automatisch naast elkaar te staan, met op elke 'rij' evenveel.
De reden waarom ik je deze oplossing geef (en niet simpel je vraag beantwoord) is omdat je met deze oplossing je lay out ook nog eens simpel kan aanpassen. Als je morgen geen 4 maar 5 naast elkaar wilt hebben hoef je alleen de breedte van de container aan te passen en hopla. Met de door jouw gevraagde methode gaat dat iets moeilijker.
Overigens zou het me niets verbazen als Wouter J zometeen met een nog veel mooiere CSS/HTML5 oplossing komt aandragen :-)
Erwin H op 10/07/2012 20:57:42:
Als ze in de breedte allemaal even groot zijn dan is het donders eenvoudig. Maak 1 container div waarin je alle foto divjes gooit en geef die een breedte. Daarnaast geef je de foto divjes een float: left mee, zodat ze naast elkaar worden gepositioneerd.
De divjes komen dan automatisch naast elkaar te staan, met op elke 'rij' evenveel.
Ief De Laender op 10/07/2012 20:42:40:
Wel in breedte maar niet in hoogte
Als ze in de breedte allemaal even groot zijn dan is het donders eenvoudig. Maak 1 container div waarin je alle foto divjes gooit en geef die een breedte. Daarnaast geef je de foto divjes een float: left mee, zodat ze naast elkaar worden gepositioneerd.
De divjes komen dan automatisch naast elkaar te staan, met op elke 'rij' evenveel.
Heb ik al gedaan maar probleem is als je een foto's door elkaar hebt in portrait en landscape formaat dan krijg ik dit:
En wat ik wil bekomen is dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
span.om_foto
{
height: 200px;
width: 50px;
float: left;
}
span.om_foto img
{
max-height: 200px;
max-width: 50px;
}
{
height: 200px;
width: 50px;
float: left;
}
span.om_foto img
{
max-height: 200px;
max-width: 50px;
}
Of zoiets.
(natuurlijk wordt dit iets anders bij jou maar ik moest even de foto's nabootsen met blocks)
http://cssdesk.com/b8DJE
Ief De Laender op 10/07/2012 21:23:55:
Heb ik al gedaan maar probleem is als je een foto's door elkaar hebt in portrait en landscape formaat dan krijg ik dit:
En wat ik wil bekomen is dit:
En wat ik wil bekomen is dit:
Ok, ik geef toe, mijn idee was net even te snel gedacht. Maar.... met iets extra CSS3 kan het wel. Dit werkt dus alleen in browsers die CSS3 ondersteunen en dus niet in bijvoorbeeld IE8:
Code (php)
1
.preview:nth-child(4n+1){ clear: both; }
Dit geeft aan dat elk element na het vierde element een clear: both moet krijgen. Daarmee werkt het wel en krijg je precies de rijen die je wil. Getest in FF.
Het één en ander opgestoken :)
Hiermee kan ik aan de slag. Vooral die teller is wel heel knap.