Horizontaal scrollende afbeeldingen met tekst

[mcdronkz]

Zit al enige tijd met dit probleem in m'n maag gesplitst, en krijg het maar niet opgelost.

Ik wil een lijst met foto's hebben die je verticaal kunt scrollen. Onder elke foto moet een naam komen te staan. Het maken van de lijst was geen probleem, het positioneren van de naam wel.

Ik heb nu het volgende:



Zoals je ziet staat de naam naast de afbeelding, in plaats van eronder. Een margin geven werkt niet omdat het een inline element is. Wanneer ik er een block element van maak, worden de afbeeldingen niet meer naast elkaar weergegeven.

Dit is de relevante code:

HTML:

<ul> 
    <li><a href="photographer-1.html"><img src="images/photographers/thumbnails/1.jpg" alt=""> <span class="name">Oscar Munar</span></a></li> 
    <li><a href="photographer-2.html"><img src="images/photographers/thumbnails/2.jpg" alt=""> <span class="name">Maria Simon</span></a></li> 
</ul>

Cascading Stylesheet:

#photographers #thumbnails {
    width: 400px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#photographers #thumbnails li {
    display: inline;
}

Wat ik ook doe met de <span>, het geeft geen gewenst resultaat. Margins of paddings doen niet wat ik wil, block elements maken de hele lijst met afbeeldingen kapot.

Wat is nu de fraaiste manier om dit op te lossen?

[MoietyMe]

Maak van die span een H2/H3 of hoe ver het ook mag zitten in je Hiërarchie.

<li>'s naast elkaar moet gewoon met float:left doen i.p.v. display:inline.

[Ssander]

Om de li naast elkaar te plaatsen kun je ook "float: left;" gebruiken (display: inline; verwijderen). Je kunt dan de spans een "display: block;" geven (of gewoon een div gebruiken).

[Wiethoofd]

is een simpele <br> tussen de <img /> en <span> geen oplossing?

[MoietyMe]

Ssander schreef op woensdag 13 oktober 2010 @ 15:47:
Om de li naast elkaar te plaatsen kun je ook "float: left;" gebruiken (display: inline; verwijderen). Je kunt dan de spans een "display: block;" geven (of gewoon een div gebruiken).

Waarom een <div> gebruiken als er genoeg semantische elementen zijn om dit netjes op te lossen.

[moozzuzz]

Wiethoofd schreef op woensdag 13 oktober 2010 @ 15:48:
is een simpele <br> tussen de <img /> en <span> geen oplossing?

Inderdaad gecombineerd met een

Cascading Stylesheet:

#photographers #thumbnails li { 
    text-align: center; /* assuming you want it centered :-) */
}

[Ssander]

Good Fella schreef op woensdag 13 oktober 2010 @ 15:48:
[...]

Waarom een <div> gebruiken als er genoeg semantische elementen zijn om dit netjes op te lossen.

Je hebt gelijk. Wanneer ik een span een 'display: block;' wil geven ben ik in de eerste instantie altijd geneigd om er een div van te maken, om daarna pas naar (semantisch betere) alternatieven te kijken.

[Bosmonster]

Wiethoofd schreef op woensdag 13 oktober 2010 @ 15:48:
is een simpele <br> tussen de <img /> en <span> geen oplossing?

br's gebruiken voor opmaak is nooit een oplossing

Snap het probleem niet zo. Maak die afbeeldingen display:block met wat marge aan de onderkant en je bent klaar (als dat problemen met de inline-blocks geeft, zorg voor juiste afmetingen van die afbeeldingen en/of op je inline-blocks)

[ Voor 32% gewijzigd door Bosmonster op 13-10-2010 18:23 ]

[mcdronkz]

Ik heb nu het volgende:

HTML:

<ul> 
    <li> 
        <a href="photographer-1.html"> 
            <img src="images/photographers/thumbnails/1.jpg" alt=""> 
            <h2>Oscar Munar</h2> 
        </a> 
    </li> 
    <li> 
        <a href="photographer-2.html"> 
            <img src="images/photographers/thumbnails/2.jpg" alt=""> 
            <h2>Maria Simon</h2> 
        </a> 
    </li> 
</ul>

Cascading Stylesheet:

#photographers #thumbnails ul {
    width: 400px;
    height: 300px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#photographers #thumbnails li {
    display: block;
    float: left;
    margin-right: 15px;
}

Dat zorgt ervoor dat de namen keurig onder de afbeeldingen geplaatst worden, maar is niet de oplossing voor m'n probleem omdat de overflow-x niet 'in werking treed'. De afbeeldingen komen onder elkaar te staan i.p.v. naast elkaar met een horizontale scrollbar.

Ik kan iets over het hoofd gezien hebben, maar bij alle oplossingen die in dit topic worden aangedragen, blijft dit probleem steeds optreden.

[Bosmonster]

Je kunt een horizontale scroll niet automatisch automatisch laten plaatsvinden, aangezien dit tegen de verticale flow van het document is. Je zult of je element breder moeten maken dan de viewport of met absolute positionering moeten werken.

Let overigens wel op dat de H2 binnen de A alleen mag in HTML5

[R4gnax]

Bosmonster schreef op donderdag 14 oktober 2010 @ 13:00:
Je kunt een horizontale scroll niet automatisch automatisch laten plaatsvinden, aangezien dit tegen de verticale flow van het document is.

Kun je wel. Je plaatjes inline-block maken en de container waar deze in staan white-space: nowrap geven.

[Bosmonster]

Als je dat met li's of div's wilt doen bijvoorbeeld moet je wel zorgen voor een IE6/7 fix, aangezien die geen inline-block ondersteunen.

[MoietyMe]

Bosmonster schreef op vrijdag 15 oktober 2010 @ 11:07:
Als je dat met li's of div's wilt doen bijvoorbeeld moet je wel zorgen voor een IE6/7 fix, aangezien die geen inline-block ondersteunen.

Was dat niet alleen voor block elementen? Dacht dat IE6 of in ieder geval IE7 dat wel ondersteunde voor inline elementen.

[Bosmonster]

Ja sort of, maar als je dus li's hebt bijvoorbeeld, wat wel zo standaard is met dit soort controls, wordt het al wat lastiger dus. Je wilt dit soort dingen niet echt opbouwen met spans ofzo

[R4gnax]

Bosmonster schreef op vrijdag 15 oktober 2010 @ 11:22:
Ja sort of, maar als je dus li's hebt bijvoorbeeld, wat wel zo standaard is met dit soort controls, wordt het al wat lastiger dus. Je wilt dit soort dingen niet echt opbouwen met spans ofzo

Conditional IE6/7 CSS sheet en daar je li's display: inline maken en layout er op triggeren. (bijv. met zoom: 1).
En done: inline-block.