Sujet Précédent Sujet Suivant

Un lien sur deux.

Fermé
J.Argus - 3 déc. 2011 à 21:43
 J.Argus - 4 déc. 2011 à 16:15
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 mardi 29 novembre 2011 Statut Membre Dernière intervention 1 avril 2015 37
4 déc. 2011 à 15:31
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
4 déc. 2011 à 16:15
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 mardi 29 novembre 2011 Statut Membre Dernière intervention 1 avril 2015 37
3 déc. 2011 à 21:50
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
3 déc. 2011 à 22:03
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
4 déc. 2011 à 14:32
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 mardi 29 novembre 2011 Statut Membre Dernière intervention 1 avril 2015 37
4 déc. 2011 à 15:14
es balise <br> comme tu dit faut les écrires comme ça : <br />
0
Zkryvix Messages postés 149 Date d'inscription mardi 29 novembre 2011 Statut Membre Dernière intervention 1 avril 2015 37
4 déc. 2011 à 15:15
Ah oui et dans les style c'est pas background:url mais background-image:url

:)
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
lien copié
alaurore -
LEFEUVRE -

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

11 réponses
Lien phishing android
mcafferty -
mcafferty -

8 réponses