Discussion :

[dhillig]

Bonjour à tous,
Je pensais pouvoir régler ce problème tout seul, mais... non
J'ai dans mon footer 4 col dont voici le html :

Code html :

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

1
2
3
4
5
<div id="mainFooter">
	<div class="col gauche">
        	<h3>Européens</h3>
		<span>Size</span><span>Size</span><span>Size</span><span>Size</span>
	</div>

Code html :

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

1
2
3
4
5
6
<div class="col centre">
    <h3>Américains</h3>
    <p>Lorem Elsass ipsum</p>
    <p>réchime amet sed bissame so libero knackes choucroute</p>
    <p>Hopla kuglopf flammekueche</p>
</div>

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="col centre">
    <h3>Dessins</h3>
    <ul>
        <li>Size</li>
        <li>Size</li>
        <li>Size</li>
        <li>Size</li>
    </ul>
</div>

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="col droite centre">
    <h3>Size</h3>
    <ul>
        <li><span>Size</span></li>
        <li><span>Size</span></li>
        <li><span>Size</span></li>
        <li><span>Size</span></li>
    </ul>
</div>

Dans le premier cas, pas de problème, dans le second cas, les textes reviennent à la ligne (oui, je sais <p> La meilleure façon de faire étant (je suppose) le troisième et quatrième cas, mais j'ai un retrait à gauche que je n'arrive pas à supprimer
Les CSS :

Code :

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

1
2
3
4
5
6
7
ul {
list-style: none;
text-align: left;
}
li {
display: inline;
}

Autre petit soucis, comment créer un espace entre : nom prénom-espace-nom prénom-espace-nom prénom. Suis-je obligé de passé par une classe avec un margin right:Xpx ?
Merci pour votre aide et bon week-end,
dh

[Invité]

Bonjour,
Pourquoi faire compliqué ?

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="col centre">
    <h3>M et Mme ont un fils/une fille</h3>
    <ul>
        <li>Jean Bondiork</li>
        <li>Alex et Alain Térieur</li>
        <li>Anna-Lise Durine</li>
        <li>Humphrey Bienfufer</li>
    </ul>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
ul {
  list-style: none;
  text-align: left;
  padding:0;
}
li {
  display: inline;
}
li:not(:last-child) /* sauf le dernier */
{ margin-right:10px; }

[dhillig]

Bonjour jreaux62,
Merci pour ton aide. Et oui... c'est tout simple... uniquement un padding:0 sur les <li> (il me semblait pourtant avoir essayé... sans succès) ???
Le B.A.BA des listes à puces
Bonne fin de week-end
dh