27799 sujets

CSS et mise en forme, CSS3

Bonjour Smiley smile
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... Smiley rolleyes

Je vous met les codes qui expliqueront sans doute mieux que moi la situation Smiley lol
Merci pour votre aide Smiley smile


    .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 à&nbsp; 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 à&nbsp; 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)
J'ai fini par résoudre le problème, avec un peu de patience, en changeant le nom de mes input et label