[CSS] Image in caption vern**kt de pagewrap

[EelCapone]

Ik ben bezig om m'n fotoboek om te bakken naar XHTML en CSS. Onder elke thumbnail heb ik een icoontje staan die het type foto aangeeft (gif/jpg/png etc.), en een tekst die het aantal views weergeeft.

Nu lukt het me prima om de thumbnail en het aantal views weer te geven, maar zodra ik het icoontje toevoeg vern**kt ie de page wrap (als er meer thumbnails op een pagina staan dan op 1 regel passen, dan moet ie ze netjes op de volgende regel weergeven).

Dit is de CSS code:

Cascading Stylesheet:

.thumbs {
    width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.thumbs-item {
    float: left;
    margin: 2px 2px 2px 2px;
    width: 144px;
    display: inline;
}
.thumbs-item table {
    background: #777777;
    height: 144px;
    text-align: center;
    width: 144px;
}
.thumbs-item img {
    border: none;
}
.thumbs-item p {
    margin: 0;
    background: #777777;
    float: left;
    text-align: right;
    width: 144px;
}
.thumbs-item p img {
    border: none;
}
.thumbs-clear {
    clear: both;
}

En de bijbehorende HTML code:

HTML:

<div class="thumbs">
<div class="thumbs-item">
    <table><tr><td><a href="photo01.jpg">[img]"thumb01.jpg"[/img]</a>
    </td></tr></table>
    <p>[img]"/images/mime/jpg.gif"[/img]&nbsp;10 keer bekeken</p>
</div>
<div class="thumbs-item">
    <table><tr><td><a href="photo02.gif">[img]"thumb02.jpg"[/img]</a>
    </td></tr></table>
    <p>[img]"/images/mime/gif.gif"[/img]&nbsp;10 keer bekeken</p>
</div>
<div class="thumbs-item">
    <table><tr><td><a href="photo03.png">[img]"thumb03.jpg"[/img]</a>
    </td></tr></table>
    <p>[img]"/images/mime/png.gif"[/img]&nbsp;10 keer bekeken</p>
</div>
(.....)
<div class="thumbs-clear">&nbsp;</div>
</div>

Ik zit nu al een paar dagen te kloten, maar ik krijg het gewoon niet voorelkaar. Het moet volgens mij aan het icoontje liggen, want als ik een 'display: none;' toevoeg aan de sectie '.thumbs-item p img', doet ie de pagewrap wel goed.

[ Voor 19% gewijzigd door EelCapone op 15-09-2005 11:19 ]

[thomaske]

Waarom gebruik je een table van 1 cel om het plaatje weer te geven?
En volgens mij mag het IMG element niet binnen een Paragraph..

[EelCapone]

thomaske schreef op donderdag 15 september 2005 @ 11:42:
Waarom gebruik je een table van 1 cel om het plaatje weer te geven?

Op dit moment kun je m.b.v. CSS plaatjes niet verticaal centreren, vandaar de tabel

En volgens mij mag het IMG element niet binnen een Paragraph..

Hmmm zou kunnen In de voorbeelden van de specs worden ook <img> tags binnen <p> tags gebruikt, dus ik denk haast niet dat het daar aan ligt. Ik heb het trouwens ook al es geprobeert met een <div> tag, maar dat mocht ook niet baten.

[djluc]

Met CSS en een class als achtergrondafbeelding gebruiken zal het wel oplossen denk ik? Waarom gebruik je hier eigenlijk geen lijst voor? Het is toch een lijst van afbeeldingen? Dat lijkt me wat beter dan een div, die is meer voor grote pagina delen bedoeld semantisch gezien.

[ Voor 53% gewijzigd door djluc op 15-09-2005 13:38 ]