28111 sujets

CSS et mise en forme, CSS3

Mise en page sur une seule ligne

Modérateur
Bonjour,

pour un site de sport je cherche à mettre sur une seule ligne les éléments suivants:

- logo équipe 1
- nom équipe 1
- « VS »
- nom équipe 2
- logo équipe 2

Le «VS» devant être au centre, le reste aligné dessus.

Jusque là tout va bien mais lorsque le nom de l'équipe est trop long our l'espace disponible ça devient galère à gérer.

J'ai fait un codepen montrant le résultat souhaité et celui obtenu:
https://codepen.io/anon/pen/rzrgGg

Pour le résultat souhaité j'ai ajouté un <br> qui ne sera évidemment pas là.

J'ai tourné le truc dans tous les sens, avec des display table/flex, des whitespace, etc. mais rien n'y fait.

auriez vous une idée?
Modérateur
Ce n'est pas vraiment le problème, je ne vais pas m'attaquer au responsive alors que ça ne marche pas déjà pas comme ça.

Le max-width, je l'ai choisi justement arbitrairement en choisissant une valeur à laquelle ça pose problème pour l'exemple.
Bonjour.

Pourtant, ça n'a pas l'air d'une question de place disponible, car quand on enlève :
.teams h4 span {
	 display: inline-block;
	 vertical-align: middle;
}

on se retrouve avec exactement la même chose.
Smiley confus

Edit : je pense qu'il faudrait enlever des balises dans le HTML… après tout, une seule ligne, ça devrait la situation la plus simple qui soit.

Smiley smile
Modifié par Zelena (25 Aug 2017 - 17:06)
Salut Kusto Smiley smile

C'est pas ma spécialité l'intégration Smiley smile masi moi je dirai que plus de div te sauverai Smiley smile

un div pour le logo un div pour le nom de l'équipe un div pour le VS etc etc etc
les divs feront les sauts de lignes automatiquement.
Tu dis ne pas vouloir rentrer dans le responsive dès maintenant, pourtant c'est plutôt par là qu'il faut commencer que je sache Smiley smile

Un design commence par la vue la plus petite et s'adapte à l'agrandissement Smiley smile du coup c'est toujours propre au final Smiley smile
pchlj a écrit :
C'est pas ma spécialité l'intégration Smiley smile masi moi je dirai que plus de div te sauverai Smiley smile ... Tu dis ne pas vouloir rentrer dans le responsive dès maintenant, pourtant c'est plutôt par là qu'il faut commencer que je sache Smiley smile

+1. Et du coup l'ordre "logo, texte, vs, texte, logo" n'est pas bon, il faudrait de base avoir "logo, texte, vs, logo, texte" puis modifier l'emplacement du logo de la deuxième équipe avec un "order" si l'on est en flex, avec un "caption-side" si l'on est en modèle tabulaire.

Ma solution en flexbox (sans doute a optimiser) : CodePen
Sujet clos
Aller à