CSS >> Image de background et lien

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par gcvoiron, 4 Décembre 2006.

  1. gcvoiron
    gcvoiron WRInaute occasionnel
    Inscrit:
    19 Octobre 2005
    Messages:
    459
    J'aime reçus:
    0
    Bonjour,

    Le header de mon site (l'image) est affiché en background par mon css :

    HTML :

    Code:
    <tr>
    <td width="762" height="133" class="header">&nbsp;</td>
    </tr>
    
    CSS :

    Code:
    .header
    {
    background:url(images/design/index_05.jpg);
    }
    Comment faire un lien sur ce header, qui est affiché en css?

    Merci.
     
  2. nadinem
    nadinem WRInaute discret
    Inscrit:
    3 Avril 2006
    Messages:
    113
    J'aime reçus:
    0
    Bonsoir,

    Tu as essyé d'accorder a .header les attributs d'un lien ?

    A+

    Nadinem.
     
  3. gcvoiron
    gcvoiron WRInaute occasionnel
    Inscrit:
    19 Octobre 2005
    Messages:
    459
    J'aime reçus:
    0
    Je ne comprends pas ce que tu veux me dire...
     
  4. Vincent1975
    Vincent1975 WRInaute occasionnel
    Inscrit:
    19 Octobre 2006
    Messages:
    381
    J'aime reçus:
    0
    Tu as sûrement essayé, et je suppose que ça ne marche pas, mais au cas où :
    Code:
    <tr>
    <a href=""><td width="762" height="133" class="header">&nbsp;</td></a>
    </tr>
    On sait jamais :wink:
     
  5. gcvoiron
    gcvoiron WRInaute occasionnel
    Inscrit:
    19 Octobre 2005
    Messages:
    459
    J'aime reçus:
    0
    Non, ça ne marche pas.
    Merci quand même.
     
  6. Dan_A
    Dan_A WRInaute discret
    Inscrit:
    21 Décembre 2005
    Messages:
    193
    J'aime reçus:
    0
    background est destiné à la décoration, rien de plus (pour préserver l'accessibilité).
    Les dimensions ne devraient pas apparaître.
    On peut toujours tricher et mettre un lien dans la cellule mais ce n'est pas une bonne idée.
     
  7. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    Cela devrait fonctionner
    voici le code

    Code:
    <a href="...." class="lien"></a>
    
    fichier css
    a.lien{
    display:block;
    width:100px;
    height:100px;
    background:url("xxxxx.jpg") no-repeat;
    }
    
     
  8. s2n
    s2n WRInaute discret
    Inscrit:
    30 Septembre 2006
    Messages:
    50
    J'aime reçus:
    0
    J'ai pas le temps de tester, mais essaies quelque chose comme ça:

    Code:
    <tr>
    <td width="762" height="133"><a class="header">&nbsp;</a></td>
    </tr>
    
    CSS :

    Code:
    .header
    {
    display:block;
    width:100%;
    height:100%;
    background:url(images/design/index_05.jpg);
    }
    
     
  9. gcvoiron
    gcvoiron WRInaute occasionnel
    Inscrit:
    19 Octobre 2005
    Messages:
    459
    J'aime reçus:
    0
    Ca a marché parfaitement avec la méthode de narayana!

    Merci beaucoup.

    :D
     
  10. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    pas de quoi ;-)
    Ca fonctionne car il faut mettre un display:block car les liens sont inligne d'habitude.
    Mais bon tu ne pourras pas référencer ton image...
     
  11. Vincent1975
    Vincent1975 WRInaute occasionnel
    Inscrit:
    19 Octobre 2006
    Messages:
    381
    J'aime reçus:
    0
    Que veux-tu dire par
    ?
     
  12. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    >> ?

    dans google image :)
     
  13. Vincent1975
    Vincent1975 WRInaute occasionnel
    Inscrit:
    19 Octobre 2006
    Messages:
    381
    J'aime reçus:
    0
    Ah, parce que l'image est sur la feuille de style ? Ok, je ne voyais pas pourquoi le principe de faire un lien pouvait le pénaliser. Merci :wink: .
     
  14. rednekk
    rednekk Nouveau WRInaute
    Inscrit:
    26 Septembre 2009
    Messages:
    3
    J'aime reçus:
    0
    Salut à tous !

    Super déterrage !

    Je voudrais faire la même chose, à quelque conditions prêt... Je m'explique.

    J'ai essayé la méthode de narayana qui fonctionne :

    Code:
    a.lien1{
    display:block;
    width:200px;
    height:100px;
    background:url(images/img1-2.JPG) no-repeat;
    Mais je voudrais savoir s'il est possible de faire changer l'image quand la souris passe dessus, tout en conservant la fonction de lien.

    Me suis-je bien expliqué ?
     
  15. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 011
    J'aime reçus:
    133
    Oui mais pour cette partie-là de ton besoin c'est davantage vers le javascript que tu devrais te tourner, pour, lors du survol de la souris sur le lien, changer l'image de background. Avec prototype ça se fait assez simplement.
     
  16. rednekk
    rednekk Nouveau WRInaute
    Inscrit:
    26 Septembre 2009
    Messages:
    3
    J'aime reçus:
    0
    Je m'en doutais un peu malheureusement :D

    Mais justement j'aimerais essayer de le faire en CSS... c'est vraiment trop compliqué ou impossible ?

    Prototype c'est ce logiciel ?... http://www.prototypejs.org/
    Je n'y connais absolument rien en Javascript et j'aurais voulu apprendre bien le CSS avant de passer à autre chose.
     
  17. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 011
    J'aime reçus:
    133
    Sinon oui en css tu devrais pouvoir le faire via un a.lien1:hover, dans lequel tu changerais le background.
     
  18. calouu
    calouu Nouveau WRInaute
    Inscrit:
    14 Décembre 2008
    Messages:
    15
    J'aime reçus:
    0
    Non, pas besoin de javascript. Du CSS suffit largement, et c'est bien plus simple et accessible !
    Il faut utiliser la pseudo-classe :hover.

    Code:
    a.lien1:hover {
    background:url(images/autre-image.jpg) no-repeat;
    }
     
  19. rednekk
    rednekk Nouveau WRInaute
    Inscrit:
    26 Septembre 2009
    Messages:
    3
    J'aime reçus:
    0
    Wahou ca marche :D Merci beaucoup vraiment !

    Je commence à comprendre de mieux en mieux les raccourcis, etc. Merci encore :D
     
  20. math95430
    math95430 Nouveau WRInaute
    Inscrit:
    27 Octobre 2009
    Messages:
    7
    J'aime reçus:
    0
    Bonjour,

    moi sa marchait...mais sa marche plus !

    C'est pour un portail. Et je ne vois pas ou est le problème, les image le CSS et l'HTML sont ds le meme dossier "leplusavancer".
    Le fond s'affiche (body) mais pas les boutons !

    Cordialement.
     
  21. calouu
    calouu Nouveau WRInaute
    Inscrit:
    14 Décembre 2008
    Messages:
    15
    J'aime reçus:
    0
    Le format .bmp est inadapté ! il faut prendre uniquement des .jpg, des .png ou des .gif
     
  22. math95430
    math95430 Nouveau WRInaute
    Inscrit:
    27 Octobre 2009
    Messages:
    7
    J'aime reçus:
    0
    Sa ne fonctionne pas. A mon avis le problème vien du HTML.(ce qui aurait des répercutions sur le CSS)

    PS: Les boutons fonctionnaient en bmp.
     
  23. calouu
    calouu Nouveau WRInaute
    Inscrit:
    14 Décembre 2008
    Messages:
    15
    J'aime reçus:
    0
    Le format bmp n'est pas adapté au web, je persiste et signe ! (lourd et moche)

    Sinon, pourquoi utiliser un doctype xhtml 1.1 ? Aucun intérêt dans ton cas, voire problématique avec IE. Prends du xhtml 1.0 ou du html 4.01.. et vu que tu as tendance à oublier la fermeture des balises, le html 4.01 me parait plus adapté.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	   "http://www.w3.org/TR/html4/strict.dtd">
    
    Vire le
    Code:
    <base href="file:///C:/Users/math/Desktop/leplusavancer/portail.html"><style xml:base="/C:/Users/math/Desktop/leplusavancer/" type="text/css">
    Ca ne sert à rien non plus, d'autant que le chemin est relatif à ton arborescence...

    Ne laisse pas des propriétés vides dans ta CSS (margin-bottom: ; par exemple). Efface les ou mets-les en commentaire.

    Et surtout, mets quelque chose en lien ! ;)
    Code:
    <p><a href="http://streaming.every-streaming.com/" class="lien">toto</a></p>
    <p><a href="http://upload.every-streaming.com/" class="lien1">tutu</a></p>
    
     
  24. math95430
    math95430 Nouveau WRInaute
    Inscrit:
    27 Octobre 2009
    Messages:
    7
    J'aime reçus:
    0
    8O Respect !Je m'incline, et en plus sa fonctionne ! :mrgreen:

    Merci énormement ! Jretiendrai la lecon ! ^^

    Cordialement.
     
  25. calouu
    calouu Nouveau WRInaute
    Inscrit:
    14 Décembre 2008
    Messages:
    15
    J'aime reçus:
    0
    Y'a pas de quoi ;)

    Cela dit, d'un seul coup, j'ai un doute : vu ton pseudo et les chemins /math/ ; aurais-tu l'intention de faire du MathML par hasard ? Car dans ce cas, c'est effectivement du xhtml 1.1 qu'il faut utiliser.

    Mais est-ce le cas pour ce site ?
     
  26. math95430
    math95430 Nouveau WRInaute
    Inscrit:
    27 Octobre 2009
    Messages:
    7
    J'aime reçus:
    0
    MathML? qu'est-ce?
     
  27. calouu
    calouu Nouveau WRInaute
    Inscrit:
    14 Décembre 2008
    Messages:
    15
    J'aime reçus:
    0
    Math Markup Language, qui permet d'écrire des formules mathématiques lisibles par le navigateur (enfin... sauf IE bien entendu qui ne l'implémente pas).

    Bon, donc ce n'est pas le cas... tu peux fermer la discussion et reprendre une vie normale ;)

    bon courage.
     
Chargement...
Similar Threads - CSS Image background Forum Date
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010
Background 2 images en CSS Développement d'un site Web ou d'une appli mobile 20 Novembre 2006
Comment ajouter une Balise Alt sur background-image CSS ? Développement d'un site Web ou d'une appli mobile 4 Avril 2006
Pb CSS > background-image Développement d'un site Web ou d'une appli mobile 12 Novembre 2005
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
CSS - Affichage de plusieurs images au passage de la souris Développement d'un site Web ou d'une appli mobile 19 Novembre 2017
Help CSS image par dessus texte Développement d'un site Web ou d'une appli mobile 7 Avril 2017
Image en CSS ou en HTML Débuter en référencement 19 Septembre 2015
image chargée en css Développement d'un site Web ou d'une appli mobile 8 Août 2015
Dégradé sur une image en CSS Développement d'un site Web ou d'une appli mobile 26 Mars 2015
Combine images using CSS sprites sur un site Joomla Débuter en référencement 18 Mars 2015
Image + texte cote à cote en CSS Développement d'un site Web ou d'une appli mobile 11 Décembre 2014
CSS : sélectionner les images flottantes Développement d'un site Web ou d'une appli mobile 15 Février 2013
Arborescence virtuelle, comment conserver les liens images, css, etc URL Rewriting et .htaccess 27 Novembre 2012
Alignement CSS + image Développement d'un site Web ou d'une appli mobile 17 Novembre 2012
[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 lien sur image transparente Développement d'un site Web ou d'une appli mobile 3 Février 2012