[PhpBB2] Ajout de boutons barre Windows 10

Hello Philippe,

J'ai un petit souci et là je ne comprends pas pourquoi !

Je tente de rajouter un nouveau bouton à la barre Windows 10 et le souci c'est que celui-ci fait tout déconner avec le reste des autres boutons comme tu peux le remarquer sur la capture ci-dessous.



Je ne vois plus les autres boutons, ni l'heure, et la régie se décale vers où sont normalement placer les boutons, comme si tout se superposais !

Je ne vois pas du tout où est l'erreur dans le CSS ni dans le HTML du bloc ajouter

Ce n'est pas à cause du placement de la régie car j'ai essayé en la supprimant histoire de voir et ce n'est pas cela le souci !

Une fois que je rajoute là class de ce nouveau bouton sur cette partie de CSS en occurrence la class .commerce tout se superpose :

Code:

.banniere-iframes,#M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,.tinypng,.correction,.translate,.awesome,.regpub,.commerce,.M14_Win_Google ,.M14_Milouze ,.M14_btn_Window , .M14_btn_Window_close {
position: absolute;
height: 40px;
margin-top: -30px;
width:32px;
height:32px;
cursor:pointer;
}

Tu peux voir que j'ai bien tout correctement fait avec le CSS et le bloc HTML :

Cela touche uniquement le côté de l'horloge !

HTML du bloc ajouté :

Code:

<div class="commerce">
                  <a href="https://amis-pub.forumactif.com/h12-boutique/">
                    <img src="https://i.servimg.com/u/f88/20/00/21/16/panier10.png"align="absmiddle"alt="Google"title="La boutique"/></a>
                   <div>

CSS :

Code:

/* début placement des boutons coté horloge */
.M14_btn_Window,.M14_btn_Window_close {
left: 90%;
}
.M14_Milouze {
left: 93%;
}
.M14_Win_Google {
left: 91%;
}
.translate {
left: 89%;
}
.correction {
left: 87%;
}
.tinypng {
left: 85%;
}
.awesome {
left: 83%;
}
.regpub {
left: 81%;
}
.commerce {
left: 79%;
}
.banniere-iframes {
left: 45%;
width:88px !important;
}
/* fin placement des boutons coté horloge */
*les transitions*/
#M14_Windows ,.M14_btn_Window ,.M14_Win_cont ,
.banniere-iframes,.translate,.correction,.tinypng,.awesome,.regpub,.commerce,.M14_Milouze ,.M14_Win_Google,#M14_Win_Mp,#M14_Win_avatar ,#M14_Win_Sign ,.M14_btn_Window_close {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.banniere-iframes,#M14_Win_Mp ,#M14_Win_avatar ,#M14_Win_Sign ,.tinypng,.correction,.translate,.awesome,.regpub,.commerce,.M14_Win_Google ,.M14_Milouze ,.M14_btn_Window , .M14_btn_Window_close {
position: absolute;
height: 40px;
margin-top: -30px;
width:32px;
height:32px;
cursor:pointer;
}
.banniere-iframes,.M14_Milouze ,.M14_Win_Google,.translate,.correction,.tinypng,.awesome,.regpub,.commerce,#M14_Win_Mp,#M14_Win_avatar ,#M14_Win_Sign ,.M14_btn_Window,.M14_btn_Window_close {
border-bottom:2px solid white;
}
.banniere-iframes:hover,.M14_Milouze:hover ,.M14_Win_Google:hover ,.translate:hover,.correction:hover,.tinypng:hover,.awesome:hover,.regpub:hover,.commerce:hover,#M14_Win_Mp:hover ,#M14_Win_avatar:hover ,
 #M14_Win_Sign:hover ,.M14_btn_Window:hover {
border-bottom:2px solid purple;
}

Est-ce que tu as une explication à l'histoire ?

Je n'ai pas publié le template en cas où tu souhaitais passer jeter un coup d'oeil.

Merci pour ton aide.

Sacha.