[CSS] Formatage de liens de différents styles

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Nerva, 30 Novembre 2007.

  1. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Bonjour.

    Le style des liens de mon site est formaté ainsi :

    Code:
    a:link,a:active,a:visited
    {
    text-decoration: none;
    color: #EE0033;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial;
    }
    Cependant, en bas de chaque page, figure un lien de retour direct au menu que je voudrais différent en taille et en couleur.
    J'ai donc ajouté ceci :

    Code:
    .retour_menu a
    {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
    }
    Mais ça ne fonctionne pas ; le style affiché est le général.
    Merci d'un coup de main...
     
  2. FloBaoti
    FloBaoti WRInaute impliqué
    Inscrit:
    30 Avril 2006
    Messages:
    640
    J'aime reçus:
    0
    !important

    Code:
    .retour_menu a
    {
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: Arial !important;
    }
     
  3. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Bonjour,

    prends soin également de mettre le deuxième style ( .retour_menu a ) après le premier dans ton style.css .

    Enfin, utilise les mêmes balises : .retour a:link (comme tu as fait pour le premier)
    ça devrait fonctionner.
     
  4. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    L'ordre d'apparition des déclarations doit être :
    a:link
    a:visited
    a:hover
    a:active
    et la classe ou l'identité doit précéder chaque redéclaration
     
  5. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Merci bien, ça fonctionne. En fait, même avec un "a" tout court ça fonctionne à moitié (pour le "hover", il prend le formatage définit globalement) mais j'avais mal paramétré ma balise : "id" à la place de "class".
     
  6. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Ah, c'était trop beau, il y a le second problème à résoudre. :wink:

    Voici le style de l'image de bas de page :

    Code:
    #bottom
    {
    margin-left: 20px;
    width: 640px;
    height: 50px;
    background: url(images/logo_bottom.jpg);
    clear: both;
    }
    Et le style du texte à incorporer dedans :

    Et voici le code HTML :

    Code:
    <div id="bottom">
    	<div class="retour"><a href="home.php">Retour au menu</a></div>
    </div>
    Comment centrer le texte verticalement dans l'image ? J'ai essayé avec un "padding" dans "retour", ça ne marche pas.
     
  7. webmasterlamogere
    webmasterlamogere WRInaute passionné
    Inscrit:
    17 Décembre 2006
    Messages:
    1 646
    J'aime reçus:
    1
    j'utilse un truc comme ca pour centrer :
    Code:
    	background-position:0% 50%;
     
  8. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Non, ça ne fonctionne pas... Pour l'instant, ça marche avec un "margin-top" mais ça ne doit pas être la méthode académique... :wink:
     
  9. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    .retour a:link,.retour a:visited,.retour a:hover,.retour a:active
    line-height:50px; dans #bottom, peut-être
     
  10. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 601
    J'aime reçus:
    4
    text-align:center
    ?
     
  11. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Ah j'ai encore parlé trop vite ! Ca marche avec un margin left ou right mais pas avec un top ou un bottom.

    Oui, un align-center pour le centrage horizontal mais c'est le vertical qui me pose problème.
     
  12. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    As-tu essayé
    line-height:50px; dans #bottom
    et corrigé les déclarations pour les liens ?
     
  13. webmasterlamogere
    webmasterlamogere WRInaute passionné
    Inscrit:
    17 Décembre 2006
    Messages:
    1 646
    J'aime reçus:
    1
    autant pour moi, c'est pour centrer l'image pas le texte.
    Je pense qu'il faut définir une hauteur pour le texte égale à la hauteur de l'image déjà.

    Il me semble aussi qu'il y a une erreur. il faut répéter ".retour" :
    Code:
    .retour a:link, .retour a:visited, .retour a:hover, .retour a:active 
    edit: grillé
     
  14. pcamliti
    pcamliti WRInaute impliqué
    Inscrit:
    9 Mars 2007
    Messages:
    697
    J'aime reçus:
    1
    J'ai le même souci avec un texte latéral à une image, sans que l'image soit en background.

    Si vous avez la solution, je suis preneur aussi.

    Vous faites une class pour l'image ?
     
  15. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    J'utilise
    Code:
    #conteneur
    {
    	position: absolute;
    	margin-top: -200px;
    	top: 50%;
    	height: 400px;
    }
    ... et ça marche bien.
    Je ne suis pas sûr que "position:absolute;" soit nécessaire.

    Edit : explications : on spécifie une hauteur et on précise que l'élément (texte ou image) doit être centré au milieu.
     
  16. Florent V.
    Florent V. WRInaute discret
    Inscrit:
    16 Mai 2007
    Messages:
    157
    J'aime reçus:
    0
    Hé bé, c'est laborieux. ;)

    Je conseille une petite simplification. Plutôt que d'écrire:
    Code:
    a:link,a:active,a:visited {...}
    On écrira plutôt:
    Code:
    a {
    	text-decoration: none;
    	color: #e03;
    	font-weight: bold;
    	/* font-size: 12px;
    	font-family: Arial; */
    }
    Je commente la taille de texte et la fonte (on pourra les virer tout court) car il est souvent préférable que le style du lien s'adapte un minimum au texte environnant. Un lien en Arial 12px au milieu d'une citation en Times 15px, ça serait dommage...

    Ensuite, pour le code du pied de page:
    Code:
    HTML:
    <div id="bottom">
    	<p><a href="home.php">Retour au menu</a></p>
    </div>
    
    CSS:
    div#bottom {
    	margin-left: 20px;
    	width: 640px; /* à voir si vraiment utile ici */
    	height: 50px;
    	background: url(images/logo_bottom.jpg);
    	clear: both; 
    }
    div#bottom p {
    	margin: 0;
    	padding: 20px 0 0 0;
    }
    div#bottom a {
    	color: white;
    	font-size: 16px;
    }
    Voilà, on devrait y être.
     
  17. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    SpeedAirMan
    Ca ne fonctionne ni dans le container ni dans le texte.

    Dan
    Marche pas non plus...
     
  18. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    Chez moi, ça marche, et avec tous les navigateurs.
    Si la page est en ligne, il vaut mieux donner l'adresse de celle-ci.
    Ceci dit, il faut souvent apprendre à marcher avant de vouloir courir.
     
  19. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Dan
    Non, la page n'est pas en ligne.

    Florent
    Ca fonctionne.

    Merci... :wink:
     
  20. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Techniquement ça fonctionne très bien mais esthétiquement ce n'est pas le pied ; un lien en caractères bruts sur un joli logo, c'est vraiment pas beau, rien à voir avec un texte inséré dans l'image avec logiciel photo.

    Alors, y a-t-il moyen de rendre un image cliquable quand elle est contenue dans le CSS ou faut-il obligatoirement la placer dans le HTML ?
     
  21. dop20vt
    dop20vt WRInaute occasionnel
    Inscrit:
    23 Juin 2007
    Messages:
    455
    J'aime reçus:
    0
    Tu gardes ton image en background et tu rajoutes display: block; dans ton css et tu renseigne également width et height !!
     
  22. Nerva
    Nerva Nouveau WRInaute
    Inscrit:
    20 Novembre 2006
    Messages:
    27
    J'aime reçus:
    0
    Alors j'ai mis ça :

    Code:
    #top
    {
    margin-left: 20px;
    width: 640px;
    height: 260px;
    background: url(images/logo_top.jpg);
    display: block;
    }
    Et ça :

    Code:
    <div id="top"><a href="home.php"></a></div>
    Ca ne clique pas. Je suppose qu'il y a autre chose à paramétrer ?
     
  23. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 018
    J'aime reçus:
    133
    Oui si tu veux faire ca, il va te falloir forcer en css la width et la height de ton lien également.
     
  24. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    Sans l'ensemble du code, difficile à dire.
    display:block; est inutile dans #top, par contre il l'est dans #top a
     
  25. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    A étant un élément en ligne, on ne peut pas lui attribuer de largeur ni de hauteur, à moins de recourir à display: block.

    La meilleure solution est de combler le vide de cet élément, pour qu'il soit repéré comme cliquable par n'importe quel utilisateur.
     
  26. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 018
    J'aime reçus:
    133
    Oui j'avais oublié de préciser que pour ce faire il faut mettre la balise a en display:block (ce qui est certes fonctionnel mais pas très propre au final).
     
  27. dop20vt
    dop20vt WRInaute occasionnel
    Inscrit:
    23 Juin 2007
    Messages:
    455
    J'aime reçus:
    0
    Code:
    #top a
    {
    margin-left: 20px;
    width: 640px;
    height: 260px;
    background: url(images/logo_top.jpg);
    display: block;
    }
    "#top a" sinon tes paramètres ne s'appliquent qu'au div hors c'est le lien qui doit posséder ces paramètres.
     
Chargement...
Similar Threads - [CSS] Formatage liens Forum Date
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[CSS] bouton submit + image arriere plan Développement d'un site Web ou d'une appli mobile 20 Avril 2009
[CSS]Positionner la colonne centrale en haut du source Développement d'un site Web ou d'une appli mobile 29 Mars 2009
[Résolu] [CSS] Lien sur tout un div Développement d'un site Web ou d'une appli mobile 23 Février 2009
[CSS] L'élément body Développement d'un site Web ou d'une appli mobile 21 Décembre 2008
[CSS] : menus déroulants Développement d'un site Web ou d'une appli mobile 15 Décembre 2008
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] (encore!) pas compatible FF Développement d'un site Web ou d'une appli mobile 30 Juin 2008