[Résolu] prob lien avec hover par abbath_doom_occulta - page 1

ah !
voila le html :

Citation : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Vincent Metzger - Etat civil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style2" href="styles/style2.css" />
</head>
<body>

<div id="en_tete">

</div>

<div id="menu">
<h2>MENU</h2>
<div class="element_menu">
<h3>Accueil</h3>
<a href="index.html"><img src="images/home.gif" alt="Home" title="Retour à la page d'accueil"/></a>
</div>

<div class="element_menu">
<h3>Curriculum Vitae</h3> 
<ul>
<li><a href="etat_civil.html">Etat civil</a></li> 
<li><a href="experiences.html">Expériences</a></li>
<li><a href="formation.html">Formation scolaire</a></li>
<li><a href="langues.html">Langues</a></li>
<li><a href="competences.html">Compétences</a></li>
<li><a href="divers.html">Mais aussi...</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Projet professionnel</h3>
<ul><li><a href="projet.html">Détails</a></li></ul>
</div>

<div class="element_menu">
<h3>Téléchargements</h3>
<ul><li><a href="telechargements.html">Mon CV</a></li></ul>
</div>

<div class="element_menu">
<h3>Me contacter</h3>
<ul><li><a href="contact.html">Mes coordonnées</a></li></ul>
</div>

<div class="infos_site">
Site réalisé par Vincent Metzger<br/>
Dernière mise à jour le : 29/11/05<br/>
Nombre de visiteurs :<br/>
<script type="text/javascript" src="http://www.123compteur.com/compteurjour.php?votre_id=92203"></script><br/>
Actuellement : <script type="text/javascript" src="http://www.123compteur.com/compteurlive.php?votre_id=92213"></script> visiteur(s)

</div>

</div>

<div id="corps">

<h1>Etat civil</h1>
<p><img src="images/photo2.jpg" class="photo" alt="Photo de Vincent Metzger"/>
<strong>Vincent Metzger<br/>
Résidence Chopin<br/>
23 rue André Theuriet<br/>
57000 METZ<br/></strong></p>
<br/>
<p><img src="images/telephone1.gif" height="5%" class="telephonemail" alt="Téléphone :"/><strong> 06 76 95 20 74</strong></p><br/>
<p><a href="mailto:vincent_metzger@hotmail.com"><img src="images/arobase.gif" width="5%" class="telephonemail" alt="Téléphone :"/><strong> vincent_metzger@hotmail.com</strong></a></p>
Né le 1<sup>er</sup> avril 1982 à Phalsbourg (57).<br/>
23 ans.<br/>
Titulaire du Permis B, véhicule à disposition.<br/>
Célibataire, sans enfants.<br/>
Région d'origine : Alsace Bossue.

</div>

</body>
</html>

et le css qui va avec :

Citation : CSS

body /*propiétés appliquées à toute la page*/
{
font-size: 0.9em;
background-color: white;
color: black;
font-family: Arial, "Time News Roman", "Comic sans MS", serif;
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
text-align: justify;
}

#en_tete
{
width: 760px;
height: 100px;
margin: auto;
margin-bottom: 5px;
background-image: url("../images/banniere.png");
background-repeat: no-repeat;
}

.banniere
{
margin: auto;
margin-bottom: 10px;
}

#menu
{
float: left; /* Le menu flottera à gauche */
width: 190px; /* Très important : donner une taille au menu */
border: 2px solid black;
padding: 5px;
background-color: rgb(255,192,130);
text-align: center;
}

.element_menu
{
background-color: rgb(215,238,200);
border: 2px solid black;
padding: 0px;
margin-right: 5px;
margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* Tous les titres de menus */
{
color: rgb(240,120,0);
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
font-size: 1em;
list-style-image: url("../images/puce.gif"); /* On change l'apparence des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
text-align: left;
}

.infos_site
{
font-size: 0.7em;
background-color: rgb(255,216,191);
border: 2px solid black;
padding-bottom: 2px;
margin-right: 5px;
margin-bottom: 5px;
}

#corps
{
font-size: 1.1em;
margin-left: 210px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
padding-left: 2px;
padding-top: 0px;
color: black;
background-color: rgb(218,238,252); /* Une couleur de fond pour le corps */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

h1
{
border-bottom: 2px solid rgb(58,100,150);
font-size: 1.6em;
color: rgb(58,100,150);
text-align: center;
}

h2
{
font-size: 1.4em;
color: green;
text-align: center;
}

h3
{
margin: 5px;
font-size: 1em;
color: black;
text-align: center;
}

h4
{
font-size: 1.4em;
color: rgb(50,130,190);
border-bottom: 1px solid rgb(105,130,175);
}

#corps ul /*toutes les listes à puces contenues dans un h4*/
{
list-style-position: outside;
list-style-type: square;
padding-right: 5px;
margin-right: 5px;
}

a/*propriétés des liens*/
{
font-style: italic;
text-decoration: none; /* Les liens ne seront plus soulignés */
color: maroon;
}

a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
font-size: 1em;
}

a:hover /* Quand le visiteur pointe sur le lien */
{
background-color: rgb(231,180,200);
text-decoration: underline;
color: blue;
}

.accueil
{
font-family: "Comic sans MS", Arial, "Time News Roman", serif;
}

.telephonemail
{
float: left;
}

.photo
{
float: right;
}

.logo
{
float: right;
}

.outset
{
padding: 5px;
margin-bottom: 5px;
background-color: white;
border: 2px outset black;
font-family: "Comic Sans MS", Arial, "Time News Roman", serif;
}

.sujet
{
font-size: 1.1em;
color: rgb(150,50,50);
border-bottom: 2px solid rgb(150,50,50);
}

.description
{
font-size: 1.1em;
color: red;
}

.resultat
{
background-color: rgb(200,165,189);
}

.telecharger
{
padding: 10px;
}

.important
{
font-size: 1.1em;
color: red;
}

.compet
{
font-family: "Comic Sans MS", Arial, "Time News Roman", serif;
color: rgb(50,100,255);
}

.rubrique
{
font-size: 1.4em;
color: black;
text-decoration: underline;
}

.interet
{
font-size: 1.3em;
color: rgb(100,100,200);
text-decoration: underline;
}

.projet
{
font-family: "Comic Sans MS", Arial, "Time News Roman", serif;
margin: 10px;
text-align: justify;
text-indent: 20px;
}

abbath_doom_occulta

30 novembre 2005 à 15:05:08

salut à tous !
j'ai un problème d'affichage... seulement avec Internet Explorer, pas Firefox...
c'est un lien de type "mailto" avec un hover (que g appliqué à tous les liens) qui se trouve dans le corps de la page, et quand je passe dessus avec la souris, une partie du menu qui se trouve sur la gauche disparait ! et uniquement sur IE ! pour que la partie réapparaisse, il suffit que je passe avec la souris sur n'importe quel lien du menu... bref, c'est pas top !
si qq'1 a une idée, il est le bienvenu !

apognu

30 novembre 2005 à 15:17:47

Ca te dirais de nous aider en nous donnant le site concerné ? >_<

30 novembre 2005 à 17:04:26

où avais-je la tête ? :-°

c'est sur cette page :
<lien url="http://perso.modulonet.fr/~vmetzger/index.html"></lien>
donc, sous internet explorer, qd on survole mon adresse mail, y'a une partie du menu qui fout le camp...

jawadnet

30 novembre 2005 à 17:54:51

Bonjour,
Ben non chez moi sa marche bien;
Ton mailto a un hover comme je voie et tout marche bien !!

30 novembre 2005 à 17:59:47

ah bon ? même avec internet explorer ??
pourtant, g bien testé avec les 2 (IE et firefox) !
de quoi ça peut bien venir alors ?

mohyavee

30 novembre 2005 à 18:09:43

Salut,
Je constate également le problème chez moi. Tu pourrais nous montrer le code et la feuille css ?

30 novembre 2005 à 18:13:42

scaler

30 novembre 2005 à 18:43:16

Salut,

juste un petite question en passant... J'ai pas trop le temps de lire tout le code

.

Est ce que tu as toujours le même problème lorsque tu enlèves ton compteur ?

++

fg63

30 novembre 2005 à 18:46:30

Waow !!

Tu viens d'inventer la guillotine à menu !

Vive la révolution du css !

:lol:

30 novembre 2005 à 18:53:32

Citation : fg63

Waow !!

Tu viens d'inventer la guillotine à menu !

Vive la révolution du css !

même pas fait exprès !! :magicien:

Citation : scaler

Est ce que tu as toujours le même problème lorsque tu enlèves ton compteur ?

change rien du tout, j'avais déjà le problème avant..

Deeder

30 novembre 2005 à 18:58:32

Je suis sour linux donc je ne vois pas le bug, n'ayant pas IE.
Par contre, essaye de retirer ton hover pour voir si le problème vient vraiment de là ou pas. Si oui, essaye de refaire le code autrement ou en remplaçant une propriété par une propriété afin d'isoler la fautive...

30 novembre 2005 à 19:26:28

Yop,

Apparemment, ce serait la propriété background-color qui serait à l'origine du bug. Toutefois, le code dans son ensemble n'est pas très propre. Beaucoup de balises et d'attributs inutiles, des encapsulations hasardeuses, des floats qui n'ont pas lieu d'être. Je pense que le résultat obtenu sur IE est le reflet de l'imprécision du code.

Bon courage.

30 novembre 2005 à 20:12:18

pour ma défense, g dû faire mon site à la hâte (comme tu l'as deviné, je cherche du boulot, et ça presse...

)
en tous cas, merci, g supprimé le background-colr du hover, et ça marche... jvé donc laisser ça comme ça.. et promis, jvé retoucher mon code !!

prob lien avec hover

prob lien avec hover

Supprimer

Modérer

Signaler le message aux modérateurs