Tweet
Bonjour,
J'aimerai créée une div "info pratique" avec la possibilité de fermer la div en cliquant sur la croix comme sur ce site : http://www.georgiaaquarium.org/ (bannière orange)
J'ai bien créée ma div avec une croix et j'utilise onclick dans le body. Quand je clique sur la croix ma div se ferme bien.
Le problème c'est que quand je clique sur un élément en dessous de ma div ou sur le texte de ma div et bien ma div se ferme et je ne comprends pas pourquoi puisque je n'ai pas cliqué sur la croix.
Je souhaite que ma div se ferme seulement quand je clique sur la croix. Voici le code que j'utilise si quelqu'un peut me guider...
Mon code HTML :
Mon code CSS :
Je viens de me rendre compte en copiant mon code que je ne précise pas "en cliquant sur la croix" puisque getElementById c'est "info" : toute ma div. Or je souhaiterai que l'effet fonctionne uniquement sur la croix.
Du coup je ne vois pas comment coder cela... Si quelqu'un peut me guider?
Merci beaucoup!
Bonne journée
J'aimerai créée une div "info pratique" avec la possibilité de fermer la div en cliquant sur la croix comme sur ce site : http://www.georgiaaquarium.org/ (bannière orange)
J'ai bien créée ma div avec une croix et j'utilise onclick dans le body. Quand je clique sur la croix ma div se ferme bien.
Le problème c'est que quand je clique sur un élément en dessous de ma div ou sur le texte de ma div et bien ma div se ferme et je ne comprends pas pourquoi puisque je n'ai pas cliqué sur la croix.
Je souhaite que ma div se ferme seulement quand je clique sur la croix. Voici le code que j'utilise si quelqu'un peut me guider...
Mon code HTML :
Code HTML:
<body onclick="document.getElementById('info').style.display='none';"> <div style="background:#005181;" id="info"> <a class="close" href="#">Close</a> <div class="image"> <img alt="Alert!" src="http://ac.img.v4.skyrock.net/ac3/boxing-club-villerupt/pics/3101581765_1_5_VvgUq18g.gif" width="180px"> </div> <div class="text"> <p style="margin-top : 4%;"><strong>Info pratique : Un petit exemple d'info pratique : En raison du feu d'artifice, nous seront exceptionnellement fermé le samedi 14 juillet 2012 toute la journée. </strong></p> </div> </div> <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p> </body>
Code:
<style>
#info {
background: none repeat scroll 0 0 #EC5217;
border: 2px solid #FFFFFF;
height: 140px;
margin: 20px auto;
overflow: hidden;
padding: 12px 0;
position: relative;
width: 924px;
}
#info .image {
left: 0;
position: absolute;
text-align: center;
top: 20px;
width: 194px;
}
#info .text {
left: 194px;
position: absolute;
top: 20px;
width: 730px;
color:white;
}
#info a.close {
background: url("http://www.georgiaaquarium.org/new/images/alert_close_button.png") no-repeat scroll left top transparent;
clear: both;
display: block;
height: 27px;
position: absolute;
right: 6px;
text-indent: -9999px;
top: 5px;
width: 26px;
}
</style>
Du coup je ne vois pas comment coder cela... Si quelqu'un peut me guider?
Merci beaucoup!
Bonne journée
Commentaire