Bonjour 
Je manipule à titre personnel le codage html et CSS et malgré mes recherches, je tombe sur un os !
Pour expliquer grosso modo le fonctionnement de mon programme: un générateur permet d'ouvrir plusieurs liens en fonction du monde choisi (gaia ou ouranos). Le générateur fonctionne très bien pour le premier générateur, cependant, je souhait en mettre un deuxième juste à côté.
Au survol du monde chez Xanthos, tout fonctionne. Mais au survol du monde chez Archimède, c'est les mondes de Xanthos, qui bougent...
Je vous met les codes qui expliqueront sans doute mieux que moi la situation
Merci pour votre aide
Modifié par MorganeB (10 Aug 2021 - 01:11)
Je manipule à titre personnel le codage html et CSS et malgré mes recherches, je tombe sur un os !
Pour expliquer grosso modo le fonctionnement de mon programme: un générateur permet d'ouvrir plusieurs liens en fonction du monde choisi (gaia ou ouranos). Le générateur fonctionne très bien pour le premier générateur, cependant, je souhait en mettre un deuxième juste à côté.
Au survol du monde chez Xanthos, tout fonctionne. Mais au survol du monde chez Archimède, c'est les mondes de Xanthos, qui bougent...
Je vous met les codes qui expliqueront sans doute mieux que moi la situation
Merci pour votre aide
.landing-login-separator{display:flex;align-items:center;text-align:center;font-size:13px}
.landing-login-separator::after,
.landing-login-separator::before{background:#ccc;content:"";height:1px;flex:1}
.landing-login-separator span{height:15px;padding:0 10px;color:#ffffff;}
.landing-login{background:#fdecbe7d;top:10px;left: 10px;width:270px;padding:15px;border-radius:5px}
h2,p{text-align:center;color:#552F0A;margin-bottom:5px;margin-top:5px;font-size:13pt}
.button{overflow:visible;cursor:pointer;font-family:inherit;outline:0;box-sizing:border-box}
.spacer-large-bottom{margin-bottom:15px}
a {text-decoration: none; color: #808080}
a,body{font-family:Arial,Helvetica,sans-serif;font-size:13px}
/*Pour Xanthos*/
.header-login-server-xanthos{background:#D4D4D4;position:relative;width:270px;height:45px;border-radius:23px;font-size:15px;color:grey}
.header-login-server-xanthos::after
.header-login-server-xanthos:hover{box-shadow:0 0 20px rgba(255,255,255,.35) inset}
.header-login-server-xanthos input{display:none}
[class^=header-login-server-label]{background-repeat:no-repeat;position:relative;z-index:1;display:block;width:50%;height:100%;line-height:45px;box-sizing:border-box;cursor:pointer}
.header-login-server-label-gaia{background-image:url(https://www.equideow.com/media/equideo/image/interface/icon/gaia-register.png?85576786);background-position:95px center;float:right;padding-right:45px;text-align:right}
.header-login-server-label-ouranos{background-image:url(https://www.equideow.com//media/equideo/image/interface/icon/ouranos-register.png?85576786);background-position:7px center;float:left;padding-left:45px;text-align:left}
.header-login-server-xanthos span{position:absolute;left:0;background:#fff;width:50%;height:100%;border:2px solid #e7e7e7;border-radius:23px;box-sizing:border-box;transition:all .2s}
.header-login-server-xanthos-radio-ouranos:checked~span{transform:translateX(0)}
.header-login-server-xanthos-radio-gaia:checked~span{transform:translateX(100%)}
.header-login-server-xanthos-radio-ouranos:hover~span{transform:translateX(0)}
.header-login-server-xanthos-radio-gaia:hover~span{transform:translateX(100%)}
.button-text-21{text-align:center;vertical-align:middle;padding:0 10px;display:table-cell;height:45px;font-size:12px;color:#fff;padding-top:2px}
.button-style-21{background:#543226;position:relative;border:none;width:270px;border-radius: 5px}
.fond-xanthos{
border-radius: 5px;
background:url(https://zupimages.net/up/21/31/9hjj.jpg);
background-repeat: no-repeat;
display:inline-block;
}
</style> <body>
<div class="fond-xanthos">
<div class="landing-login">
<h2 class="spacer-large-bottom">Xanthos</h2>
<p> <img src="https://gaia.equideow.com/media/equideo/image/chevaux/special/300/adulte/xanthos.png"
style="width: 100px; height: 100px;"></p>
<div class="width-100 button button-style-21"><span class="button-text-21">Aux
joueurs les plus chanceux, Xanthos offre une corne d'abondance. Aux
autres joueurs, Xanthos ajoute 10 points d'énergie à leur
cheval né le plus récemment.</span></div>
<p class="landing-login-separator spacer-large-bottom"><span>Ouvrir 5
Xanthos sur</span></p>
<div class="header-login-server-xanthos spacer-large-bottom"> <input class="header-login-server-xanthos-radio-ouranos"
id="authentificationToOuranos" name="authentificationTo" value="ouranos"
type="radio"> <label for="authentificationToOuranos" class="header-login-server-label-ouranos"><a
href="#" onclick="PageRand2();PageRand2();PageRand2();PageRand2();PageRand2()"
style="text-decoration:none">Ouranos</a></label> <input class="header-login-server-xanthos-radio-gaia"
id="authentificationToGaia" name="authentificationTo" value="gaia" type="radio"><label
for="authentificationToGaia" class="header-login-server-label-gaia"><a
href="#" onclick="PageRand1();PageRand1();PageRand1();PageRand1();PageRand1()"
style="text-decoration:none">Gaia</a></label><span></span></div>
<p class="align-center"><a href="https://gaia.equideow.com/member/privateMessage/?to=Flowcon"
style="color: white;">Signaler un lien mort</a></p>
</div>
</div>
<div class="fond-xanthos">
<div class="landing-login">
<h2 class="align-center spacer-large-bottom">Archimède</h2>
<p> <img src="https://gaia.equideow.com/media/equideo/image/chevaux/special/300/adulte/archimede.png"
style="width: 100px; height: 100px;"></p>
<div class="width-100 button button-style-22"> <span class="button-text-21">Tous
les jours, Archimède offre un point de vieillissement à tous
les joueurs qui répondent correctement Ãà ses questions.</span></div>
<p class="landing-login-separator spacer-large-bottom"><span>Ouvrir 1
Archimède sur</span></p>
<div class="header-login-server-archi spacer-large-bottom"> <input class="header-login-server-archi-radio-ouranos"
id="authentificationToOuranos" name="authentificationTo" value="ouranos"
type="radio"> <label for="authentificationToOuranos" class="header-login-server-label-ouranos"><a
href="#" onclick="PageRand2()" style="text-decoration:none">Ouranos</a></label>
<input class="header-login-server-archi-radio-gaia" id="authentificationToGaia"
name="authentificationTo" value="gaia" type="radio"><label for="authentificationToGaia"
class="header-login-server-label-gaia"><a href="#" onclick="PageRand1()">Gaia</a></label><span></span></div>
<p class="align-center"><a href="https://gaia.equideow.com/member/privateMessage/?to=Flowcon"
style="color: white;">Signaler un lien mort</a></p>
</div>
</div>
</body>Modifié par MorganeB (10 Aug 2021 - 01:11)