[HTML/CSS]images met daaronder tekst naast elkaar

[Zillion01]

In een pagina met een vaste breedte van 800 pixels wil ik een serie images die ieder hun eigen onderschrift hebben naast elkaar laten zetten. De images hebben verschillende afmetingen. Als ik in html gewoon zeg :

[img]"/images/plaatje1.gif"[/img][img]"/images/plaatje2.gif"[/img][img]"/images/plaatje3.gif"[/img][img]"/images/plaatje4.gif"[/img] etc. etc.

dan worden de images netjes naast elkaar geplaatst voor zover dat nog mag in de breedte en anders naar een nieuwe regel.

Maar nu wil ik onder ieder plaatje een klein tekstje zetten (o.a. titel) en dit eveneeens zo naast elkaar laten plaatsen (dus blokken van image met daaronder tekstjes naast elkaar). Kan dit met CSS door gebruik te maken van divs / classes / float?

Met tabellen lukt het niet en onlangs redelijk veel voorbeelden bekeken met CSS kwam ik dit niet echt tegen..

tx

[ Voor 30% gewijzigd door Zillion01 op 09-03-2006 15:23 ]

[Rowanov]

Met css kan het prima, door een container een vaste breedte te geven en de plaatjes (al dan niet verwerkt in een definition list of andere list) te floaten.

[Zillion01]

maarre bedoel je nu dat ieder blok (=image met onderschrift) een vaste breedte krijgt dan? dat wil ik juist niet wat ik heb plaatjes van verschillende breedtes, zoals bijv. bijna max pagina breedte tot 100 pixels.

[BasieP]

het is in dat geval tabular data, en zou dus in een table moeten.

als je het niet in een table wilt kan je idd text in bijv. divjes zetten en deze links laten floaten. Deze geef je dan dezelfde breedte als je plaatje. en het zou mmoeten werken

echter, als je plaatjes dynamische grotes hebben word het alweer lastiger.

kortom:
TABLE

[Rowanov]

Daar ben ik het niet mee eens, je hoeft je list of dl helemaal geen width te geven om ze normaal te floaten. Alleen de container breedte is belangrijk.

[Zillion01]

Met een tabel kan dat volgens mij echt niet hoor, want bijv.

<td>[img]"test1.gif"[/img]<br />onderschrift1</td> <td>[img]"test2.gif"[/img]<br />onderschrift2</td> <td>[img]"test3.gif"[/img]<br />onderschrift3</td>

wordt echt niet naar een nieuwe regel gezet als de breedte op is ondanks dat je de tabel op bijv. 800 pixels hebt vast gezet.

Kun je eens uitleggen waar je container breedte nou voor dient in jouw voorbeeld?

[ Voor 20% gewijzigd door Zillion01 op 09-03-2006 15:44 ]

[BasieP]

Kojak2001 schreef op donderdag 09 maart 2006 @ 15:42:
Met een tabel kan dat volgens mij echt niet hoor, want bijv.

<td>[img]"test1.gif"[/img]<br />onderschrift1</td> <td>[img]"test2.gif"[/img]<br />onderschrift2</td> <td>[img]"test3.gif"[/img]<br />onderschrift3</td>

wordt echt niet naar een nieuwe regel gezet als de breedte op is ondanks dat je de tabel op bijv. 800 pixels hebt vast gezet.

Kun je eens uitleggen waar je container breedte nou voor dient in jouw voorbeeld?

ow je bedoelt simpelweg dat je plaatjes ook doorschuiven naar nieuwe regel.. nou dan idd gewoon divjes flaoten...

HTML:

<div id="container">
  <div><img blaat>text</div>
  <div><img blaat>text</div>
  <div><img blaat>text</div>
</div>

Cascading Stylesheet:

#container {
  width: 800px;
}

#container div {
  float: left;
  width: 100px; /* breedte van je plaatjes */
}

edit:
die breedte van de divjes hoeft niet, maar ik denk dat je dan wel gauw je text helemaal niet wrapt omdat ie de divjes gaat 'wrappen'

[ Voor 19% gewijzigd door BasieP op 09-03-2006 15:51 ]

[Rowanov]

Om de floats tegen te houden; je hebt dus een blok van 800px waar binnen de kleinere blokjes (foto's met onderschrift vormen 1 blokje) zich plaatsen. Met floats is het zo dat als het niet past binnen de 800px van de container, hij automagisch op de volgende regel verder gaat.

Edit: ik maak wel even een voorbeeld. Hier een voorbeeldje. Let maar niet op de inline styles; die staan er alleen omdat ik geen zin had om 4 formaten plaatjes te laten zien.

Allereerste de html; ik had het ook kunnen oplossen met een definition-list, wat misschien netter is:

HTML:

<div id="container">

    <div class="picture-box">
        [img]"foto.gif"[/img]
        <p>Hier je bescrijving voor plaatje 1</p>
    </div>
    
    <div class="picture-box">
        [img]"foto.gif"[/img]
        <p>Hier je bescrijving voor plaatje 2</p>
    </div>
    
    <div class="picture-box">
        [img]"foto.gif"[/img]
        <p>Hier je bescrijving voor plaatje 3</p>
    </div>
    
    <div class="picture-box">
        [img]"foto.gif"[/img]
        <p>Hier je bescrijving voor plaatje 4</p>
    </div>

</div>

De css code:

Cascading Stylesheet:

    #container {
        width: 800px; /* vaste breedte */
        overflow: auto; /* om de floats te clearen */
        border: 2px solid red; /* ter verduidelijking */
    }
    .picture-box {
        float: left;
        border: 2px solid red; /* ter verduidelijking */
    }

Zoals je ziet passen de plaatjes niet op 1 regel als je de breedtes bij elkaar optelt. Daarom staat de vierde ook op een andere regel. Hier de werkende versie.

Edit 2: je hebt gelijk over het wrappen van de tekst; als de tekst een x-overflow geeft rekt de foto wrapper op.

Kappen nou BasieP Trage ik...

[ Voor 105% gewijzigd door Rowanov op 09-03-2006 16:10 ]

[Zillion01]

tx a lot

ik was al aan de slag gegaan met php om het op te lossen, maar dit is beter

[Zillion01]

Hier de werkende versie.

Align center of iets dergelijks werkt hier niet bij, of niet? Is daar nog iets op te bedenken, dus de voorbeelden hierboven gecentreerd ipv links uitgelijnd?

[BasieP]

Kojak2001 schreef op zaterdag 01 april 2006 @ 12:03:
[...]


Align center of iets dergelijks werkt hier niet bij, of niet? Is daar nog iets op te bedenken, dus de voorbeelden hierboven gecentreerd ipv links uitgelijnd?

google:
http://www.google.nl/sear...rg.mozilla:en-US:official

[Zillion01]

Ja hoor es ik heb heus wel dingen al geprobeerd hoor :

bijv. de code tussen <div style="text-align:center; width:800px;"> zetten,

en combi's met

align=center
float :center
textalign :center
margin-left: auto
margin-right: auto

etc. dat werkt allemaal niet die float:left blijft de baas om een of andere reden

[Rowanov]

Je wilt de container centreren?

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}

Edit: verkeerd gelezen, twee tellen, ik kijk even

Lukt even niet, nu geen tijd om te pielen

[ Voor 29% gewijzigd door Rowanov op 01-04-2006 13:13 ]

[BasieP]

Kojak2001 schreef op zaterdag 01 april 2006 @ 12:20:
float :center
textalign :center

die 2 zijn nieuw

Cascading Stylesheet:

text-align: center;

is voor text (inline zut, dus ook plaatjes)

Cascading Stylesheet:

margin-left: auto;
margin-right: auto;

is voor block elementen (divjes etc.)

edit:
verder klopt het dat een float boven alignen gaat.

weet niet precies wat jij nou bedoelt, maar ik dacht dat je het over de text onder de plaatjes had..
deze moet gewoon met text-align lukken

omdat dat onderste blok te centereren zou je OF gewoon tables moeten gebruiken (wat ik al 30 posts zeg) of op de een of andere JS methode gaat 'floaten' zonder in css de 'float' optie te gebruiken..


edit2:
werkt dit niet gewoon:

HTML:

<body>
  <div id="container">
    <div class="blokje"></div>
    <div class="blokje"></div>
    <div class="blokje"></div>
    <div class="blokje"></div>
  </div>
</body>

Cascading Stylesheet:

#container {
  text-align: auto;
}

.blokje {
  display: inline
}

[ Voor 57% gewijzigd door BasieP op 01-04-2006 13:52 ]

[Zillion01]

Hier even een plaatje wat ik bedoel.

Je wilt de container centreren?

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  margin: 0 auto;
  text-align: left;
}

dit had ik ook al meteen geprobeerd, maar die float left verhindert dat..
En bassie met tables gaat dat echt niet hoor.

[ Voor 8% gewijzigd door Zillion01 op 01-04-2006 13:42 ]

[BasieP]

zie mijn post hierboven, stukje met display: inline zou moeten werken

[Zillion01]

Cascading Stylesheet:

#container {
  text-align: auto;
}

.blokje {
  display: inline
}

text-align:auto; ? dat bestaat toch niet?

Anyways dit is het resultaat als je dat toepast

Wellicht bedoelde je margin: auto maar dat geeft zelfde resultaat.

Het alleen toevoegen van display:inline op de code van Rowanov levert geen verschil.

[Wwwillem]

Verander je css naar dit:

Cascading Stylesheet:

#container {
    text-align: center;
    border: 2px solid red;
}

.picture-box {
    border: 2px solid red;
    display: inline
}

p {
    display: inline;
}

Edit: Oh, dan staat de tekst er natuurlijk naast. Anders doe je een BR, maar dat heb je ook liever niet zeker.

[ Voor 22% gewijzigd door Wwwillem op 01-04-2006 17:23 ]

[BasieP]

Kojak2001 schreef op zaterdag 01 april 2006 @ 17:10:
[...]


text-align:auto; ? dat bestaat toch niet?

mm sorry, bedoelde idd center..

[ Voor 3% gewijzigd door BasieP op 01-04-2006 18:02 ]

[Zillion01]

Wwwillem schreef op zaterdag 01 april 2006 @ 17:17:
Verander je css naar dit:

Cascading Stylesheet:

#container {
    text-align: center;
    border: 2px solid red;
}

.picture-box {
    border: 2px solid red;
    display: inline
}

p {
    display: inline;
}

Edit: Oh, dan staat de tekst er natuurlijk naast. Anders doe je een BR, maar dat heb je ook liever niet zeker.

Die tekst komt er dan idd niet onder, met een <BR> komt de boel niet meer naast elkaar.

Hmm vindt dit maar pittig, hoop maar dat dit kan met CSS. Ik kan het denk ik wel in PHP oplossen, maar ja ik zou CSS iets prettiger vinden.

[ Voor 8% gewijzigd door Zillion01 op 01-04-2006 18:55 ]

[TheDane]

*le kick*

Ik heb eigenlijk precies 't zelfde probleem.

HTML:

<div id="theImages">        
    <div class='bb'>
        <div style='height: 100px;'><a href="#" onclick="showDetails('plaatje);return false"><img class='thumb' src="images/thumbnails/plaatje1.jpg"></a></div>
        <div class='thumbTitle'>title plaatje 1</div>
    </div>
    <div class='bb'>
        <div style='height: 100px;'><a href="#" onclick="showDetails('plaatje);return false"><img class='thumb' src="images/thumbnails/plaatje2.jpg"></a></div>
        <div class='thumbTitle'>title plaatje 2</div>
    </div>
    <div class='bb'>
        <div style='height: 100px;'><a href="#" onclick="showDetails('plaatje);return false"><img class='thumb' src="images/thumbnails/plaatje3.jpg"></a></div>
        <div class='thumbTitle'>title plaatje 3</div>
    </div>
</div>

en

Cascading Stylesheet:

    #theImages{
        position:absolute;
        height:140px;
        left:20px;
        float: left; 
        width: 240px;
        overflow: auto;
        clear: none;
    }
    .bb {
        float: left;
        display: inline;
        width: 100px;
        padding-left: 2px;
    }
    .thumb {
        border: 1px solid black;
        margin-left: 5px;
        margin-right: 5px;
    }

Wat dus de bedoeling is, is dat alle plaatjes naast elkaar staan, met de titels er netjes onder.
Maar ik krijg geen horizontale scrollbar, de plaatjes die niet meer naast elkaar passen willen persé naar een nieuwe regel. En da's dus niet de bedoeling.

Ik heb voor m'n gevoel al alle varianten met float en display gehad, maar 't lukt me maar niet.

Iemand een idee?

[BasieP]

de plaatjes die niet meer naast elkaar passen willen persé naar een nieuwe regel. En da's dus niet de bedoeling.

das toch juist wat WEL de bedoeling is?
das het hele idee van floats..

of ik begrijp je verkeerd natuurlijk..

[Grijze Vos]

Mja, door ze te floaten passen ze zichzelf aan aan de breedte van je container, en gaan ze naar een nieuwe regel als het niet meer past.

[TheDane]

BasieP schreef op donderdag 03 mei 2007 @ 13:07:
[...]
das toch juist wat WEL de bedoeling is?
das het hele idee van floats..

of ik begrijp je verkeerd natuurlijk..

In dat geval ben ik n00b

De bedoeling is dat ze allemaal op 1 regel komen, zonder nieuwe regel, maar met horizontale scrollbar als ze meer ruimte in beslag nemen dan de maximale breedte van de container. (dus als er 3 of meer plaatjes zijn) (want de container is 240px breed, en plaatjes 100px per stuk.)


Ik dacht dat ik dan float: left + display: inline nodig had ...