Css : Mettre un lien hypertexte sur un background

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ivoyages, 1 Juin 2011.

  1. ivoyages
    ivoyages WRInaute discret
    Inscrit:
    28 Septembre 2004
    Messages:
    87
    J'aime reçus:
    0
    Bonsoir,

    J'appelle un background depuis ma feuille de style comme ceci :

    Code:
    body {
    margin-top:24px;
    background-color:#FDFCFA;
    background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:1.5;
    }
    Comment appliquer au background un lien hypertexte ?

    Je suis preneur d'infos et d'idées car je ne vois pas du tout.

    Merci

    Greg
     
  2. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Salut,

    Je ne crois pas qu'il soit possible d'attribuer un lien à cet balise. A mon avis il faut créer une autre class auquel tu attribues une partie des éléments dans le genre :

    Code:
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:1.5;
    }
    .top{
    margin-top:24px;background-color:#FDFCFA;
    background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
    }
      </style>
    
    <a href="#"><div class="top"></div></a>
    ps: je peux me planter aussi!
     
  3. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 249
    J'aime reçus:
    0
    Tu risques pas d'avoir un site valide W3C en faisant ça. Depuis quand on met une balise block dans une balise inline ? :D

    La technique est de simplement donner une hauteur, largeur à ton lien ainsi que l'attribut magique: display:block;
     
  4. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Autant pour moi ^^. Donc du coup :
    Code:
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:1.5;
    }
    .top{
    margin-top:24px;
    background-color:#FDFCFA;
    background:url(../templates/temp/img/bckgrd-TheNorthFace.jpg) top center no-repeat;
    display:block;
    width:100px;
    height:100px;
    }
      </style>
    
    <a class="top" href="#">*</a>
    C'est bon la ?
     
  5. ivoyages
    ivoyages WRInaute discret
    Inscrit:
    28 Septembre 2004
    Messages:
    87
    J'aime reçus:
    0
    ça ne marche pas. Le background est en haut de page et le template en bas...

    Pour info, le site est ici h**p://www.i-trekkings.net. Le background est en place mais reste à placer le lien hypertexte...

    :)

    Greg
     
  6. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Tu as réussis ?
     
  7. ivoyages
    ivoyages WRInaute discret
    Inscrit:
    28 Septembre 2004
    Messages:
    87
    J'aime reçus:
    0
    oui un pote l'a fait pour moi... mais je n'ai pas encore regardé le code.

    Je le place pour info dès que j'ai 2 secondes.

    Merci pour avoir pris le temps de m'aider.
     
  8. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 249
    J'aime reçus:
    0
    Il a simplement viré ton background et l'a ajouté comme une simple image =D

    Code:
    <div id="page">
    <a href="http://www.i-trekkings.net/annuaire/redirec.php?id=1619"><img src="http://www.i-trekkings.net/templates/temp/img/bckgrd-TheNorthFace.jpg" alt="TheNorthFace" /></a></div>
     
  9. ivoyages
    ivoyages WRInaute discret
    Inscrit:
    28 Septembre 2004
    Messages:
    87
    J'aime reçus:
    0
    Voici ce qui a été fait :

    html :

    Code:
    <div id="page">
    <a href="http://www.i-trekkings.net/annuaire/redirec.php?id=1619" target="_blank"><img src="http://www.i-trekkings.net/templates/temp/img/bckgrd-TheNorthFace.jpg" alt="TheNorthFace" /></a></div>
    css :

    Code:
    #page {
    	width: 1902px;
    	/* × 929 */
    	/*height:auto;
    	margin: 0 auto;*/
    	left:50%;
    	top:0;
    	margin-left:-951px;
    	position: relative;
    	background:transparent;
    	height:3702px;
    	/height:3712px;
    	height /*\**/: 3714px\9
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    	#page {
    		height:3705px;
    	}
    }
    :)

    Greg
     
  10. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Il ya des trucs qui me trou le c*l dans ton css et j'aimerais bien comprendre certaines parties en rouge:
    /height:3712px;
    height /*\**/: 3714px\9
    et
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #page {
    height:3705px;
    }
    }
     
  11. ivoyages
    ivoyages WRInaute discret
    Inscrit:
    28 Septembre 2004
    Messages:
    87
    J'aime reçus:
    0
    J'peux pas t'expliquer... c'est un pote qui a fait ça :)
     
  12. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
    ce sont des hacks de css, qui ne sont pas compris par FF mais que IE, entres aitres, prend en compte, car les caractères "spéciaux" ne le gênent pas. d'où l'intérêt que ces hacks soient positionnés après la vraie affectation de height. Donc ff comprend pa 1° et l'applique et ie comprend les suivante
     
  13. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Merci Leonick mais même ton explication je ne la comprend pas :mrgreen: !
    J'ai bien compris que c'était un hack css mais c'est son fonctionnement que je ne pige pas.
     
  14. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 413
    J'aime reçus:
    0
  15. YoyoS
    YoyoS WRInaute accro
    Inscrit:
    14 Septembre 2006
    Messages:
    3 249
    J'aime reçus:
    0
    Par exemple tu veux une hauteur différente pour IE7- par rapport aux autres, tu fais:

    Code:
    .div {
    height: 50px; /* Pour tous les standards */
    /height: 0px; /* Lu que par IE 7- et écrase la valeur au dessus */
    -height: 23px; /* Lu que par IE 6- et écrase les valeurs au dessus */
    }
     
  16. tryan
    tryan WRInaute passionné
    Inscrit:
    20 Février 2005
    Messages:
    2 239
    J'aime reçus:
    0
    Ok, c'est bon à savoir ça ;). Je vais faire des testes..
     
  17. graphee
    graphee Nouveau WRInaute
    Inscrit:
    12 Octobre 2009
    Messages:
    3
    J'aime reçus:
    0
    yop, pour faire un background 100 ave un lien dessus il te faut 3 zones :

    1/ ton background
    2/ ton lien
    3 ta zone de contenu qui va venir par dessus pour éffacer le lien au centre d site, ainsi ton lien est partout par dessus ton fond peut importe la taille de l'écran.

    Code:
    <body>
        <div class="background">
    
        <a href="#" class="lien_pub"></a><!-- lien -->
    
            <div id="wrapper">
            CONTENU DE TON SITE
            </div>
    
        </div>
    </body>
    
    Code:
    #background {
        background: url("images/background.jpg") no-repeat scroll center 0 transparent !important;
        width: 100%;
    }
    
    .lien_pub { display:block; width:100%; height:100%; position:fixed}
    
    #wrapper {  width:1000px; margin:0 auto; position:relative;}
    
    
    très important : position fixed du lien, et position relative du centre!!!!
     
Chargement...
Similar Threads - Css Mettre lien Forum Date
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
CSS Google Shopping AdWords 23 Janvier 2020
style.css unique préférable avec link ou javascript ? Développement d'un site Web ou d'une appli mobile 25 Décembre 2019
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Contenu mixte vers http / css - réelle gravité ? Débuter en référencement 24 Septembre 2019
Extension Chrome utile pour afficher le code source HTML, JS, CSS Développement d'un site Web ou d'une appli mobile 5 Juillet 2019
css pour cookieconsent et apparence graphique. Développement d'un site Web ou d'une appli mobile 28 Avril 2019
Appliquer style CSS CMS GHOST Développement d'un site Web ou d'une appli mobile 21 Mars 2019