Un lien sur deux.
J.Argus
-
J.Argus -
J.Argus -
Bonjour,
Actuellement débutant en langage web, je souhaite réalisé une barre de menu en HTML/CSS composé d'image renvoyant a une page chacune ,qui, changerons au passage de la souris.
J'ai réussi a crée mes <div> et mon css. Simplement j'ai pour l'instant 4 catégorie dans mon menu, mais seulement un lien sur deux fonctionne. l'autre a bien appliqué le "Hover" mais n'est pas "cliquable".
Merci de votre compréhension.
Ps : Je me suis servie de ce tuto pour réalisé ma page :
http://fr.tuto.com/css/changer-l-apparence-d-une-image-au-passage-de-la-souris-css,18291.html#tab_avis
Actuellement débutant en langage web, je souhaite réalisé une barre de menu en HTML/CSS composé d'image renvoyant a une page chacune ,qui, changerons au passage de la souris.
J'ai réussi a crée mes <div> et mon css. Simplement j'ai pour l'instant 4 catégorie dans mon menu, mais seulement un lien sur deux fonctionne. l'autre a bien appliqué le "Hover" mais n'est pas "cliquable".
Merci de votre compréhension.
Ps : Je me suis servie de ce tuto pour réalisé ma page :
http://fr.tuto.com/css/changer-l-apparence-d-une-image-au-passage-de-la-souris-css,18291.html#tab_avis
4 réponses
-
Tien je te donne mon code source que j'ai fait avec quand on passe la souris
Dailleur dans ton code tu a plein de truc inutile comme .band a:hover ta juste besoin de mettre .band:hover a moin que t'a aussi d'autre class que des lien nommée band
sur le choix le fond change:
Un petit screen : ici
la ou c'est foncé j'ai ma souris dessus
<?php include('config.php') ?>
<!DOCTYPE html>
<html lang="fr">
<head>
<style>
body
{
background:#e2f6ff url('image/background.gif') center top no-repeat;
unicode-bidi:normal;
}
a:hover
{
padding-right: 35px;
background-color: transparent;
}
.choix
{
background-image: url('image/choix.jpg');
}
.choix:hover
{
background-image: url('image/webx-icon.png');
}
a
{
color: Blue;
margin-left:50px;
}
.title {
color:Menu;
text-align:center;
}
.C
{
background-color:Menu;
color:Blue
}
.C:hover
{
background-color: Aqua;
}
h3
{
color: ButtonFace;
margin-left:50px;
}
.centre
{
text-align:center;
}
.link:hover
{
padding-right:25px;
}
#titre:hover{}
</style>
<meta charset="utf-8" />
<title>Blue Books</title>
</head>
<body >
<div class="centre">
<br/>
<h1 class="title">
Bienvenue sur BlueBooks Le portail Bleu :
</h1>
<div class = choix>
<h2> <a href="forum.php">Forum</a> </h2>
</div>
<br/>
<div class = choix>
<h2> <a href="http://www.minextreme.fr/v2/" target="_blank">Radio</a> </h2>
</div>
<br/>
<div class="choix">
<h2> <a href="telechargement.php">Téléchargement</a> </h2>
</div>
<br/>
<div class="choix">
<h2> <a href="http://upload.minextreme.fr/">Stockage en ligne</a> </h2>
</div>
<br/>
<div class="choix">
<h2> <a href="contact.php">Nous Contacter</a> </h2>
</div>
<br/>
<div class="choix"> <a href="login.php"> Se connecter </a> </div>
<div class="C">
@Zkryvix © Copyright
</div>
</div>
<br/>
<div align="center">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlueBooks%2F139651032794960&width=294&colorscheme=light&show_faces=false&border_color=Blue&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:294px; height:62px;" allowTransparency="true"></iframe>
</div>
</body>
</html> -
je pourrait t'aider mais je comprend pas, développe ta question et met si possible le code source (pas tout le code juste la ou sa fonctionne pas)
cordialement, -
Alors voila le css des 4 "titre" :
.bio a
{
background:url(../image/bttnBio.jpg);
width:110px;
height:20px;
display:block;
margin-left:235px;
}
.bio a:hover
{
background:url(../image/HoverbttnBio.jpg);
width:110px;
height:20px;
display:block;
margin-left:235px;
}
.band a
{
background:url(../image/bttnBand.jpg);
width:110px;
height:20px;
display:block;
margin-left:345px;
margin-top:-20px
}
.band a:hover
{
background:url(../image/HoverbttnBand.jpg);
width:110px;
height:20px;
display:block;
margin-left:345px;
margin-top:-20px
}
[................................]
et le html :
<body>
<div class="bio"><a href="bio.html"></a></div>
<div class="band"><a href="band.html"></a></div>
<div class="image"><a href="image.html"></a></div>
<div class="officiel"><a href="officiel.html"></a></div>
<div class="fanbook"><a href="fanbook.html"></a></div>
</body>
Disons que le lien pour aller sur bio.html ne marche pas, j'ai le curseur de la souris classique avec au passage le "hover" qui fonctionne ... mais pour aller sur band.html tous marche, j'ai dans mon navigateur la main "cliquable" -
Après plusieurs essaie et plusieurs modification ( ajout de balise < br > ... ) J'ai compris que me lien ne sont "cliquable" lorsqu'il sont a un niveau différent :
En image :
http://img823.imageshack.us/img823/3682/biocapt.jpg
http://img35.imageshack.us/img35/9018/bandcapt.jpg
Les lien "Image" et "officiel" fonctionne comme "Band"
Merci.
