[HTML/CSS] Thumbnail overzicht in tabel

[GandalfTheGrey]

Voor een productoverzicht pagina wil ik thumbs en text weergeven. Hele pagina staat mooi in DIV's ed. En het mooiste leek het mij om dit overzicht in tabellen te doen. Alleen wat ik wil krijg ik maar niet voor elkaar. Het HTML cellspacing is zowel horizontaal als verticaal en dat moet ik juist niet hebben. Je hebt wel de CSS property border-spacing (In het seperate border model) maar dat werkt niet in IE.

Hieronder een plaatje van wat ik wil:




Om te bereiken wat ik wil heb ik nu gewoon lege cellen ertussen geplakt. Maar dit vind ik een niet zo'n elegante oplossing. Is hetgeen wat ik wil ook anders te bereiken (met een TABLE en CSS).

HTML:

    <table id="thumboverview">
                        <tr>
                            <td class="imagerow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="imagerow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="imagerow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="imagerow">blaat</td>
                        </tr>
                        <tr>
                            <td class="textrow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="textrow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="textrow">blaat</td>
                            <td class="tussen">&nbsp;</td>
                            <td class="textrow">blaat</td>
                        </tr>
                    </table>

Cascading Stylesheet:

#thumboverview {
margin-top: 0px;
margin-left: 16px;
width: 553px;
border-collapse: collapse;
}

#thumboverview .imagerow {
width: 95px;
height: 95px;
border: 1px solid #988786;
padding: 0px;
margin: 0px;
background: #FFFFFF;
}

#thumboverview .tussen {
width: 16px;
border: 0px;
padding: 0px;
margin: 0px;
}

#thumboverview .textrow {
border-left: 1px solid #988786;
border-right: 1px solid #988786;
border-bottom: 1px solid #988786;
width: 95px;
height: 15px;
padding: 0px;
}

[BtM909]

Ik vraag me af of je dit wel in een tabel wilt doen

Is het niet handiger om een Definition List hiervoor te gebruiken?

[killercow]

Kun je niet net zo makkelijk een klein divje per product maken,
dit divje vul je dan met een image, en een divje voor de tekst, en al deze divjes geef je dan float-left mee zodat ze netjes naast elkaar gaan staan.

scheelt je ook extra html code om je tabel kloppend te maken.

[Verwijderd]

killercow schreef op vrijdag 09 november 2007 @ 13:11:
Kun je niet net zo makkelijk een klein divje per product maken,
dit divje vul je dan met een image, en een divje voor de tekst, en al deze divjes geef je dan float-left mee zodat ze netjes naast elkaar gaan staan.

scheelt je ook extra html code om je tabel kloppend te maken.

Dat ligt er maar net aan hoeveel producten hij heeft
Bij 5000 producten wordt je van 5000 divs ook niet vrolijk.

[Zeebonk]

Verwijderd schreef op vrijdag 09 november 2007 @ 13:14:
[...]


Dat ligt er maar net aan hoeveel producten hij heeft
Bij 5000 producten wordt je van 5000 divs ook niet vrolijk.

Als je inplaats van voor elk product een div maken, één class "product" maakt hoeft dat helemaal niet. En kan je het gewoon doen zoals killercow al zei.

[GandalfTheGrey]

BtM909 schreef op vrijdag 09 november 2007 @ 13:10:
Ik vraag me af of je dit wel in een tabel wilt doen

Is het niet handiger om een Definition List hiervoor te gebruiken?

Nog nooit gebruikt. Ziet er leuk uit http://www.maxdesign.com....tion/dl-image-gallery.htm

Ik hou alleen 1pixel over tussen mijn <dd> en <dt> en de margins en padding staan wel 0. Hierdoor sluiten de borders niet aan.

Fixed. (hoogtes en breedte klopten niet)

[BtM909]

Laat ff zien wat je hebt dan

dat weet je inmiddels toch wel?

[moozzuzz]

Dit is inderdaad beter op te lossen met een list (ul of dl), je hebt dan geen extra divjes nodig. De "cell-spacing" kan je perfect definiëren met margins en paddings :^) (ook in IE).