[Résolu] LI, display:inline et balises P & Hx

Bonjour (et bonne année...)

Je cherche à utiliser faire le Slideshow en CSS que l'on peut lire ici :
http://www.alsacreations.com/tuto/lire/1052-ID-slideshow-css3-target-animation-keyframes-introduction.html

Et donc, pour ne pas faire défiler des images, mais du texte, j'ai écrit un truc du genre :

<ul id="sContent">
<li><p>Lorem Ipsum....</p></li>
<li><p>Lorem Ipsum....</p></li>
<li><p>Lorem Ipsum....</p></li>
</ul>

avec la feuille de style associée et dont l'extrait qui nous intéresse est :

li {
display: inline;
}

Et là, c'est le drame....
Le fait d'avoir des balises P (et H4, H5) dans les éléments de ma liste "annule" l'affichage en ligne demandé.

Je ne sais pas trop par quel bout prendre ce problème et surtout, je ne vois pas quoi mettre sur la balise P ou Hx pour ne pas avoir ce souci.

Une idée ?

Merci

A+ / Fabrice
Modifié par Kleduts (16 Jan 2012 - 13:48)

J'avais trouvé un truc du genre :

display:inline-table

Mais cela ne marche pas comme il faut...

A+ / F.
Modifié par Kleduts (14 Jan 2012 - 10:40)

Et euh, au pif... un display:inline sur tes paragraphes aussi?
Sinon avec des LI en display:inline-block ça doit être jouable.

Oui, inline-block fonctionne.
Mais j'avoue que je n'ai jamais compris pourquoi inline ne suffisait pas.

Bonjour,

Le problème a été résolu, mais la tâche a été ardue...
La difficulté provient des éléments de chaque onglet : des titres et des paragraphes.

Il existe moultes exemples de slideshow avec des images, mais rarement du contenu textuel.
Par ailleurs, si l'on se contente d'un bout de texte sans titre ni paragraphe la solution utilisée pour les images fonctionne.

Au final le code devient :

<div id="slideshow">
	<div id="sContent">
		<div class="elem">
			<h4>Titre 1</h4>
			<h5>Titre 1.1</h5>
			<p>
				Lorem ipsum...
			</p>
			<h5>Titre 1.2</h5>
			<p>
				Lorem ipsum...
			</p>
		</div>

		<div class="elem">
			<h4>Titre 2</h4>
			<p>
				Lorem ipsum...
			</p>
		</div>

		<div class="elem">
			<h4>Titre 3</h4>
			<h5>Titre 3.1</h5>
			<p>
				Lorem ipsum...
			</p>
			<h5>Titre 3.2</h5>
			<p>
				Lorem ipsum...
			</p>
		</div>
	</div>
</div>

Et le CSS :

@-moz-keyframes AutoSlide {
    0%,  30%, 100% {
        margin-left: 0px; 	/*1ère pavé */
    }
    33%, 63% {
        margin-left: -98%; /*2ème pavé */
    }
    66%, 96% {
        margin-left: -196%; /*3ème pavé */
    }
}

@-webkit-keyframes AutoSlide {
    0%,  30%, 100% {
        margin-left: 0px; 	/*1ère pavé */
    }
    33%, 63% {
        margin-left: -96%; /*2ème pavé */
    }
    66%, 96% {
        margin-left: -192%; /*3ème pavé */
    }
}

div#slideshow {
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: auto;
}

La solution est venue du "inline-table".

Vous remarquerez que les valeurs de transitions ne sont pas les mêmes sous Firefox et sous Webkit.
Pour pallier à ce problème (annexe) de calage, j'ai mis une grosse marge autour (margin: 3%;) et ainsi, les défauts de la transitions sont moins visibles.

Voilà
Vos remarques, critiques et commentaires sont les bienvenus.

Bonne journée

A+ / F.

À vue de nez:
- du display:inline-block devrait suffire (pas certain de comprendre l'intérêt du inline-table);
- pas fan de ces valeurs en pourcentages déterminées au doigt mouillé (-96%, -192%), il y a peut-être un moyen de travailler avec des valeurs rondes (-100%, -200%) en surveillant un peu les dimensions des éléments et les écarts entre eux.

Effectivement, le inline-block suffit.

Pour les %, j'ai essayé avec des valeurs fixes (100%, 200%, etc...) mais j'obtenais des décalages disgracieux.
J'ai essayé d'utiliser la fonction CSS3 "calc", mais le résultat n'a pas été à la hauteur de mes attentes....

Bonne journée

A+ / F.