Alignement... [Fermé]

Signaler
Messages postés
1
Date d'inscription
lundi 18 novembre 2013
Statut
Membre
Dernière intervention
18 novembre 2013
-
Messages postés
5805
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
25 mai 2020
-
Salut à tous...
Je m'arrache les cheveux !
donc le but est d'avoir une navigation composée de petit carrés...
Vo!la le code

<div id="slider">
  <a href="#image1">■</a>
  <a href="#image2">■</a>
  <a href="#image3">■</a>
  <a href="cat-lum.html"><span>⌧</span></a>
</div>

et voici le CSS

#slider {text-align:right;
}
#slider a {
display: inline-block;
text-align:right;
text-decoration: none;
color: #666;
font-size: x-large;
vertical-align:middle;
}
#slider a span {
display: inline-block;
text-align:right;
text-decoration: none;
color: #666;
font-size: small;
font-weight:bolder;
vertical-align:middle;
}
#slider a:hover {
 color: #333;
}
#slider a span:hover {	
color: #333;
}

et le résultat... ben c'est pas bon, les caractères ne sont pas alignés...
Le dernier caractères est plus bas sur la ligne de base que les autres....
J'ai essayé avec d'autres entités... c'est pareil !
J'aimerais comprendre....
normalement mon "display: inline-block" devrait me permettre de régler le problème mais non !

2 réponses

Messages postés
2737
Date d'inscription
jeudi 21 mai 2009
Statut
Contributeur
Dernière intervention
2 février 2014
197
Salut,

Il n'est pas conseillé d'utiliser des caractères spéciaux comme ça dans ta page de code, parce que suivant les encodages de ta page ou suivant le navigateurs, ça ne rendra pas pareil chez tous les utilisateurs.

Tu peux éventuellement mettre un span en inline-block avec une largeur et une hauteur définie avec une couleur de fond etc ... Ca me semble plus simple.

Cordialement
a70m
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 90158 internautes nous ont dit merci ce mois-ci

Messages postés
5805
Date d'inscription
mercredi 30 octobre 2013
Statut
Membre
Dernière intervention
25 mai 2020
1 019
d'autant plus qu'en css tu as un attribut de list-style-type qui s'appelle square qui est la même chose sans parler du list-style-image qui permet de mettre n'importe quelle image à la place de la puce