Le même avec l'image.

7 décembre 2005 à 18:56:08

Rebonsoir à tout le monde, voila j'ai un petit problème avec mon menu qui lorsque je mets ma souris dessus j'ai mon image qui n'ait pas centré.

Je ne maitrise pas bien le CSS et je me tourne vers vous pour résoudre mon problème.

D'avance merci.

Ci-joint l'image de mon problème.
Image utilisateur

dworkin

7 décembre 2005 à 18:58:13

Bonsoir,

pourrais-tu nous donner un petit bout de code, qui puisse nous aider à résoudre ton problème ?

pat34

7 décembre 2005 à 19:06:53

Le code /***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Comic sans MS,Arial,sans-serif;
color: #ffff66;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: url("fondnoir.gif") fixed;
}

/************** header tag styles **************/

h1{
font: bold 100% Comic sans MS, Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Comic sans MS, Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Comic sans MS, Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Comic sans MS, Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Comic sans MS, Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95%;

}

/************** utility styles *****************/

#utility{
font: 80% Comic sans MS,Verdana,sans-serif;
position: absolute;
top: 16px;
right: 10px;
color: #919999;
}

#utility a{
color: #ffffff;
text-decoration: none;
}

#utility a:hover{
color:#ffff66;
font-weight: bold;
font-style: italic;
text-decoration: none;
}

/************* globalNav styles ****************/

#globalNav{
position: absolute;
width: 100%;
min-width: 640px;
height: 32px;
padding: 0px ;
background-image: url("glbnav_background.gif");

}

#globalNav img{
margin-bottom: -4px;
}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:-1px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0;
margin: 0;
left: 10px;
right:10px;
z-index: 100;

}

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 4px 10px 4px 5px;
border-right: 1px solid #8FB8BC;
text-decoration: none;
}

a.glink:hover{
background-image: url("glblnav_selected1.gif");

color: #ffff66;
text-decoration: none;
}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
text-decoration: none;
}

.subglobalNav a:hover{
color: #ffff66;
text-decoration: underline;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: bold;
font-variant: small-caps;
}

#pageContent{
padding: 0px 10px 0px 0px;
border-right: 1px solid #ccd2d2;
color:#ffff00;
width: "100%";
}

/********************* end **********************/

Je ne sais pas si c'est comme ça qu'il faut faire.

le_stoppeur

7 décembre 2005 à 20:07:44

Même si tu nous a donné ton css entièrement, on ne peut pas être au courant de la partie qui "bug".
Si ton site est en ligne, montre-nous le lien...

Mais si c'est ce que je pense, rajoute dans la partie de ton css correspondante:
background-position: center;

Après, comme je ne sais pas à quel partie du css correspond ton problème, je ne peux pas te l'assurer à 100% :honte:

, donc la meilleure chose reste que tu nous montre le site en ligne.

pat34

7 décembre 2005 à 20:44:56

Mon site n'est pas en ligne, voila le HTML correspondant

</script>
<base target="text">
</head>
<body onmousemove="closesubnav(event);">
<div id="masthead">
<h1 id="siteName">Site pour les élèves de Mr .... .</h1>

<div id="globalNav">
<img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr">
<div id="globalLink">
<a href="heading.html" target="_self" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Accueil</a>
<a href="heading.html" target="_self" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Cours ANALOGIQUE</a>
<a href="heading.html" target="_self" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Cours NUMÉRIQUE</a>
<a href="heading.html" target="_self" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Technologie composants</a>
<a href="heading.html" target="_self" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Fabrication</a>
<a href="heading.html" target="_self" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Logiciels</a>
<a href="heading.html" target="_self" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Projets</a>
<a href="heading.html" target="_self" id="gl8" class="glink" onmouseover="ehandler(event,menuitem8);">Liens</a>
</div>

</div>


et le css est :

/************* globalNav styles ****************/

#globalNav{
position: absolute;
width: 100%;
min-width: 640px;
height: 32px;
padding: 0px ;
background-image: url("glbnav_background.gif");

}

#globalNav img{
margin-bottom: -4px;
}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:-1px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0;
margin: 0;
left: 10px;
right:10px;
z-index: 100;

}

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 4px 10px 4px 5px;
border-right: 1px solid #8FB8BC;
text-decoration: none;
text-align: center;
}

a.glink:hover{
background-image: url("glblnav_selected1.gif");
background-position:middle;
color: #ffff66;
text-decoration: none;
}

D'avance merci.