28173 sujets

CSS et mise en forme, CSS3

[Résolu ][mais en javascript ^^] Bloc a et image sous ie

bonjour,

    #div_lien {
    position:relative;
    width:400px;
    height:400px;/* pour l’exemple */
    }

    #div_lien a {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }

    //// dans le xhtml ////
    <div id="div_lien">
    <a href="http://www.google.fr"></a>
    </div>


J'essaye une bidouille de bloc faisant un lien comme dans le code ci dessus ,mais si je place une image dans le xhtml de la div_lien sous ie, ça ne marche plus, l'image en roll affiche des icônes sauver/imprimer...
Modifié par bwbk (18 Dec 2006 - 23:34)
Bonjour ...

Ton code me semble bien compliqué.
Si j'ai bien compris tu veux faire un lien-image en rollover ?

Pourquoi dans ce cas ne pas tenter simplement de transformer ton lien en bloc et lui appliquer un background-image par défaut qui change au rollover ?!? Smiley murf
j'aimerais bien mais c'est du code pour un back office donc il faut simplifier la saisie et ne pas mettre l'image dans le css...
Smiley sweatdrop
Je cherche toujours une solution, le but est de rendre une div (en class) entièrement cliquable, sachant que la div contiendra une image et un texte... et pas question de mettre l'image dans le css.

Est-ce que je peux caler un div transparent au dessus (z-index) ou quelqu'un a une meilleur solution ? Smiley rolleyes Smiley lol
bwbk a écrit :
Le but est de rendre une div (en class) entièrement cliquable, sachant que la div contiendra une image et un texte... et pas question de mettre l'image dans le css.
Est-ce que je peux caler un div transparent au dessus (z-index) ou quelqu'un a une meilleur solution ? Smiley rolleyes Smiley lol

Si tu veux rendre un élément cliquable, (pour aller quelque part ou ouvrir quelque chose), il faut utiliser une balise <a>. Cette balise peut notamment contenir une image et du texte.
Je te conseille donc d'insérer l'image dans ton lien, comme ceci :
<a href="http://www.google.fr" title ="intitulé du lien">
  <img alt="descriptif de l'image" />
  texte du lien
</a>
Bonjour,

Sans JS mais la méthode sandwich un peu agrémenté pour IE6.
Juste pour le fun...

<style type="text/css">
*{padding: 0; margin: 0;}

#conteneur{
width: 50%;
background: yellow;
height: 400px;
margin: auto;
padding-top: 20px;
}

#image{
float: left;
width: 100px;
height: 100px;
background: green;
margin: 10px;
}


#centre{
position: relative;
margin: auto;
width: 300px;
height: 200px;
background: red;
}


 

a{
position: absolute;
top: 0;
left: 0;
background: url(transp.gif); /* background: transparent ou none ne marche pas sous IE6 !! */
width: 300px;
height: 200px;
}

#centre p{
margin: 10px;
}
</style>
</head>

<body>
<div id="conteneur">

	<div id="centre">
		<div id="image">Image</div>	
		
		<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac velit. Maecenas ultrices, quam vitae ultrices aliquet, eros nunc auctor odio, nec facilisis pede diam id libero.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
		<a href="#" alt="" ></a>
	</div>
</div>

</body>


transp.gif est un pixel transparent, IE6 ne supportant pas dans ce cas background: none ou transparent (le bloc est cliquable mais pas les textes !!)
wouah ^^ merci ^^ je ne vais pas pouvoir testé pour mon cas(ou pas tout de suite) mais merci Smiley lol
il faudrait faire un point pour savoir si ça passe sous ie7 Smiley lol
Sujet clos
Aller à