Discussion :

[nixonne]

Bonjour,

Je me doute que cette question est fréquente mais je ne trouve pas de solution correspondante à mon problème.

J'ai un html de ce type :

Code :

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

1
2
3
4
5
6
<div>
   <span>.....</span>
   <span>.....</span>
   <span>.....</span>
   <span>.....</span>
</div>

et j'aimerai mais mes span soit centré sur la même ligne mas je ne sais pas à l'avance combien je vais en avoir

j'ai essayé différents code CSS mais ca ne marche pas

Pouvez vous m'aider?

Merci d'avance

Nixonne

[desert]

C'est en fait ton div qui entoure tes span qu'il faut centrer.

Code html :

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

1
2
3
4
<div id="content">
   <span>.....</span>
   <span>.....</span>
</div>

Code css :

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

1
2
3
#content {
   margin: 0 auto;
}

[nixonne]

Salut,

J'ai bien appliqué ca mais ca ne change rien (http://test.citdessaint.com/index.php?page=hockey)

Pouvez vous m'aider?

Merci d'avance

Nixonne

[desert]

Peut-être aurais-je dû préciser que le div qui entoure les span devait avoir une largeur plus petite que celle du parent.
Pour ton problème, tu spécifies une classe content à un div, or dans ton css, tu indiques que c'est plutôt un id content au lieu d'une classe.
Tu devrais donc écrire ceci à la place :

Code css :

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

1
2
3
4
.content {
    width: xx%; /* xx autre que 100% sinon il n'y aura pas de centrage */
    margin: 0 auto;
}

OU alors un simple alignement horizal du texte pourrait suffire :

Code css :

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

1
2
3
4
.content {
    width: 100%; 
    text-align: center;
}

[Erwan31]

Bonjour,
pour commencer tes lien n'ont à mon avis pas besoin d'être imbriquer dans un span, tu peux très bien appliquer directement la règle de styles sur les liens.
Pour faciliter ce type de centrage (sans connaître à l'avance le nombre de liens), il te faudrait éviter le float:left des liens qui ne sert d'ailleurs qu'a leur donner une largeur de 80px potentiellement problématique (chevauchement des liens lors d'un zoom texte du navigateur)

Ce qui donnerait donc:

HTML (modèle)

Code :

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

1
2
3
4
5
6
 
<div class="centreSM">
<a href="index.php?page=hockey_competition">Maillots de compétition</a>
<a href="index.php?page=hockey_competition">Maillots de compétition</a>
<a href="index.php?page=hockey_competition">Maillots de compétition</a>
</div>

CSS

Code :

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

1
2
3
4
5
6
7
 
.centreSM   {
clear: both;
text-align:center;
...
 }
.centreSM  a {padding-left: 10px; }

Rien de plus.
Mais attention, il faudra penser à trouver un moyen de sérarer visuellement ces liens qui s'emplilent les uns sur les autres en cas de redimensionnement du viewport (zone d'affichage) ou de visuelisation de ton site sur de petites résolutions.

PS: en principe tu devrais utiliser une liste non-ordonnée (élément UL) pour tes liens

[nixonne]

Bonjour,

Merci pour votre aide.

Savez vous comment faire pour avoir l'image au dessus du texte et pour donner une taille fixe aux lien (pour qu'il y ait un retour à la ligne si c'est plus grand et ainsi faire passer tout les lien sur la meme ligne)

Voici mon code HTML :

Code :

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
<div class="centreM">
   <a href="index.php?page=hockey"><img src="images/menu_images/sport/hockey.JPG" alt="sport" />Hockey sur glace</a>
   <a href="index.php?page=roller"><img src="images/menu_images/sport/roller.JPG" alt="sport" />Roller hockey</a>
   <a href="index.php?page=footus"><img src="images/menu_images/sport/footus.JPG" alt="sport" />Football Américain</a>
   <a href="index.php?page=arbitre"><img src="images/menu_images/sport/arbitre.JPG" alt="sport" />Arbitres</a>
   <a href="index.php?page=taille_maillot"><img src="images/menu_images/sport/taillemaillot.JPG" alt="sport" />Tailles des maillots</a>
   <a href="index.php?page=type_tissu"><img src="images/menu_images/sport/typetissu.JPG" alt="sport" />Types de tissu</a>
</div>
 
<div class="centreSM">
   <a href="index.php?page=hockey_competition">Maillots de compétition</a>
   <a href="index.php?page=hockey_capitaine">Capitaine et assistants</a>
   <a href="index.php?page=hockey_entrainement">Maillots d'entraînement</a>
   <a href="index.php?page=hockey_chasuble">Chasubles d'entraînement</a>
   <a href="index.php?page=hockey_supporter">Maillots pour supporters</a>
   <a href="index.php?page=hockey_bas">Bas</a>
   <a href="index.php?page=hockey_housse">Housses de culotte</a>
   <a href="index.php?page=hockey_lavage">Accessoires de lavage</a>
   <a href="index.php?page=construction">4 pattes</a>
</div>

Et le CSS :

Code :

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
.centreM {
 clear:both;
 margin-left:  auto;
 margin-right: auto;
 padding-top: 10px;
 width: 99%;
 text-align: center;
}
 
.centreSM {
 clear:both;
 margin-left:  auto;
 margin-right: auto;
 padding-top: 10px;
 width: 99%;
 text-align: center;
}
.centreSM  a {padding-left: 10px;}
.centreM  a {padding-left: 10px; }

Merci d'avance

Nixonne

[Erwan31]

Les margin auto ne te servent plus à rien et pour le width:99% j'en doute (un élément de rendu bloc comme la div prend tout l'espace disponible en largeur par default)

Comme je te l'ai expliqué plus haut, attribuer une largeur à tes liens peut-être problématique.
Autre solution: utiliser un <br /> pour forcer le retour à la ligne.