[HTML/CSS]images met daaronder tekst naast elkaar

Pagina: 1
Acties:
  • 2.106 views sinds 30-01-2008
  • Reageer

Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
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 ]


Acties:
  • 0 Henk 'm!

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

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.

Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
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.

Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
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

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

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.

Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
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 ]


Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
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:
1
2
3
4
5
<div id="container">
  <div><img blaat>text</div>
  <div><img blaat>text</div>
  <div><img blaat>text</div>
</div>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
#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 ]

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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:
1
2
3
4
5
6
7
8
9
    #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 :P Trage ik...

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


Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
_/-\o_ tx a lot :)

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

Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
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?

Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
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

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
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

Acties:
  • 0 Henk 'm!

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Je wilt de container centreren?
Cascading Stylesheet:
1
2
3
4
5
6
7
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 :P

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


Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
die 2 zijn nieuw ;)

Cascading Stylesheet:
1
text-align: center;
is voor text (inline zut, dus ook plaatjes)

Cascading Stylesheet:
1
2
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:
1
2
3
4
5
6
7
8
<body>
  <div id="container">
    <div class="blokje"></div>
    <div class="blokje"></div>
    <div class="blokje"></div>
    <div class="blokje"></div>
  </div>
</body>


Cascading Stylesheet:
1
2
3
4
5
6
7
#container {
  text-align: auto;
}

.blokje {
  display: inline
}

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

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
Hier even een plaatje wat ik bedoel.
Je wilt de container centreren?
Cascading Stylesheet:
1
2
3
4
5
6
7
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 ]


Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
zie mijn post hierboven, stukje met display: inline zou moeten werken

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

Topicstarter
Cascading Stylesheet:
1
2
3
4
5
6
7
#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.

Acties:
  • 0 Henk 'm!

  • Wwwillem
  • Registratie: Juni 2005
  • Niet online
Verander je css naar dit:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
#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 ]


Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
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 ]

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Zillion01
  • Registratie: Juni 2001
  • Laatst online: 22-11-2023

Zillion01

Obey your screen!

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

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
#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 ]


Acties:
  • 0 Henk 'm!

  • TheDane
  • Registratie: Oktober 2000
  • Laatst online: 16:38

TheDane

1.618

*le kick*

Ik heb eigenlijk precies 't zelfde probleem.
Afbeeldingslocatie: http://okdag.nl/tmp/scrolly.JPG


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    #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? :>

Acties:
  • 0 Henk 'm!

  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 22-07-2024
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..

This message was sent on 100% recyclable electrons.


Acties:
  • 0 Henk 'm!

  • Grijze Vos
  • Registratie: December 2002
  • Laatst online: 28-02 22:17
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.

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info


Acties:
  • 0 Henk 'm!

  • TheDane
  • Registratie: Oktober 2000
  • Laatst online: 16:38

TheDane

1.618

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 :P

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 ...
Pagina: 1