Discussion :

[bigs3232]

bonjour
j'aimerais afficher chaque ligne li sur 2 colonnes dont l'un à 30% et l'autre à 70% en largeur
j'ai fait ce code mais cela ne semble pas marcher
je ne suis pas tres doué en css .si vous avez une piste je suis preneur.
merci d'avance

Code :

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

1
2
3
4
5
 
<ul class="pi_dimt_320">
	 	<li><span class="it_champ">aaa</span><span> : </span><span class="it_val">bbb</span><span class="it_champ">aaa1</span><span> : </span><span class="it_val">bbb1</span></li>
	 	<li><span class="it_champ">aaa</span><span> : </span><span class="it_val">bbb</span><span class="it_champ">aaa1</span><span> : </span><span class="it_val">bbb1</span></li>
</ul>

voici mon css

Code :

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

1
2
3
 
ul.pi_dim_320 li .it_champ{width: 30%;}
ul.pi_dim_320 li .it_val{width: 70%;}

[Invité]

Bonjour,

la balise <span> est par défaut en display:inline;

Code css :

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

1
2
ul.pi_dimt_320 li .it_champ{display:inline-block; width:30%;}
ul.pi_dimt_320 li .it_val{display:inline-block; width:70%;}

Cela dit, 70% + 30 % + (largeur des ":") = plus que 100% !
Il faut revoir la structure du code HTML...

Une (bonne) solution :

Code html :

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

1
2
3
4
5
6
<ul class="pi_dimt_320">
	 	<li><label>aaa : </label><span>aaaaaaaaa</span></li>
	 	<li><label>bbb : </label><span>bbbbbbbbb</span></li>
	 	<li><label>ccc : </label><span>ccccccccc</span></li>
	 	<li><label>ddd : </label><span>ddddddddd</span></li>
</ul>

Code css :

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

1
2
ul.pi_dimt_320 li label{display:inline-block; width:30%;}
ul.pi_dimt_320 li span{display:inline-block; width:70%;}

[bigs3232]

merci .en fait je voulais avoir sur 2 colonnes plutot comme cela pour gagner de la place
en gros avoir pour chaque ligne avec 1 label +1 span +1 label +1 span.
en espérant avoir bien expliqué mon problème

Code :

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

1
2
3
 
aaa:aaaaaa   bbb:bbbbbbb
ccc:cccccc   ddd:ddddddd

[Invité]

Il faudrait penser à faire des recherches, et LIRE les cours CSS, FAQ CSS,...
On ne peut pas apprendre à ta place.

Une solution :

Code css :

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

1
2
3
ul.pi_dimt_320 li {float:left; width:50%;}
ul.pi_dimt_320 li label{display:inline-block; width:30%;}
ul.pi_dimt_320 li span{display:inline-block; }

Une autre :

Code css :

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

1
2
3
4
ul.pi_dimt_320 {display:flex; flex-wrap:wrap;}
ul.pi_dimt_320 li {flex:1 1 50%;}
ul.pi_dimt_320 li label{display:inline-block; width:30%;}
ul.pi_dimt_320 li span{display:inline-block; }

[bigs3232]

j'ai essayé cette méthode que vous avez proposé mais çà ne marche pas .bizarre quand meme

Code :

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

1
2
3
4
 
ul.pi_dimt_320 li {float:left; width:50%;}
ul.pi_dimt_320 li label{display:inline-block; width:30%;}
ul.pi_dimt_320 li span{display:inline-block; }

[Invité]

Il faut aussi changer le HTML, comme je l'ai fait.


Et "ca ne marche pas" n'apporte RIEN à la discussion.
Montre plutôt le code que tu as testé (HTML + CSS)

[bigs3232]

désolé ca semble marcher j'ai laissé trainer une propriété css qui traine.merci

[bigs3232]

je comprends mieux les bases avec résolutions des problèmes concrets .je comprends mieux les cours maintenant .encore merci jreaux

[bigs3232]

j'aimerais adapter le code pour avoir ce genre de présentation avec li span qui est proche du texte li label
ca fait longtemps que je cherche à faire cette présentation sans succès

voici mon code .je sais que le souci vient du width à 60% mais je ne connais pas d'autres solutions sans passer par jquery
merci

Code :

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

1
2
3
4
 
ul.pi_dim_320 li {float:left; width:50%;display:inline;border-top: 1px solid gray;background:#ebebeb;}
ul.pi_dim_320 li label{display:inline-block; width:60%;list-style-type: square;}
ul.pi_dim_320 li span{display:inline-block;font-style:italic;color:#ff6600;text-align: left;}

Code :

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

1
2
3
4
5
6
7
8
 
	$bloc_marque=
	.'<ul class="pi_port_320">'."\n"
	.'<li><span class="it_champ">Marque : </span><span class="it_val">'.$marque.'</span></li>'."\n"
	.'<li><span class="it_champ">Gamme : </span><span class="it_val">'.$gamme.'</span></li>'."\n"
	.'<li><span class="it_champ">Modèle : </span><span class="it_val">'.$model_cons.'</span></li>'."\n"
	 .'</ul>'."\n"
	 ;

[Invité]

Le code que j'ai déjà donné fait exactement ça.

label est sémantiquement mieux adapté que span.

Et je t'ai donné des liens vers les cours CSS...

[NoSmoking]

Bonjour,
dans cet exemple j'aurais assez bien vu une liste de définition.

Code html :

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

1
2
3
4
5
<dl>
  <dt>Marque</dt><dd>La marque</dd>
  <dt>Gamme</dt><dd>La gamme</dd>
  <dt>Modèle</dt><dd>Le modèle</dd>
</dl>

[bigs3232]

merci nosmoke et pour sa partie css vous faites comment?

[Invité]

Bonjour,

Fais un petit effort...