[html] Image gallery zonder tabellen

[me1299]

Ik ben aan een hele tijd aan het prutsen met een website, waarin ik een overzicht heb van een aantal objecten. Nu ben ik het beu om overal tabellen voor de gebruiken, omdat je code daar onoverzichtelijk van wordt en je constant bezig bent met spacers enzo.

Nu heb ik dus iets geproduceerd met het volgende resultaat:



Zoals je ziet gaat het in het begin goed maar later begint alles door elkaar heen te lopen. Ik wil dus met PHP een aantal objecten uit de database halen en vervolgens die netjes naast elkaar met css gepresenteerd hebben. Met 3 op een rij en goed uitgelijnd.

Ik krijg dit met geen mogelijkheid voor elkaar ik zit nog steeds ook met stomme tabellen om de tekst onder onder een afbeelding gecentreerd te krijgen. Ik heb nu de volgende code:

PHP:

while($projecten = mysql_fetch_assoc($result)) {
    print("
        <div style='float: left; margin-right: 25px; margin-bottom: 5px; width: {$max_width}px; height: {$max_height}px; border: 1px solid #B2AEAD;'>
            <table>
                <tr>
                    <td><a href='#'>[img]'images/upload/{$projecten['thumbnail']}'[/img]</a></td>
                </tr>
                <tr>
                    <td align='center'><a href='#'>{$projecten['omschrijving']}</a></td>
                </tr>
            </table>
        </div>
    ");
        

        $count++;
    }

Nu wil ik zowieso die tabellen eruit halen, want anders is het helemaal geen porum, maar heeft iemand een idee hoe ik dit het beste aan kan pakken? Het lijkt misschien nu net alsof ik te lui ben om het zelf uit te zoeken, maar ik ben al een hele tijd aan het zoeken op de search hier en op google, maar een duidelijk voorbeeld kom ik niet tegen.

[André]

Als je alle divs even hoog maakt kun je ze gewoon met float:left achter elkaar plaatsen.

[BasieP]

en anders kan je ze gelijk stellen door <br clear="all" />

Verwijderd schreef op vrijdag 11 november 2005 @ 23:46:
Dat is juist het frapante alle 'div's' zijn exact even hoog. Omdat ik eerst met php uitreken hoe hoog het hoogste plaatjes is en aan de hand daarvan geneer ik voor alle 'div's' dezelfde hoogte. Voor de breedte hetzelfde verhaal..

post eens je css dan.. want als jij height opgeeft worden ze echt zo groot hoor

[ Voor 101% gewijzigd door BasieP op 11-11-2005 23:47 ]

[Verwijderd]

André schreef op vrijdag 11 november 2005 @ 23:45:
Als je alle divs even hoog maakt kun je ze gewoon met float:left achter elkaar plaatsen.

Dat is juist het frapante alle 'div's' zijn exact even hoog. Omdat ik eerst met php uitreken hoe hoog het hoogste plaatjes is en aan de hand daarvan geneer ik voor alle 'div's' dezelfde hoogte. Voor de breedte hetzelfde verhaal..

[me1299]

De hierboven geplaatste reply ging per ongeluk met een account van een vriend van mij..

[Metten]

dat doe je dan zo te zien niet helemaal goed want test6 is een stukkie lager dan test5

sowieso zou ik met een vaste div hoogte/breedte werken en een standaardformaat thumbnail

[me1299]

De uiteindelijke html output is als volgt:

code:

        <div style='float: left; margin-right: 25px; margin-bottom: 5px; width: 120px; height: 90px; border: 1px solid #B2AEAD;'>
            <table>
                <tr>
                    <td><a href='#'>[img]'images/upload/thumb389211317438111131743811_thumb_1130499970picture901sv1b_resize.JPG'[/img]</a></td>
                </tr>
                <tr>
                    <td align='center'><a href='#'>Test 1</a></td>
                </tr>
            </table>
        </div>
    
        <div style='float: left; margin-right: 25px; margin-bottom: 5px; width: 120px; height: 90px; border: 1px solid #B2AEAD;'>
            <table>
                <tr>
                    <td><a href='#'>[img]'images/upload/thumb389211317441571131744157_thumb_1130499324picture829-IMG_0569_resize.JPG'[/img]</a></td>
                </tr>
                <tr>
                    <td align='center'><a href='#'>Test 2</a></td>
                </tr>
            </table>
        </div>

Dat zijn de eerste 2 afbeeldingen.

Metten schreef op vrijdag 11 november 2005 @ 23:49:

sowieso zou ik met een vaste div hoogte/breedte werken en een standaardformaat thumbnail

De thumbnails worden met gdlib gegenereerd, en ik hou enkel een max breedte, hoogte aan per afbeelding. Sommige afbeeldingen die de klant wil upload zijn van een dusdanige andere verhouding dat het helaas niet anders kan.

[ Voor 37% gewijzigd door me1299 op 11-11-2005 23:52 ]

[André]

Ze zijn niet allemaal even hoog, dat zie je zelf wel in je voorbeeld.
En je wilt van tabellen af maar toch gebruik je ze nog?

[BasieP]

mja ten eerste:
classes <-- dan hoef je geen css in je html te plakken..

verder is je probleem gewoon dat je de plaatjes op 90 pixels hoog hebt geparsed.
de div's zijn ook zo hoog, maar je hebt er nog text onder staan, en een margin etc.
dus ff doorrekenen

[me1299]

BasieP schreef op vrijdag 11 november 2005 @ 23:51:
mja ten eerste:
classes <-- dan hoef je geen css in je html te plakken..

verder is je probleem gewoon dat je de plaatjes op 90 pixels hoog hebt geparsed.
de div's zijn ook zo hoog, maar je hebt er nog text onder staan, en een margin etc.
dus ff doorrekenen

Classes gebruik ik reeds, ik heb dus een class die verder prima is maar die gebruik ik meerdere keren op een pagina. En dan geef ik dus enkel in een onderliggende div de maten aan. Dat is handiger dan super veel extra classes daarvoor aanmaken imo.

Je hebt idd gelijk, nu ik de tabellen rommel en de margins weg heb gehaald gaat het wel goed. Alleen rest mij nu de vraag hoe ik het slimste ervoor kan zorgen dat dat thumbnails een vaste afstand tot elkaar bewaren, en daar nog een titel per thumbnail onder kan zetten.

Het probleem is namelijk als ik een tekst onder de thumbnail wil zetten ik deze niet gecentreerd krijg adv de bovenstaande afbeelding

[ Voor 8% gewijzigd door me1299 op 11-11-2005 23:57 ]

[BasieP]

er bestaat in css ook zoiets als dit:

Cascading Stylesheet:

.classnaam div {
   <en dan hier properties van de div die onder de class vallen>
}

enneuh
text-align:center;
of bedoel je iets anders?

bedoel je trouwens de afstand tussen de divs? of de afstand in de divs van de plaatjes?

[ Voor 51% gewijzigd door BasieP op 11-11-2005 23:59 ]

[me1299]

BasieP schreef op vrijdag 11 november 2005 @ 23:57:
er bestaat in css ook zoiets als dit:

Cascading Stylesheet:

.classnaam div {
   <en dan hier properties van de div die onder de class vallen>
}

enneuh
text-align:center;
of bedoel je iets anders?

bedoel je trouwens de afstand tussen de divs? of de afstand in de divs van de plaatjes?

Classes zal ik me zo eens in gaan verdiepen, klinkt iig veelbelovend..

Text-align: center; per div opgeven gaat goed, alleen het probleem is dat de problematiek waarvoor ik het topic heb gestart zich dan weer herhaald. Hij hou dan weer geen rekening met de opgegeven hoogte

[Alex)]

Na iedere div-regel een clearing div invoeren moet helpen...

[BasieP]

Alex schreef op zaterdag 12 november 2005 @ 00:04:
Na iedere div-regel een clearing div invoeren moet helpen...

dat werkte al

als die text align verandering opleverd in je hoogte doe je iets niet goed.
speel eens met een paar pixels (2/3) als ie het dan opeens wel doet is het een bug, maar ik denk dat er wat anders aan de hand is.

[ Voor 37% gewijzigd door BasieP op 12-11-2005 00:06 ]

[me1299]

Ik heb nu dus dit:

PHP:

while($projecten = mysql_fetch_assoc($result)) {
    print("
        <div style='float: left; margin-right: 25px; margin-bottom: 5px; width: {$max_width}px; height: {$max_height}px; border: 1px solid #B2AEAD; text-align:center;'>
        <a href='#'>[img]'images/upload/{$projecten['thumbnail']}'[/img]aa</a>
        </div>
    ");
}

Met als resultaat:

Wat overigens ook wel leuk is om te vermelden is dat firefox het geheel wel prima weergeeft!

BasieP schreef op zaterdag 12 november 2005 @ 00:04:
[...]

als die text align verandering opleverd in je hoogte doe je iets niet goed.

Text align zelf levert idd geen verandering op. Het gaat pas fout als ik er tekst onder zet.

[ Voor 43% gewijzigd door me1299 op 12-11-2005 00:09 ]

[André]

Maar nog steeds zijn alle vakken niet even hoog, fix dat eerst eens

[BasieP]

welke waardes zijn '$max_height' en '$max_width' ?
als $max_height nog steeds 90 is dan is het logish, want text heeft hight, en plaatje is 90px hoog (de staande dan) dus is samen meer dan 90

André schreef op zaterdag 12 november 2005 @ 00:08:
Maar nog steeds zijn alle vakken niet even hoog, fix dat eerst eens

ff topic lezen, ze waren goed, maar nu hij text-align:center; heeft toegepast zouden ze weer fout zijn.

een clear all br kan werken, maar in theorie zou het al moeten werken, dus zou ie niet nodig zijn

[ Voor 103% gewijzigd door BasieP op 12-11-2005 00:11 ]

[me1299]

BasieP schreef op zaterdag 12 november 2005 @ 00:09:
welke waardes zijn '$max_height' en '$max_width' ?

$max_height = 90px;
$max_width = 120px;

De source is nu als volgt:

code:

        <div style='float: left; margin-right: 25px; margin-bottom: 5px; width: 120px; height: 90px; border: 1px solid #B2AEAD; text-align:center;'>
        <a href='#'>[img]'images/upload/thumb389211317443821131744382_thumb_1130500579picture969-103_resize.JPG'[/img]aa</a>
        </div>

BasieP schreef op zaterdag 12 november 2005 @ 00:09:
welke waardes zijn '$max_height' en '$max_width' ?
als $max_height nog steeds 90 is dan is het logish, want text heeft hight, en plaatje is 90px hoog (de staande dan) dus is samen meer dan 90
[...]

Ohja dat is natuurlijk logisch Maar als hij niet genoeg ruimte heeft voor een div zou die dus op moeten rekken. En toch zeker niet op de manier zoals hij nu in IE doet?

[ Voor 39% gewijzigd door me1299 op 12-11-2005 00:13 ]

[BasieP]

DeathKnight schreef op zaterdag 12 november 2005 @ 00:11:
$max_height = 90px;

BasieP schreef op vrijdag 11 november 2005 @ 23:51:
verder is je probleem gewoon dat je de plaatjes op 90 pixels hoog hebt geparsed.
de div's zijn ook zo hoog, maar je hebt er nog text onder staan, en een margin etc.
dus ff doorrekenen

BasieP schreef op zaterdag 12 november 2005 @ 00:09:
welke waardes zijn '$max_height' en '$max_width' ?
als $max_height nog steeds 90 is dan is het logish, want text heeft hight, en plaatje is 90px hoog (de staande dan) dus is samen meer dan 90

nuff said

[me1299]

Oke, ik heb nu 12px bij de max hoogte op geteld, en nu gaat het wel goed

Rest met enkel nog één vraagje. Hoe kan ik het beste afstand bewaren tussen de DIV's? Was mijn padding wel een goede methode?

[BasieP]

DeathKnight schreef op zaterdag 12 november 2005 @ 00:16:
Oke, ik heb nu 12px bij de max hoogte op geteld, en nu gaat het wel goed

Rest met enkel nog één vraagje. Hoe kan ik het beste afstand bewaren tussen de DIV's? Was mijn padding wel een goede methode?

zolang je geen spacers gebruikt is het goed
maar padding margin is er voor ontwikkeld, dus die zou ik gebruiken

edit: margin dus..

http://www.w3.org/TR/REC-CSS2/box.html

[ Voor 12% gewijzigd door BasieP op 12-11-2005 00:22 ]

[André]

BasieP schreef op zaterdag 12 november 2005 @ 00:09:

ff topic lezen, ze waren goed, maar nu hij text-align:center; heeft toegepast zouden ze weer fout zijn.

Die lees ik Aan die text-align: center heeft het echt niet gelegen.

En ik zou margin gebruiken:
http://www.w3.org/TR/CSS21/box.html

[BasieP]

André schreef op zaterdag 12 november 2005 @ 00:24:
[...]

Die lees ik Aan die text-align: center heeft het echt niet gelegen.

dat zei ik ook