[html/css] divs "inline" plaatsen

[_Thanatos_]

Ik heb een pagina met een stel thumbnails die gepositioneerd moeten worden aan de hand van de breedte van het venster. Dat kan heel mooi door de <img> tags gewoon achter elkaar te plakken, omdat deze inline zijn.

Maar nu wil ik onder ieder van die images een tekstje kunnen maken. Dus ik dacht gelijk aan divjes. Gewoon een div met daarin een <img>, een <br> en een tekstje. Vervolgens geven we die div diaplay:inline met een stylesheet, maar het gewenste effect wordt niet echt bereikt.

http://www.thany.org/screenshots/Screenshot381.png
Dit krijg ik dan. De dikke zwarte lijn illustreert de border van de div. De dunne grijze lijn illustreert de border van de img.

Dit zit erachter:

Cascading Stylesheet:

div {border: solid 2px black; display: inline}
img {border: solid 1px gray}

HTML:

<div>
  <img width=160 height=120><br>
  tekstje
</div>

An sich is dit logisch, want een inline element behoort zich zo te gedragen, maar het doet dus niet wat ik wil. Iemand misschien een idee? Ik wil geen tables gebruiken (die komen toch onder elkaar) en iets anders, sja...

[Genoil]

float:left gebruiken op de div?

[ Voor 20% gewijzigd door Genoil op 23-05-2005 22:43 ]

[Rowanov]

Als je het dan toch goed wil doen, zet dan ook gewoon die width en height in je stylesheet, ik neem aan dat je niet verschillende grootte thumbs hebt. Heb je dat wel, regel het dan gewoon met een class want css en deze attributen door elkaar gebruiken is een beetje ranzig.

[_Thanatos_]

Amazing, wat een float:left al niet kan doen!
Ik moet alleen oppassen dat ik binnen die div niet een block element ga gebruiken, maargoed.

Hoe kan dit nou zoveel uitmaken

Rowanov, jajaja klopt, dit is ook maar een testje. In werkelijkheid is het allemaal heel dynamisch.

[ Voor 23% gewijzigd door _Thanatos_ op 23-05-2005 22:49 ]

[Eijkb]

Een div is toch ook geen inline maar een block? Als inline kan je span gebruiken ipv div.

[Boelie-Boelie]

Het kan ook nog met definition lists of met unordered lists i.p.v. divs (en is eigenlijk ook wel een beter idee).

[gvanh]

Zelf zet ik de DIV juist altijd WEL op display:block (niet expliciet natuurlijk, omdat hij dat standaard al is). Daarna float:left, en klaar is kees ... ik heb dan ook altijd wel gewoon de mogelijkheid om de DIV te vullen met andere block-stijl elementen.

Je moet dan natuurlijk wel voor je DIV expliciet de hoogte en breedte aangeven, anders wordt hij uiteraard 100% breed.

Dit systeem heb ik bijvoorbeeld hier toegepast.

[Verwijderd]

als je elementen float is het display property niet meer van toepassing, dus wat je daar in vult doet er helemaal niet meer toe.

Verder is float hier eigenlijk niet echt voot bedoelt, maar het is op het moment het enige dat fatsoenlijk crossbrowser werkt. Eigenlijk is display: inline-block hiervoor dé methode.

Verder voor het toevoegen van een onderschrift aan een <img> vind ik op dit moment een <dl> de beste oplossing. De allermooiste oplossing imho is met CSS de inhoud van het title attribuut eronder plakken, maar dat werkt alleen in Opera

[cutter]

Ik gebruik voor dit soort matrix achtige positioneringen gewoon de veel vervloekte <table> tags. Daar zijn die dingen oorspronkelijk namelijk ook voor bedoeld totdat iedereen ze ontdekte om ook elementen in pagina's te positioneren.

[Verwijderd]

mag jij me vertellen in welk opzicht een rijtje plaatjes tabulaire data is
het zou best kunnen, maar in dit geval is het gewoon een lijstje met plaatjes en dient dan ook zo in HTML te worden gezet. Floaten en klaar ben je. En je hebt een variabel aantal kolommen als bonus erbij.

[_Thanatos_]

Een tabel? En hoe vertel ik de tabel dan het aantal kolommen aangepast moet worden aan de breedte van het browservenster?

enne, display:inline-block ken ik helemaal niet
Ik ken alleen inline, block, fixed en static... Is dat iets van CSS3 ofzo?

[Verwijderd]

CSS 2.1. En je haalt 'display' en 'position' door elkaar. (Er zit wel een relatie tussen de twee, maar het blijven aparte properties.)

[Spruit_elf]

_Thanatos_ schreef op zaterdag 28 mei 2005 @ 20:59:
Een tabel? En hoe vertel ik de tabel dan het aantal kolommen aangepast moet worden aan de breedte van het browservenster?

enne, display:inline-block ken ik helemaal niet
Ik ken alleen inline, block, fixed en static... Is dat iets van CSS3 ofzo?

http://www.w3.org/TR/CSS21/visuren.html#propdef-display
er zijn er nog wel maar maar inline en block zijn volgens mij de enige nuttige die echt fatsoenlijk cross browser werken

[Verwijderd]

overzichtje:
http://www.quirksmode.org/css/display.html