Bouton CSS HTML
Bouton CSS HTML - HTML/CSS - Programmation
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 ?
Marsh Posté le 18-04-2011 à 10:08:38
| billgatesanonym a écrit : Au lieu de
|
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 !
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 
)
- 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 
Sujets relatifs:
- mettre le bouton "parcourir " dans une grid
- background non visible dans email HTML
- CSS: mise en page en vrac depuis firefox4
- [Javascript] Lier un bouton à un player
- [Résolu] Sélectionner une classe CSS selon le navigateur ?
- Bon livre HTML 5 CSS3 voir Jquery
- Centrer video Flash dans page html
- [CSS] Problème d'affichage!
- [VIEW] > avoir la main d'afficher ou non une image html helper
- [HTML/CSS]Submit d'un form (touche entrée) avec bouton submit perso?
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 :
HTML :
<div class="info" href="info.html">info</a></div>
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);
}