Discussion :

[laurentSc]

Bonsoir,

comme j'ai un problème d'affichage sur changement de langue, j'ai créé une page beaucoup plus simple mais qui reproduit quand même le problème :

Code html+PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<table class="table_indexinc">
 
	<tr>
		<td><div class="width-half"><?php echo $str[25];?></div></td>
		<td><div class="width-half"><?php echo $str[34];?></div></td> </tr>
	<tr>
		<td><div class="width-half">text1</div></td>
		<td><div class="width-half">text2</div></td> </tr>
	<tr>
		<td><div class="width-half">text1</div></td>
		<td><div class="width-half">text2</div></td> </tr>	
 
	</table>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.width-half {
 width:50%;
 }

Quand la langue change, le contenu du tableau $str change (traduction) et la seconde colonne se déplace : comment éviter cela ?

[friendofweb]

Bonjour,

Si tu changes de langues ça veut dire que la longueur de ton texte peut être différente, donc largeur de la cellule.. Je suis débutant comme toi, à ta place, je ferais une test en affichant le tableau (border) : http://codepen.io/anon/pen/aOeqMo, j'ai modifié la largeur à 100%.

J'espère que ça t'aide.

[Invité]

Bonjour au(x) débutant(s), donc,

Vous pouvez commencer par là :

• Les tableaux (XHTML & CSS)

@Laurent
Je te l'ai déjà dit : DORS LA NUIT, et OUVRE LES YEUX LE MATIN !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td><div class="width-half">......</div></td>

Question n°1 :
Tu t'es demandé sur quel élément tu appliquais le width:50%; ?

Réponse : Sur le <div> !!! Qui de fait, fait 50%.... de la cellule qui le contient.
La cellule, elle garde une largeur libre... qui s'adapte... au contenu !! (et le serpent se mord la queue !)

Solution : appliquer les 50% DIRECTEMENT au td !!

Question n°2 :
Trouves-tu alors nécessaire d'appliquer la class aux td de toutes les lignes de la table ?

Réponse : non, car on n'a jamais vu de table dont les cellules d'une même colonne pouvaient avoir des largeurs différentes !

Solution : on l'applique juste sur les td de la première ligne, ou MIEUX : voir l'article ci-dessus cité.

[friendofweb]

Merci, je mets le lien dans mes favoris, car pour l'instant je jongle avec un bouquin (CSS3 et HTML5) et votre forum.

[laurentSc]

@friendofweb : moi, je suis le roi de la longévité : débutant après 9 ans et plus de 5000 posts ! Bon, jreaux62, les erreurs que je fais encore justifient mon statut, je le reconnais.
Et dans mes favoris, je suis noyé par les pages car comme friendofweb, quand j'en trouve une bien, je la mets dans mes favoris, sauf qu'aujourd'hui, j'ai les rubriques suivantes : accessibilité (et dedans, j'y ai retrouvé la page citée par jreaux62), astuces, css, forum html (dans laquelle j'ai mis tous les forums dvp), Framework, free, javascript, pdo, php, poo, référencement, sql, WordPress, MVC, html, AJAX, html5, firebug (avec 4 ou 5 (ou plus) pages environ par rubrique). Bon, bien souvent la dernière fois que j'ai consulté une page est le jour où je l'ai mise dans mes favoris...

@jreaux62 : merci pour ta pédagogie Jérôme (de la question n°1, car malgré mon code, la question n°2 était évidente pour moi). (Et mon problème, même si je ne l'ai signalé que cette nuit, je l'avais constaté avant le coucher du soleil, mais n'ai pas eu le temps de le signaler avant). (au moins, je ne cherchais pas, comme l'autre jour, à modifier la largeur d'un span !)

[Invité]

DORS LA NUIT, et OUVRE LES YEUX LE MATIN !

Et j'ajoute :
POSE-TOI LES BONNES QUESTIONS !
Ca ne sert à rien d'avoir de la doc à foison, et être incapable de s'en servir...
Du coup, tu cours partout comme un canard sans tête... et ton premier réflexe est de... POSTER SUR CE FORUM !!!

Il faut se poser, RÉFLÉCHIR, être LOGIQUE, et ordonné.

"La solution la plus simple est souvent la meilleure."

[friendofweb]

J'avais pas vu le nombre de post, tu n'es pas vraiment un débutant, l'essentiel est que tu trouves la solution. Je me suis laissé induire en erreur par ton statut..