Un lien sur deux.

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

4 réponses

Réponse 1 / 4
Zkryvix Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   37
 
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>
2
J.Argus
 
Merci pour votre réponse.
J'ai simplifier mon code CSS.
Maintenant toute mes rubrique change de background. Mais il me reste toujours ce problème de liens. Merci tout de même.
0
Réponse 2 / 4
Zkryvix Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   37
 
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,
0
Réponse 3 / 4
J.Argus
 
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"
0
Réponse 4 / 4
J.Argus
 
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.
0
Zkryvix Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   37
 
es balise <br> comme tu dit faut les écrires comme ça : <br />
0
Zkryvix Messages postés 149 Date d'inscription   Statut Membre Dernière intervention   37
 
Ah oui et dans les style c'est pas background:url mais background-image:url

:)
0

Discussions similaires

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Retrouver liens copiés sur le téléphone
SAMA -
Peterson -

3 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses