Discussion :

[PascalAC21]

Bonjour,

Je me trouve face à un span récalcitrant dont je ne comprends pas le positionnement.

Bon, je ne parviens pas à insérer mon code, donc je vais joindre mes pages.

Premier lien , le code html, deuxième pour les css.

Page page s'organise comme suit :
1 - div de fond en position centrée pour délimiter la zone du site.
2 - Premier div avec un bandeau.
3 - Première série de 3 spans (colonne1_up, colonne2_up et colonne3_up), avec le premier en float left, pas de soucis.
4 - Juste en dessous doit venir une seconde série (colonne1, colonne2 et colonne 3).
Chaque span a une width en %. Le premier est encore vide, parce que je n'ai pas encore fait l'image qui s'y trouvera. Le second a une image et le troisière un paragraphe avec du texte.

Et là, c'est le drame () :
En laissant les spans seuls, le premier disparaît, et le troisième vient se coller au-dessous du deuxième - je croyais justement que les spans étaient des éléments en ligne...
Je les ais inséré dans un div sans paramètre particulier : cette fois-ci, le premier ne disparaît plus, mais le troisième se trouve toujours au-dessous du second...

Ma question est assez simple : qu'est-ce que je ne fait pas correctement ?
Vaut-il mieux ne pas se servir des span et tout remplacer par des ul li ?

merci de votre aide.

[Invité]

Bonjour,
Ce ne sont pas des <span> qu'il faut mettre, mais des <div>.
Ton problème vient du fait que <span> est une balise "inline", alors que <div> est une balise "block".

=> Div et CSS : une mise en page rapide et facile.

[PascalAC21]

Bonjour et merci de ta réponse.
Désolé pour le délai, mais j'ai pas eu le temps de m'en occuper avant.

Bon alors,

j'ai essayé de remplacer les span par des div, mais cela ne réglait pas mon problème. (la 3eme partie venait toujours sous la seconde).
J'ai testé aussi en remplaçant par des ul li en display inline, mais rien de mieux.
J'ai essayé de passer le p en inline aussi : le comportement est très bizarre, la première ligne de texte se retrouve à la bonne place, mais toutes les autres reviennent sous la partie 2, comme si le fait de mettre le p en iline séparait toutes les lignes du paragraphe.

Finalement, je m'en suis sorti en rempaçant les span par des div, en nommant le div conteneur, en ajoutant un display inline pour les div dans le conteneur, et en mettant le premier en float left, et le troisième en float right.
J'ai du aussi calculer la taille du div central, parc que sinon, je ne parvenais pas à centrer l'image à l'intérieur.

Il y a forcément quelque chose de bancal ici.

Je ne comprend pas pourquoi les éléments en ligne ne s'alignent pas comme pour l'entête...