[résolu] CSS : décalage des liens par rapport au texte.

[kanon90]

Bonjour à tous, j'ai un petit problème de décallage de mes liens dans une page html classique :

Comme vous pouvez le constater, il y a un décalage vers le bas lorsque je crée un lien. J'avoue ne pas savoir d'ou cela vient, y a t'il un attribut css qui provoque cela ?

Merci par avance. :wink:

 

[e-kiwi]

voui. c est quoi la css associé à ton lien (vérifie si il a une classe d attribué)

 

[kanon90]

Non pas de probleme de classe.

J'ai testé avec une classe, elle est bien prise en compte, et je viens de remarquer que le décalage apparaissait seulement sur FireFox.

 

[e-kiwi]

donne l'adresse que l'on puisse vérifier le source

 

[kanon90]

www.chamina-voyages dot com

Il y a deux fichiers css qui sont associés à cette page. (je viens de reprendre ce site depuis deux mois...)

N'hésites pas a faire des remarques si des trucs te choquent.

Merci de ton aide, c'est pas tjrs évident d'aider les nouveaux ^^

 

[bproductiv]

margin ou padding a tout hasard ?

 

[st-antigone]

margin ou padding a tout hasard ?

même idée un margin ou un padding sur une des class et pas sur l'autre ...

 

[kanon90]

bien tenté mais non :cry:

 

[pascal1973]

bien tenté mais non :cry:

Salut , postes ta feuille CSS , tout le monde y verras plus clair :idea:


+++

 

[croisicata]

Sous Mozilla/Firefox pas de problème

 

[st-antigone]

Sous Mozilla/Firefox pas de problème

sauf bien choisir votre randonnée qui passe à la ligne et qui donc chevauche la suivante.

 

[kanon90]

http://www.chamina-voyages.com/jscss/accueil.css
http://www.chamina-voyages.com/jscss/index.css

voici les css qui doivent poser pbme.



ps : comment ca pas de probleme de css sous mozilla firefox ??? 8O

 

[kanon90]

Sous Mozilla/Firefox pas de problème

sauf bien choisir votre randonnée qui passe à la ligne et qui donc chevauche la suivante.

Tu as du augmenter la taille originelle du texte sur ton navigateur ?

 

[st-antigone]

ps : comment ca pas de probleme de css sous mozilla firefox ??? 8O

non pas de décalage chez moi,
j'ai le 2 mise à jour automatiquement

 

[st-antigone]

Sous Mozilla/Firefox pas de problème

sauf bien choisir votre randonnée qui passe à la ligne et qui donc chevauche la suivante.

Tu as du augmenter la taille originelle du texte sur ton navigateur ?

non,non quand je change la taille du texte cela ne change pas grand chose sur ton site,

 

[kanon90]

oui je travaille en px, il est préférable de travailler en quoi ?

C'est la que tu te dis que faire un site c'est pas évident entre toutes les différentes configs

EDIT : cet article est susceptible de m'intéresser :
http://css.alsacreations.com/Tutoriels- ... vec-les-em

^^"

 

[st-antigone]

perso je travailles aussi en px mais j'essaie de faire des typo visible aussi pour les myopes ...
sinon si tu veux faire un site accessible et conforme on te dirait de travailler en em ... pour ma part j'ai abandonné cette idée, j'aime bien les positionnements en absolute car plus facile à travailler... mais bon je ne suis pas certain que mon site soit conforme à toutes les valeurs du nouveau web. :lol:

oui je travaille en px, il est préférable de travailler en quoi ?

C'est la que tu te dis que faire un site c'est pas évident entre toutes les différentes configs

 

[darkturkey]

je confirme le décalage sur firefox, mais il apparait lorsqu'on a déja cliqué sur

le lien, sinon pas de décalage...

j'ai pu jeter un coup d'oeil sur les fichiers css, a mon avis le décalage

vient de padding:5px de la classe 'bandactu' qui enveloppe la classe 'actu' du lien

mais pourquoi le FF le prend en compte après avoir cliqué sur le lien 8O , mystère...

 

[kanon90]

en effet, je n'y avais pas prété attention !! Sinon quand on clique sur le lien il s'affiche en gras et reprend sa taille d'origine. Peut etre un conflit de class a quelque part ??

EDIT : ca ne semble pas venir du padding.

 

[croisicata]

Je confirme, le problème n'arrive qu'une fois cliqué sur le lien.
Ca provient certainement d'une définition sur a:visited

Pas de problème par contre sur le lien "bien choisir votre randonnée"

Sympa ton site

 

[darkturkey]

EDIT : ca ne semble pas venir du padding.

8O

même en enlevant les padding et margin de 'bandactu ul' ??

sinon je vois pas d'ou ça peut venir,

désolé de pas pu t'aider d'avantage...

 

[kanon90]

je pense avoir trouvé un petit indice.

Sous IE, quand je clique sur le lien et maintient la souris, il n'y a pas de bordure qui s'affiche autour. Sous Firefox ce n'est pas la meme histoire, il y a un espece de cadre 'dotted' qui apparait et qui fout le bordel semble t'il, la police doit etre trop petite.

 

[croisicata]

Et si tu essayais ce code (SGDG) :

.actu{
	color:#00A197;
	font-weight:bold;
	padding:0;
	margin:0;
	font-size:10px;
	}
.actu a:hover, .actu a:visited{
	color: #005852;
        }

 

[kanon90]

rien non plus

 

[croisicata]

Alors, réessaie en enlevant le font-weight: bold
Cela doit provenir d'un manque de place dans l'interligne lorsque le texte est en gras

 

[kanon90]

Je viens de trouver ! IE m'a mis la puce à l'oreille car la couleur du lien était celle du menu.

Du coup j'avais une propriété vertical-align=middle sur un lien qui n'avait pas de class et qui était a:visited. Forcément si la balise a de base propose ca... Ca foutait le bordel. (que faisait t'elle la... bonne question !)

Pfoui ce bazard.

Je vous remercie pour votre aide qui m'a été précieuse, ca m'a permis d'avancer ^^

 

[croisicata]

Bravo !

Une petite remarque concernant les unités (suite à la remarque de St-antigone).

Le point pt est une unité typographique absolue, utilisée sur les imprimantes, et beaucoup plus pertinente qu'em/ex pour les textes.

Le pixel px est une unité un peu trouble car selon la résolution d'écran, un pixel sera plus ou moins gros. Pour du texte, il vaut mieux utiliser le pt surtout pour les petites et moyennes tailles (<30px). De plus, cela permet de redimensionner le texte suivant les besoins de l'internaute.

 

[Dargoan06]

Bravo !

Une petite remarque concernant les unités (suite à la remarque de St-antigone).

Le point pt est une unité typographique absolue, utilisée sur les imprimantes, et beaucoup plus pertinente qu'em/ex pour les textes.

Le pixel px est une unité un peu trouble car selon la résolution d'écran, un pixel sera plus ou moins gros. Pour du texte, il vaut mieux utiliser le pt surtout pour les petites et moyennes tailles (<30px). De plus, cela permet de redimensionner le texte suivant les besoins de l'internaute.

Hello,

Bon, même si ce point est Résolu, je suppose que les messages arrivent quand même aux WRInautes que nous sommes tous... alors, je réponds .
Pour le média d'imprimante, je suis d'accord qu'il est préférable d'utiliser le pt, mais pour le média screen, il est préférable d'utiliser em au lieu de px (pt je sais pas...), car em permet d'avoir une présentation extensible, elastique, qui peut donc s'adapter aux choix par défaut des internautes, survalant les choix imposés par l'auteur via la feuille de style, et les règlages/comportements par défaut des navigateurs web.

En effet, pour rappel, le rendu CSS vient de l'équilibre entre les différents styles: auteur (le webmaster), utilisateur (n'importe quel internaute), et agent utilisateur (navigateur).
Pour comprendre cela dans le détail, rendez-vous sur cette page qui explique très bien le concept :
http://openweb.eu.org/articles/lacher_prise/

Afin de ne pas être insomniaque comme fandecine, je vais aller me coucher :wink:

A bientôt !

 

[kanon90]

Merci de vos avis, je pense qu'avec un peu de temps je fouillerais du coté de la taille de la police