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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par kanon90, 22 Mai 2007.

  1. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    Bonjour à tous, j'ai un petit problème de décallage de mes liens dans une page html classique :

    [​IMG]

    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:
     
  2. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    voui. c est quoi la css associé à ton lien (vérifie si il a une classe d attribué)
     
  3. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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.
     
  4. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    donne l'adresse que l'on puisse vérifier le source
     
  5. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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 ^^
     
  6. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 672
    J'aime reçus:
    0
    margin ou padding a tout hasard ?
     
  7. st-antigone
    st-antigone WRInaute impliqué
    Inscrit:
    18 Décembre 2004
    Messages:
    936
    J'aime reçus:
    0
    même idée un margin ou un padding sur une des class et pas sur l'autre ...
     
  8. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    bien tenté mais non :cry:
     
  9. pascal1973
    pascal1973 WRInaute impliqué
    Inscrit:
    24 Septembre 2005
    Messages:
    746
    J'aime reçus:
    0
    Salut , postes ta feuille CSS , tout le monde y verras plus clair :idea:


    +++
     
  10. croisicata
    croisicata Nouveau WRInaute
    Inscrit:
    16 Avril 2006
    Messages:
    9
    J'aime reçus:
    0
    Sous Mozilla/Firefox pas de problème ;)
     
  11. st-antigone
    st-antigone WRInaute impliqué
    Inscrit:
    18 Décembre 2004
    Messages:
    936
    J'aime reçus:
    0
    sauf bien choisir votre randonnée qui passe à la ligne et qui donc chevauche la suivante.
     
  12. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
  13. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    Tu as du augmenter la taille originelle du texte sur ton navigateur ?
     
  14. st-antigone
    st-antigone WRInaute impliqué
    Inscrit:
    18 Décembre 2004
    Messages:
    936
    J'aime reçus:
    0
    non pas de décalage chez moi,
    j'ai le 2 mise à jour automatiquement
     
  15. st-antigone
    st-antigone WRInaute impliqué
    Inscrit:
    18 Décembre 2004
    Messages:
    936
    J'aime reçus:
    0
    non,non quand je change la taille du texte cela ne change pas grand chose sur ton site,
     
  16. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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

    ^^"
     
  17. st-antigone
    st-antigone WRInaute impliqué
    Inscrit:
    18 Décembre 2004
    Messages:
    936
    J'aime reçus:
    0
    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:

     
  18. darkturkey
    darkturkey Nouveau WRInaute
    Inscrit:
    6 Décembre 2006
    Messages:
    5
    J'aime reçus:
    0
    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...
     
  19. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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. ;)
     
  20. croisicata
    croisicata Nouveau WRInaute
    Inscrit:
    16 Avril 2006
    Messages:
    9
    J'aime reçus:
    0
    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 ;)
     
  21. darkturkey
    darkturkey Nouveau WRInaute
    Inscrit:
    6 Décembre 2006
    Messages:
    5
    J'aime reçus:
    0
    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...
     
  22. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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.
     
  23. croisicata
    croisicata Nouveau WRInaute
    Inscrit:
    16 Avril 2006
    Messages:
    9
    J'aime reçus:
    0
    Et si tu essayais ce code (SGDG) :
    Code:
    .actu{
    	color:#00A197;
    	font-weight:bold;
    	padding:0;
    	margin:0;
    	font-size:10px;
    	}
    .actu a:hover, .actu a:visited{
    	color: #005852;
            }
     
  24. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    rien non plus :(
     
  25. croisicata
    croisicata Nouveau WRInaute
    Inscrit:
    16 Avril 2006
    Messages:
    9
    J'aime reçus:
    0
    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
     
  26. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    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 ^^
     
  27. croisicata
    croisicata Nouveau WRInaute
    Inscrit:
    16 Avril 2006
    Messages:
    9
    J'aime reçus:
    0
    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.
     
  28. Dargoan06
    Dargoan06 WRInaute discret
    Inscrit:
    11 Juillet 2006
    Messages:
    59
    J'aime reçus:
    0
    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). :D
    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 !
     
  29. kanon90
    kanon90 WRInaute impliqué
    Inscrit:
    23 Mars 2007
    Messages:
    760
    J'aime reçus:
    0
    Merci de vos avis, je pense qu'avec un peu de temps je fouillerais du coté de la taille de la police ;)
     
Chargement...
Similar Threads - [résolu] CSS décalage Forum Date
[résolu] Elargir un menu en CSS à 100% du contenant Développement d'un site Web ou d'une appli mobile 6 Octobre 2014
[RESOLU] CSS par defaut de submit et text Développement d'un site Web ou d'une appli mobile 13 Octobre 2010
[RESOLU] Souci CSS avec opera ! Développement d'un site Web ou d'une appli mobile 21 Juillet 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
Mes CSS sous Chrome et Firefox...[RESOLU] Développement d'un site Web ou d'une appli mobile 10 Octobre 2008
Gzipper une css [résolu] Développement d'un site Web ou d'une appli mobile 17 Septembre 2008
[RESOLU] Distance entre les lignes avec le css Débuter en référencement 3 Juillet 2008
[RESOLU] [CSS] : rajouter une div Développement d'un site Web ou d'une appli mobile 26 Juin 2008
[résolu]menu déroulant css Référencement Google 4 Juin 2008
[résolu][valid css] Erreurs récalcitrantes Développement d'un site Web ou d'une appli mobile 7 Novembre 2007
[résolu][css] Avertissement lors de la validation W3C Développement d'un site Web ou d'une appli mobile 6 Novembre 2007
[Résolu] Problème css avec des float Développement d'un site Web ou d'une appli mobile 11 Août 2007
[Résolu] CSS : un div selon le navigateur Développement d'un site Web ou d'une appli mobile 7 Août 2007
[résolu] CSS : position fixed et IE6 Développement d'un site Web ou d'une appli mobile 13 Juillet 2007
[RESOLU]Probleme tres simple CSS menu Développement d'un site Web ou d'une appli mobile 28 Juin 2007
[resolu]problème css IE6 Développement d'un site Web ou d'une appli mobile 6 Juin 2007
[résolu] surlignage css Développement d'un site Web ou d'une appli mobile 26 Avril 2007
[Résolu] Selecteur CSS d'un lien dans une balise <strong& Développement d'un site Web ou d'une appli mobile 12 Avril 2007
[résolu] Pb de positionnement CSS Développement d'un site Web ou d'une appli mobile 17 Novembre 2006
[Résolu] CSS foireux Internet Explorer Développement d'un site Web ou d'une appli mobile 26 Octobre 2006