Discussion :

[owenho]

Bonjour,

j'ai 3 lignes comme ceci :


je voulais bien faire si c'est possible, de mettre les deux points de chaque ligne l'une aprés l'autre , ça veut dire deux point du deusiéme ligne soient verticalement en dessus de deux point du premiere ligne.

j'ai pensé à faire avant les deux points :   mais le code va contenir trop de  

Merci

Cordialement

[Invité]

Bonjour,
text-align:right; ?

Ou dans un :after { content:':'; } ?

N.B. Ca ne te ferait pas de mal de jeter un oeil au glossaire CSS !

[NoSmoking]

Bonjour,
il faut également penser à mettre une largeur sur les éléments afin de pouvoir disposer de l'alignement.

Attention pas de largeur possible sur des éléments en display:inline.

[owenho]

bonjour, Merci pour vos réponses,

en fait , voila le code du li:

Code html :

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

1
2
3
<li class="li_competence"><img class='align_img' src='images/finance.ico' width='35' alt=''/>&nbsp;Economie générale   </li>
<li class="li_competence"><img class='align_img' src='images/ts.gif' width='35' alt=''/>&nbsp;Droit du Travail  </li>
<li class="li_competence"><img class='align_img' src='images/methodedegestion.png' width='35' alt=''/>&nbsp;Méthode de Gestion  </li>

dans le code CSS, j'ai mis width:200px , donc s'il reste une place , normalement va se terminer par des espaces nn !!, le after se positionne juste aprés la phrase donc le width n'est pas prise en considération :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.li_competence
{
margin-left:150px;
width:200px;
text-align:left;
}
.li_competence:after
{
content:":"; 
    text-align:right;
}

et en plus , le nombre de caractére des phrases ne sont pas égaux, donc les deux points vont se positionner tjrs dans une place different.

Exemple

Crdt

[Invité]

Bonjour,
il faut positionner :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
li
{ 
    list-style:none;
}
.align_img
{
    vertical-align:middle;
}
.li_competence
{
    position:relative; 
    margin-left:150px;
    width:200px;
    text-align:left;
 
}
.li_competence:after
{
    position:absolute; 
    right:0;
    content:":"; 
}

[owenho]

Merci;

et j'ai ajouter top:0.2em; pour que les deux points soient horizontalement aligné avec le text.

Code :

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

1
2
3
4
5
6
7
.li_competence:after
{
position:absolute; 
right:0;
top: 0.2em;
content:":";
}

Cordialement

[NoSmoking]

en mettant une line-height sur le LI pas besoin d'un incertain top:0.2em et pour le after

Code :

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

1
2
3
4
.li_competence:after{
  float:right;
  content:":"; 
}

[owenho]

oui Merci,
mais il me reste un soucis , si je veux ajouter une image aprés le after : elle s'ajoute au debut du ligne.


une idée ?

Cordialement.

[NoSmoking]

J'ai comme l'impression que ta conception par en live, tu ne te/nous fixe pas le but final tout de suite mais par bribe. Une solution qui peut convenir dans un cas ne l'est plus forcément dans un autre même apparemment proche.

Prenons ton cas présent, j'ai comme l'impression que le :after peut devenir un :before.

[owenho]

Merci Nosmoking pour les réponces, et je m'excuse pour trop de questions .

en fait si je faits :before (normalement :after ,parceque je veux que l'image soit aprés les deux points )une seule image va s'appliquer pour tous les titres, mais non chaque ligne a sa propre image.

Je m'excuse encore une fois ?

Cordialement

[Ah_Kin]

J'ai comme l'impression que ta conception par en live, tu ne te/nous fixe pas le but final tout de suite mais par bribe. Une solution qui peut convenir dans un cas ne l'est plus forcément dans un autre même apparemment proche.

Prenons ton cas présent, j'ai comme l'impression que le :after peut devenir un :before.

En général il est assez logique que quelque chose se trouve après deux points. Il me semble qu'il est de bonne augure d'éviter d'être évasif avec les gens, surtout quand on arbore le statut de modérateur. C'est assez dangereux pour developpez.net lui même cette attitude.