Bouton CSS HTML

Bouton CSS HTML - HTML/CSS - Programmation

Marsh Posté le 13-04-2011 à 17:35:45    

Bonjour à tous,
 
Je commence en CSS HTML...
J'ai un petit problème avec un bouton qui n'apparaìt pas (ni dans firefox, ni sous IE)... J'ai tout essayé mais je n'arrive pas à trouver la solution.
Quelqu'un peut-il m'aider ??? Merci!!!  
 
Voici le code :
 
 
 

Citation :


HTML :
<div class="info" href="info.html">info</a></div>


 

Citation :


CSS :
 
.info{
 width:223px;
 height:165px;
 position:absolute;
 margin-top:635px;
 margin-left:778px;
 background-image:url(img/info.png);
 text-indent:-9999px;
 
}
.info:link{
 background-position:0 0;
 }  
 
.info:visited {
 background-position:0 0;
 }
 
.info:active {
 background-position:0 0;
 }
 
 
.info:hover {
 position:absolute;
 height:184px;
 width:223px;
 margin-top:616px;
 margin-left:778px;
 background-image:url(img/info2.png);
 }

Reply

Marsh Posté le 13-04-2011 à 17:35:45   

Reply

Marsh Posté le 13-04-2011 à 21:56:32    

Au lieu de

<div class="info" href="info.html">info</a></div>


Escrire

<div class="info"><a href="info.html">info</a></div>


 
Si ce n'est pas ça, alors, est-ce que vous pourriez nous décrire un peu plus ce qui ne va pas ?

Reply

Marsh Posté le 18-04-2011 à 10:08:38    

billgatesanonym a écrit :

Au lieu de

<div class="info" href="info.html">info</a></div>


Escrire

<div class="info"><a href="info.html">info</a></div>


 
Si ce n'est pas ça, alors, est-ce que vous pourriez nous décrire un peu plus ce qui ne va pas ?


 
 
Merci pour la réponse mais je n'arrive toujours pas à faire fonctionner les liens: Le "a href" ne fonctionne pas.
Voici le code intégral...
 
HTML :
 
<body>
 
<div class="container">
 <div class="touch"></div>
 <div class="home"><a href="index.html" border="0" title="home" style="z-index:10;">home</a></div>
 <div class="bloc">
   
    <div class="img1"> <a href="puzzle.html" border="0" title="puzzle" style="z-index:0;" >puzzle</a></div>
    <div class="img2"><a href="memory.html" border="0" title="memory" style="z-index:0;">memory</a></div>
    <div class="img3"><a href="dessin.html" border="0" title="dessin" style="z-index:0;">dessin</a></div>
    <div class="img4"><a href="coloriage.html" border="0" title="coloriage" style="z-index:0;">coloriage</a></div>
 </div>
 
    <div class="info"><a href="info.html" border="0" title="dessin" style="z-index:0;">info</a></div>
    <div class="perso"></div>
 
</div>
</body>
 
 
CSS :
 
@charset "utf-8";
/* CSS Document */
 
*{outline:none;
margin:0;
padding:0;
border:0;
}
 
body{
 background-color:#99cc66;
 height:100%;
 width:100%;
 margin: 20 0 0 0 ;
 }
 
.container {
 height:800px;
 width:1000px;
 margin:auto;
 background-image:url(img/fond.jpg);
 }
 
.touch{
 width:268px;
 height:116px;
 position:absolute;
 margin-top:10px;
 margin-left:30px;
 background-image:url(img/logo.png);
}
 
 
.perso{
 width:326px;
 height:245px;
 position:absolute;
 margin-top:555px;
 margin-left:0px;
 background-image:url(img/perso.png);
}
 
.contact{
 width:108px;
 height:108px;
 position:absolute;
 margin-top:50px;
 margin-left:800px;
 background-image:url(img/contact.png);
}
 
.main{
 width:326px;
 height:245px;
 position:absolute;
 margin-top:555px;
 margin-left:0px;
 background-image:url(img/perso.png);
}
 
.table{
 width:326px;
 height:245px;
 position:absolute;
 margin-top:555px;
 margin-left:0px;
 background-image:url(img/perso.png);
}
 
.info{
 width:223px;
 height:165px;
 margin-top:285px;
 margin-left:778px;
 background-image:url(img/info.png);
 text-indent:-9999px;
 z-index:0;
}
.info:link{
 
 background-position:0 0;
 }  
 
.info:visited {
 background-position:0 0;
 }
 
.info:active {
 background-position:0 0;
 }
 
 
.info:hover {
 background-position:0 0;
 height:184px;
 width:223px;
 margin-top:266px;
 margin-left:778px;
 background-image:url(img/info2.png);
 }
 
.home{
 width:117px;
 height:93px;
 position:absolute;
 display:block;
 float:left;
 margin-top:20px;
 margin-left:870px;
 background-image:url(img/home.png);
 text-indent:-9999px;
}
 
.home:link{
 
 background-position:0 0;
 }  
 
.home:visited {
 background-position:0 0;
 }
 
.home:active {
 background-position:0 0;
 }
 
 
.home:hover {
 background-position:0 0;
 height:93px;
 width:117px;
 background-image:url(img/home2.png);
 }
 
.puzzle{
 position:absolute;
 width:1000px;
 height:800px;
 margin-top:0px;
 margin-left:0px;
}
 
.memory{
 position:absolute;
 width:1000px;
 height:800px;
 margin-top:0px;
 margin-left:0px;
}
 
.dessin{
 position:absolute;
 width:1000px;
 height:800px;
 margin-top:0px;
 margin-left:0px;
}
 
.coloriage{
 position:absolute;
 width:1000px;
 height:800px;
 margin-top:0px;
 margin-left:0px;
}
 
 
.bloc {
 width:1000px;
 height:350px;
 display:block;
 float:center;  
 margin-top:0px;
 }
 
 
.img1{
 position:relative;
 float:left;
 margin-top:250px;
 margin-left:25px;
 height:238px;
 width:232px;
 background-image:url(img/puzzle.png);
 background-repeat: no-repeat;  
 text-indent:-9999px;
 }
.img1:link{
 
 background-position:0 0;
 }  
 
.img1:visited {
 background-position:0 0;
 }
 
.img1:active {
 background-position:0 0;
 }
 
 
.img1:hover {
 background-position:0 10px;
 height:238px;
 width:232px;
 background-image:url(img/puzzle2.png);
 }
 
.img2{
position:relative;
 float:left;
 margin-top:240px;
 height:238px;
 width:232px;
 background-image:url(img/memory.png);
 background-repeat: no-repeat;  
 text-indent:-9999px;
 }
 
.img2:link{
 
 background-position:0 0;
 }  
 
.img2:visited {
 background-position:0 0;
 }
 
.img2:active {
 background-position:0 0;
 }
 
 
.img2:hover {
 background-position:0 10px;
 height:238px;
 width:232px;
 background-image:url(img/memory2.png);
 }
 
.img3{
position:relative;
 float:left;
 margin-top:240px;
 height:238px;
 width:232px;
 background-image:url(img/dessin.png);
 background-repeat: no-repeat;  
 text-indent:-9999px;
 }
 
.img3:link{
 
 background-position:0 0;
 }  
 
.img3:visited {
 background-position:0 0;
 }
 
.img3:active {
 background-position:0 0;
 }
 
 
.img3:hover {
 background-position:0 10px;
 height:238px;
 width:232px;
 background-image:url(img/dessin2.png);
 }
 
 
.img4{
 position:relative;
 float:left;
 margin-top:240px;
 height:238px;
 width:242px;
 background-image:url(img/coloriage.png);
 background-repeat: no-repeat;  
 text-indent:-9999px;
 }
.img4:link{
 
 background-position:0 0;
 }  
 
.img4:visited {
 background-position:0 0;
 }
 
.img4:active {
 background-position:0 0;
 }
 
 
.img4:hover {
 background-position:0 10px;
 height:238px;
 width:242px;
 background-image:url(img/coloriage2.png);
 }
 
 
J'ai aussi essayé : <a class="info" href="info.html" border="0" title="dessin" style="z-index:0;">info</a>
ça fonctionne sur tous les boutons sauf le bouton "info" qui n'apparaît pas.
Bref, je ne sais plus quoi faire !

Reply

Marsh Posté le 19-04-2011 à 11:28:55    

Salut,
 
plusieurs pistes simples à vérifier :
 
- simple problème de position de ton élément (il est là, mais pas ou tu cherche :p)
- dans le même ordre d'idée, je vois que met des z-index a 0 sur tes liens, possibilité qu'un élément en absolute soit par dessus ton lien ?
- url du background invalide
 
Pour vérifier tout ça, première chose à faire, enlevé le text-indent le temps du debuggage, comme ça, background ou pas background, tu verra ton lien ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed