Bouton CSS HTML

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Bouton CSS HTML

lola690

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);
}

Publicité

billgatesanonym

Au lieu de

Escrire

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

Message cité 1 fois

lola690

billgatesanonym a écrit :

Au lieu de

Escrire

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 !

vanish

Ce qui brûle, brûle !

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

FORUM HardWare.fr

Programmation

HTML/CSS

Bouton CSS HTML

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?
Plus de sujets relatifs à : Bouton CSS HTML

Page générée en 0.042 secondes