28172 sujets

CSS et mise en forme, CSS3

Un span contenant 1 ou 2 lignes

Salut à vous,

Je possède un div (= conteneur) contenant des balises span qui doivent absolument être d'une certaine hauteur (48px) et le texte à l'intérieur doit absolument être centré verticalement.

Seul soucis, certains de ces span vont devoir contenir une seule ligne de texte et d'autres vont en contenir deux.

Comment faire pour que le texte reste centré verticalement peu importe le cas de figure?

Voici mon JSFiddle: http://jsfiddle.net/424y5/

Merci d'avance !!

PS: j'ai lu l'article Centrer verticalement des blocs dans un conteneur de hauteur fluide sauf que mes blocs doivent être de la même hauteur que mon conteneur.
Modifié par Alphonse (15 Apr 2014 - 12:40)
Je résume : toute ma ligne doit être cliquable, chaque colonne est flottante (float: left) et une hauteur de ligne m'est imposée !

Problème : le texte à l'intérieur d'une colonne peut contenir 1 à 2 lignes de texte mais la hauteur doit rester identique dans tous les cas de figure. Que faire et comment faire?

Tout remarque est la bienvenue ! Smiley cligne

Pour rappel, voici mon JSFiddle: http://jsfiddle.net/424y5/
Modifié par Alphonse (15 Apr 2014 - 14:27)
Malheureusement, je ne peux utiliser le "display:table/table-cell".

Dans ton premier jsfiddle (http://jsfiddle.net/424y5/1/), j'ai deux questions :
- pourquoi le texte de la colonne 2 et 3 ne peut-il être centré?
- pourquoi la largeur de la dernière colonne va occuper tout l'espace restant et pas occuper la largeur que je lui ai fournie?
Alphonse a écrit :
Malheureusement, je ne peux utiliser le "display:table/table-cell".

Dans ton premier jsfiddle (http://jsfiddle.net/424y5/1/), j'ai deux questions :
- pourquoi le texte de la colonne 2 et 3 ne peut-il être centré?

Ils le sont
Alphonse a écrit :

- pourquoi la largeur de la dernière colonne va occuper tout l'espace restant et pas occuper la largeur que je lui ai fournie?

relis mon précédent post et fait la relation avec bg et display de a dans le code.

Change le display de <a> et replace la bordure : http://jsfiddle.net/424y5/7/

Tu as confondu : méthode et soluce clé en main
Modifié par 6l20 (16 Apr 2014 - 13:22)
Un élément de type bloc va occuper toute la largeur.
Donc, il aurait fallu définir une largeur à #listing_header?
Mais je suis surpris que "colonne 3" ne fasse pas 82px de large (comme définit) et d'avoir le surplus de la couleur du "div#listing_header".

De plus, si tu fais une capture d'écran :
- colonne 1 fait 220px (au lieu de 212px)
- colonne 2 fait 78px (au lieu de 72px)
Modifié par Alphonse (16 Apr 2014 - 14:21)
tu as dans le css :
.w216px {
	width: 216px;
}
.w74px {
	width: 74px;
}
.w82px {
	width: 82px;
}

<edit> selon l'exemple http://jsfiddle.net/424y5/7/ , les span ont les largeurs declarées.</span>
Tu as aussi , les espace dans le code HTML (white-space+inline-block) entre les boites et le pseudo élément scotché en absolu.

il te reste a gérer ceux-ci aussi, ajoute une couleur de fond à tes <span> , pour visualiser l'espace qu'ils occupent réellement et comprendre l'interaction dû au style entre chaque élements.

display:table est compatible a partir de IE8 en mode de rendu standard. à moins que tu codes pour IE6/7 , je ne comprends pas ta réticence a en faire usage Smiley smile

++

<edit> les white-space , espace dans le code HTML sont sensible au font-size. Il sont identique aux espace entre les mots lorsque tu disposes des element en boite en ligne (inline-block,inline-table).
Modifié par gc-nomade (16 Apr 2014 - 16:42)
On m'impose IE7 malheureusement.
"gc-nomade" a écrit :
les white-space , espace dans le code HTML sont sensible au font-size. Il sont identique aux espace entre les mots lorsque tu disposes des element en boite en ligne (inline-block,inline-table)

Oups, je suis perdu... Smiley ohwell

edit: j'ai bien mis une couleur de fond à mes span, et je vois bien la différence de largeur mais je ne comprends l'artifice à mettre en place qui me permettrait d'avoir la bonne largeur... Smiley decu
Modifié par Alphonse (18 Apr 2014 - 15:17)
pourquoi veut tu le réduire, les bordures en absolute le remplissent ?
http://jsfiddle.net/424y5/9/ , il te suffit de recalibrer le font-size de >a> (voir rremarques précédentes a ce sujet)
gc-nomade a écrit :

&lt;edit&gt; les white-space , espace dans le code HTML sont sensible au font-size. Il sont identique aux espace entre les mots lorsque tu disposes des element en boite en ligne (inline-block,inline-table).

Modifié par gc-nomade (18 Apr 2014 - 16:37)
Afin que mon texte soit réellement centré (horizontalement) dans sa cellule et pas décalé de 4px à gauche. Sinon, il faudrait ajouter un padding-left de 4px mais ça commence à devenir "brouillon".

Et enfin, actuellement, si je souhaite un largeur de colonne de 62px, je dois afficher une largeur de 58px (à cause des 4px du white-space induit par l'inline-block). Et comme le dit l'astuce que tu m'as posté, ces "4px" peuvent être différent d'un navigateur à l'autre.
Alphonse a écrit :
Afin que mon texte soit réellement centré (horizontalement) dans sa cellule et pas décalé de 4px à gauche. Sinon, il faudrait ajouter un padding-left de 4px mais ça commence à devenir &quot;brouillon&quot;.
.

C'est le pseudo element en absolute, sorti du flux et qui se pose la tout simplement qui te trompe, le texte est centré, text-align n'a pas de defaut connus.
Alphonse a écrit :

Et enfin, actuellement, si je souhaite un largeur de colonne de 62px, je dois afficher une largeur de 58px (à cause des 4px du white-space induit par l'inline-block). Et comme le dit l'astuce que tu m'as posté, ces &quot;4px&quot; peuvent être différent d'un navigateur à l'autre.

Relis mes precedents message , et vois le dernier fiddle, ton code te permet de contrôler cette espace, vu que tu imposes déjà un font-size a span.
:)
OK en effet, mais je voudrais que ma "border-left" soit de 1px uniquement, et pas 3 px --> ça ne fonctionne déjà plus...
Et si j'essaye de mettre "margin-left" à -1px, ça ne change rien non plus... d'ailleurs, à quoi sert cette ligne?

Voici le fiddle : http://jsfiddle.net/424y5/10/
Alphonse a écrit :

Et si j'essaye de mettre &quot;margin-left&quot; à -1px, ça ne change rien non plus... d'ailleurs, à quoi sert cette ligne?
/

On va reprendre depuis le début,
tu ne veut pas de display:table/table-cell
tu veux voir tes 3 spans cote à cote séparé de quelque px mais avec un fond qui couvre toute la hauteur.
ta structure + inline-block rend la chose impossible avec des lignes multiples et un centrage horizontale.

donc ,
possibilité : fond dans <a> , + bordure a partir d'un pseudo sur les spans.
mais il ya aussi la possibilité , d'une image de fond via une image ou un gradient (voir : colonnes factices).

Enfin , le pixel perfect, c'est pour le print, pas le web Smiley smile

Je vais m’arrêter là , tu as toutes les infos qu'il faut pour gérer tes span en inline-block
++
Modifié par gc-nomade (18 Apr 2014 - 17:43)
Dis, j'ai encore deux questions :
* comment changer la couleur de fond de toute la première cellule?
* pourquoi ne pas utiliser la propriété float-left à chaque fois finalement?
Sujet clos
Aller à