Aller au contenu

bug d'affichage sur une suite d'images alignées

baycris

Par baycris
dans (X)HTML et CSS

 Partager

Sujets conseillés

baycris

baycris

Posté
Posté

Bonjour à toutes et tous,

j'ai créé un menu avec 6 images que j'ai aligné.

Malheureusement j'ai un petit bug d'affichage sur firefox.

Ma dernière image parfois ce répète 3 fois...

Voici le code CSS :

/* menu Images */
.menu-image
{
	float: left;
        margin: auto 50px auto 50px;
	border: 0px;
	padding-top: 0px;
        height: 50px;
	width: 986px;
}

/* end Header */


.menu_btn_1 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn1-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	text-align:center;
	text-decoration: none;
}

.menu_btn_1 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn1-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_1 a:active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn1-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_1 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_2 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn2-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_2 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn2-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_2 active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn2-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_2 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_3 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn3-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_3 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn3-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_3 active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn3-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_3 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_4 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn4-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_4 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn4-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_4 active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn4-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_4 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_5 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn5-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_5 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn5-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_5 active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn5-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_5 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_6 a {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn6-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_6 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #ffffff;
	background-image: url(../images/btn6-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;	
}

.menu_btn_6 active {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn6-2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}
.menu_btn_6 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

et le code html :

<div class="menu-image">

     <div class="menu_btn_1"><a href="../index.php/mission.html" ><div style="margin-top:13px;">      ENTREPRISE
     </div></a></div>

     <div class="menu_btn_2"><a href="../index.php/conseil-architecture.html">
      <div style="margin-top:8px;">
            CONSEIL<br />
          ARCHITECTURE </div>
     </a></div>

     <div class="menu_btn_3"><a href="../index.php/ingenieurie-mise-en-oeuvre.html">
     <div style="margin-top:8px;">
          INGÉNIERIE<br />
           MISE EN OEUVRE </div></a>
     </div>

     <div class="menu_btn_4"><a href="../index.php/service-desk.html">
     <div style="margin-top:13px;">
          SERVICE DESK </div>
     </a></div>

     <div class="menu_btn_5"><a href="../index.php/actualites.html">
     <div style="margin-top:13px;">
          ACTUALITÉ </div>
     </a></div>

     <div class="menu_btn_6"><a href="../index.php/emploi.html">
     <div style="margin-top:13px;">
        EMPLOI </div>
     </a> </div>
</div>

qu'en pensez-vous ?

Dans l'attente de vos retours, je vous remercie par avance.

Cordialement,

Cris

Sarc

Sarc

Posté
Posté

Bonjour Baycris,

Je vais te donner quelques conseils de code, qui vont déjà avoir pour effet de réduire de 90% sa taille, et donc de permettre de mieux trouver les bugs...

Commençons par le CSS. Que de redondance dans ce code ! La redondance dans un CSS, c'est une place utilisée inutilement, et des risques d'oubli quand tu veux modifier un élément.

Déjà, tous tes menus ont le même code CSS, non ? Donne-leur donc la même classe ! 

.menu_btn a{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #ffffff;
        font-weight:bold;
        background-repeat: no-repeat;
        background-position: center center;
        float:left;
        width:150px;
        height:45px;
        padding-top:0px;
        text-align:center;
        text-decoration: none;    }

Tu peux ensuite mettre les spécifications ensuite :

.btn_1 {background-image: url(../images/btn2-1.jpg);}
.btn_2 {background-image: url(../images/btn2-2.jpg);}
.btn_3 {background-image: url(../images/btn2-3.jpg);}
.btn_4 {background-image: url(../images/btn2-4.jpg);}
.btn_5 {background-image: url(../images/btn2-5.jpg);}
.btn_6 {background-image: url(../images/btn2-6.jpg);}

Vu que tes a:hover, a:visited etc. ne changent rien, pourquoi les spécifier ? Tout devrait marcher sans les mettre. Donc en copiant ce que j'ai mis au dessus, ton code CSS est déjà terminé.

Pour le code HTML : il y a des div inutiles. 

<element><div class="xx"> ... </div></element>

Cette suite est à proscrire ! Pourquoi ne pas mettre la classe directement sur l'élément parent du div ? Et pourquoi ne pas le mettre dans ton CSS, vu qu'il sert à ça ? Par contre, au lieu d'être un margin, ça sera un padding, ie la marge qu'il y aura entre le haut de l'élément et le contenu de celui-ci.

Ainsi :

.btn_1 {background-image: url(../images/btn2-1.jpg);padding-top:13px}
.btn_2 {background-image: url(../images/btn2-2.jpg);padding-top:8px}
.btn_3 {background-image: url(../images/btn2-3.jpg);padding-top:8px}
.btn_4 {background-image: url(../images/btn2-4.jpg);padding-top:13px}
.btn_5 {background-image: url(../images/btn2-5.jpg);padding-top:13px}
.btn_6 {background-image: url(../images/btn2-6.jpg);padding-top:13px}

On pourrait même s'amuser à retrouper, si jamais tu veux changer le 13 en 12, ça t'évite une redondance :

.btn_1, .btn_4, .btn_5, .btn_6{padding-top:13px}
.btn_2, .btn_3{padding-top:8px}
.btn_1 {background-image: url(../images/btn2-1.jpg)}
.btn_2 {background-image: url(../images/btn2-2.jpg)}
.btn_3 {background-image: url(../images/btn2-3.jpg)}
.btn_4 {background-image: url(../images/btn2-4.jpg)}
.btn_5 {background-image: url(../images/btn2-5.jpg)}
.btn_6 {background-image: url(../images/btn2-6.jpg)}

Maintenant, il faut adapter le code HTML pour qu'il respecte les classes choisies :

<div class="menu_btn btn_1"><a href="../index.php/mission.html">ENTREPRISE</a></div>
 <div class="menu_btn btn_2"><a href="../index.php/conseil-architecture.html">CONSEIL<br />ARCHITECTURE</a></div>
...

Devine quoi ? On peut encore faire mieux ! Tu vois que toutes tes div qui sont contenues dans la div de classe menu-image ont la même classe (menu_btn)... C'est donc qu'on peut optimiser le CSS.

On peut marquer ça :

.menu_images a{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #ffffff;
        [...]
        text-align:center;
        text-decoration: none;    }

Voilà, et donc on peut enlever tous les menu_btn du HTML :

<div class="btn_1"><a href="../index.php/mission.html">ENTREPRISE</a></div>
 <div class="btn_2"><a href="../index.php/conseil-architecture.html">CONSEIL<br />ARCHITECTURE</a></div>
...

On peut encore améliorer la chose, parce qu'on observe dans ton HTML la suite suivante :

<div class="xx"><element>...</element></div>

Là, on peut se débrouiller pour que la classe xx soit distribuée sur l'élément directement, au lieu de le mettre sur la div. Attention cependant, div est de type bloc, alors que l'élément peut très bien être de type "en-ligne". Il faut donc transformer l'élément de type en ligne.

Pour ça, il suffit de rajouter 


display:block;

dans .menu_images a.

Ainsi, ton code final ressemblerait à ça (je n'ai pas vérifié que le comportement était identique, mais à vue de nez...) :

.menu-image a{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        display:block;
        font-size: 12px;
        color: #ffffff;
        font-weight:bold;
        background-repeat: no-repeat;
        background-position: center center;
        float:left;
        width:150px;
        height:45px;
        padding-top:0px;
        text-align:center;
        text-decoration: none;    } 

.btn_1, .btn_3, .btn_4, .btn_5, .btn_6{padding-top:13px}
.btn_1 {background-image: url(../images/btn2-1.jpg)}
.btn_2 {background-image: url(../images/btn2-2.jpg);padding-top:8px}
.btn_3 {background-image: url(../images/btn2-3.jpg)}
.btn_4 {background-image: url(../images/btn2-4.jpg)}
.btn_5 {background-image: url(../images/btn2-5.jpg)}
.btn_6 {background-image: url(../images/btn2-6.jpg)}

Et le code HTML associé :

<div class="menu-image">

   <a href="../index.php/mission.html" class="btn_1">ENTREPRISE</a>

     <a href="../index.php/conseil-architecture.html" class="btn_2">
            CONSEIL<br />
          ARCHITECTURE
     </a>

     <a href="../index.php/ingenieurie-mise-en-oeuvre.html" class="btn_3">
          INGÉNIERIE<br />
           MISE EN OEUVRE</a>


     <a href="../index.php/service-desk.html" class="btn_4">
          SERVICE DESK
     </a>

     <a href="../index.php/actualites.html" class="btn_5">
          ACTUALITÉ
     </a>

     <a href="../index.php/emploi.html" class="btn_6">
        EMPLOI
     </a>
</div>

Après, il est "conseillé" sémantiquement de mettre tous les menus dans une liste <ul><li>... Mais c'est une autre histoire.

Déjà, essaye d'utiliser ce code raccourci, et dis-nous s'il y a toujours des bugs d'affichage. Ca sera plus facile à déceler... Et si tu peux mettre la page en ligne, ça serait génial aussi. :)

Bon courage !

baycris

baycris

Posté
  • Auteur
Posté (modifié)

Bonjour Sarc :

et merci pour cet allégement...

Par contre si tu regarde il n'y a pas la même image en over et en a...

Tu peux voir le résultat ici : dev.pc30bs.fr

Merci de ton aide,

Cris

Modifié par baycris
Sarc

Sarc

Posté
Posté

C'est exact pour l'image.

Il te suffit de rajouter :


.menu-image a:hover, .menu-image a:active
{
background-image: url(../images/btn1-2.jpg)
}

Par contre, je n'ai pas le bug d'affichage dont tu parles sur ma configuration (Firefox 3.5, Ubuntu). Il est donc difficile de te dire ce qui ne va pas...

baycris

baycris

Posté
  • Auteur
Posté

Merci Sarc,

Mais pas top le résultat... à savoir que l'image en moide hover et active ne sont pas les même celon le btn...

voici ce que j'ai mis en code :

/* menu Images */


.menu-image a{
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        display:block;
        font-size: 12px;
        color: #ffffff;
        font-weight:bold;
        background-repeat: no-repeat;
        background-position: center center;
        float:left;
        width:150px;
        height:45px;
        padding-top:0px;
        text-align:center;
        text-decoration: none;    } 

.btn_1, .btn_3, .btn_4, .btn_5, .btn_6{padding-top:13px}
.btn_1 {background-image: url(../images/btn1-1.jpg)}
.btn_2 {background-image: url(../images/btn2-1.jpg);padding-top:8px}
.btn_3 {background-image: url(../images/btn3-1.jpg)}
.btn_4 {background-image: url(../images/btn4-1.jpg)}
.btn_5 {background-image: url(../images/btn5-1.jpg)}
.btn_6 {background-image: url(../images/btn6-1.jpg)}
.btn_1 a:hover, .btn_1 a:active
{
background-image: url(../images/btn1-2.jpg)
}
.btn_2 a:hover, .btn_2 a:active
{
background-image: url(../images/btn2-2.jpg)
}
.btn_3 a:hover, .btn_3 a:active
{
background-image: url(../images/btn3-2.jpg)
}
.btn_4 a:hover, .btn_4 a:active
{
background-image: url(../images/btn4-2.jpg)
}
.btn_5 a:hover, .btn_5 a:active
{
background-image: url(../images/btn5-2.jpg)
}
.btn_6 a:hover, .btn_6 a:active
{
background-image: url(../images/btn6-2.jpg)
}

html :

</div>

<div class="menu-image">

   <a href="../index.php/mission.html" class="btn_1">ENTREPRISE</a>

     <a href="../index.php/conseil-architecture.html" class="btn_2">
            CONSEIL<br />
          ARCHITECTURE
     </a>

     <a href="../index.php/ingenieurie-mise-en-oeuvre.html" class="btn_3">
          INGÉNIERIE<br />
           MISE EN OEUVRE</a>


     <a href="../index.php/service-desk.html" class="btn_4">
          SERVICE DESK
     </a>

     <a href="../index.php/actualites.html" class="btn_5">
          ACTUALITÉ
     </a>

     <a href="../index.php/emploi.html" class="btn_6">
        EMPLOI
     </a>
</div>

je n'ai plus la police blanche..., je n'ai plus le changement d'image en hover et active... et le texte ne tiens pas compte du padding...

Merci encore, je ne vois plus lol

Cris

Dadou

Dadou

Posté
Posté

baycris, il me semble que sarc t'a largement assez donné de billes pour que tu sois capable d'obtenir ce que tu souhaites sans tout faire non plus

baycris

baycris

Posté
  • Auteur
Posté

Bonjour Dadou !

Nous ne nous connaissons pas, mais je trouve que ton intervention est un peu...discourtoise...

Je remercie sarc pour son aide, ma dernière réponse était plus pour lui montrer le resultat... Biensure je continu à regarder et tester à l aide des conseils de Sarc (les CSs ne sont pas ma tasse de thé)

si biensure je résoud mon soucis je ne manquerai pas de mettre en ligne la solution.

Le but de ce topic est plus le partage, que la solution....

Je te souhaite une bon fin de weekend,

cordialement

cris

Dadou

Dadou

Posté
Posté

Mon intervension n'est nullement discourtoise, la manière dont tu as répondu laisse a penser que tu attend la réponse toute faite, ce qui n'est pas le but du hub.

Avec un minimum de réflexion, pour le problème de couleur de police tu aurais pensé à mettre un color: #fff et quand aux image différentes reproduire le code aux classes correspondantes en affectant la bonne image

baycris

baycris

Posté
  • Auteur
Posté

Bonsoir,

J'ai allégé mon code départ ce qui donne :

/* menu Images */
.menu-image
{
	float: left;
        margin: auto 50px auto 50px;
	border: 0px;
	padding-top: 0px;
        height: 50px;
	width: 986px;
}

/* end Header */


.menu_btn_1 a, .menu_btn_1 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn1-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;
}

.menu_btn_1 a:hover, .menu_btn1 a:active {
	background-image: url(../images/btn1-2.jpg);
}


.menu_btn_2 a, .menu_btn_2 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn2-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;
}

.menu_btn_2 a:hover, .menu_btn2 a:active {
	background-image: url(../images/btn2-2.jpg);
}

.menu_btn_3 a, .menu_btn_3 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn3-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;
}

.menu_btn_3 a:hover, .menu_btn_3 a:active {
	background-image: url(../images/btn3-2.jpg);	
}

.menu_btn_4 a, .menu_btn_4 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn4-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_4 a:hover, .menu_btn_4 a:active {
	background-image: url(../images/btn4-2.jpg);
}

.menu_btn_5 a, .menu_btn_5 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn5-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_5 a:hover, .menu_btn_5 a:active {
	background-image: url(../images/btn5-2.jpg);
}

.menu_btn_6 a, .menu_btn_6 a:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
	background-image: url(../images/btn6-1.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	float:left;
	width:150px;
	height:45px;
	padding-top:0px;
	text-align:center;
	text-decoration: none;		
}

.menu_btn_6 a:hover, .menu_btn_6 a:active {
	background-image: url(../images/btn6-2.jpg);
}

et Html :

<div class="menu-image">

     <div class="menu_btn_1"><a href="../index.php/mission.html" ><div style="margin-top:13px;">  ENTREPRISE</div>
     </a></div>

     <div class="menu_btn_2"><a href="../index.php/conseil-architecture.html">
      <div style="margin-top:8px;">  CONSEIL<br />   ARCHITECTURE</div>
     </a></div>

     <div class="menu_btn_3"><a href="../index.php/ingenieurie-mise-en-oeuvre.html">
     <div style="margin-top:8px;">  INGÉNIERIE<br />    MISE EN OEUVRE</div>
     </a></div>

     <div class="menu_btn_4"><a href="../index.php/service-desk.html">
     <div style="margin-top:13px;">   SERVICE DESK</div>
     </a></div>

     <div class="menu_btn_5"><a href="../index.php/actualites.html">
     <div style="margin-top:13px;"> ACTUALITÉ</div>
     </a></div>

     <div class="menu_btn_6"><a href="../index.php/emploi.html">
     <div style="margin-top:13px;">  EMPLOI</div>
     </a></div>
</div>

Apparemment je n'ai plus mon bug d'affichage,

Merci Sarc pour ton aide toujours là pour un vieux pote...

Amicalement Cris

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...