Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bouton marche arrêt

CLASS qui se décale à droite du bouton

    1 juillet 2024 à 20:50:47

    Bonsoir, 

    J'ai une page web dans mon ESP32( carte électronique microcontrôleur ) avec 1 boutons  ou j'ai incorporé une led dessus.

    je n'arrive pas à dire à ma class .LED  de ne pas se décaler a droite quand j'appuis sur OFF. Cela vient du fait que OFF à une lettre de plus que ON.

    Je vous joins mon code qui est loin d'être optimisé et sûrement mal agencés.

    <!DOCTYPE html>
    <html lang="fr">
    <title> Mon Projet ESP32 </title>
    <head><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    
    	
    	html{
    		height: 100 %;
    		}
    	body{
    		height: 100 %;
    		margin: 0;
    		font-family: helvetica, sans-serif;
    		-webkit-text-size-adjust: none;
    		}
    	body{
    		background-color: #f3fae5;
    		background-image: linear-gradient(to right, transparent 75%, rgba(25, 25, 25, 0.1) 75%);
    		background-size: 6px;
    		}
    	.header-wrapper {
    		height: 44px;
    		font-weight: bold;
    		text-shadow: rgba(0,0,0,0.7) 0 -1px 0;
    		border-top: solid 1px rgba(255,255,255,0.6);
    		border-bottom: solid 1px rgba(0,0,0,0.6);
    		color: #fff;
    		background-color: #8195af;
    		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)), linear-gradient(to bottom, transparent, rgba(0, 0, 64, 0.1));
    		background-repeat: no-repeat;
    		background-position: left top, left bottom;
    		background-size: 100% 21px, 100% 22px;
    		box-sizing: border-box;
    		}
    	.header-wrapper h1 {
    		text-align: center;
    		font-size: 30px;
    		line-height: 44px;
    		margin: 0;
    		}
    </style>
    </head>
    <body>
    <div class="header-wrapper"><h1>ESP32 Serveur Web</h1></div>
    <style>
    	.LED {
    		display: inline-block;
    		position: relative;
    		top: 27%;
    		left: 35%;
            width:-5px;
    		}
    	.led-verte-on {display: block;
    		height: 28px;
    		width: 28px;
    		background: radial-gradient(circle, #51ee00 5%, #38a600 120%);
    		border-radius: 17px;
    		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    		border: 1px solid rgba(0, 0, 0, 0.15);
    		}
    	.led-verte-off {
    		display: block;height:30px;
    		width: 30px;
    		background: radial-gradient(circle, #37a200 -10%, #102f00 150%);
    		border-radius: 15px;
    		box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
    		border: 1px solid rgba(0, 0, 0, 0.15);
    		}
    	.header-wrapper {
    		background-color: #40bb00;
    		height: 45px;border-bottom: 2px solid #557b00;
    		box-shadow :#2a3d00 0px 1px 30px ;
    		}
    
    	html {
    		font-family: Helvetica;
    		display: inline-block;
    		margin: 0px auto;
    		text-align: center;
    		}
    	.button {
    		display: inline-block;
    		background-color: #40bb00;
    		border: 2px solid #557b00; border-radius: 25px ;
    		color: white;
    		padding: 10px 40px;
    		text-decoration: none;
    		font-weight: bold;
    		font-size: 40px;
    		margin: 10px;
    		cursor: pointer;
    		transition: background-color 0.3s ease;
    		background-image: linear-gradient(to bottom, #40bb00, #40bb00 70%, #399500 90%, #399500);
    		background-size: 100% 200%;
    		background-position: 0 100%;
    		width:230px;
    		}
    	.button:hover { 
    		background-color: #3a9e3a;
    		box-shadow: 0 09px 11px 0 rgba(0,0,0,0.20), 0 17px 50px 0 rgba(0,0,0,0.15);
    		}
    	.button2 { 
    	background-color: #555555;
    	}
    </style>
    <p>
    <i>
    	Broche GPIO 2  off
    <i>
    </p>
    	<a href="/2/on">
    	<button title="Broche GPIO 2"class="button">
    	OFF
    	<div class="LED">
    	<div class="led-verte-off">
    	</div>
    </div>
    	</button>
    </a>
    
    <p><i>Broche GPIO 27 off<i></p>
    <p><a href="/27/on"><button class="button">ON</button></a></p>
    </body>
    </html>
    
    

    Le deuxième bouton ,je verrai plus tard. Pour voir le décalage il suffit de changer OFF du "<button title="Broche GPIO 2"class="button">OFF " en ON

    Merci beaucoup

    Patrick24 

    -
    Edité par KcirtapPatrick 3 juillet 2024 à 17:05:32

    • Partager sur Facebook
    • Partager sur Twitter
      1 juillet 2024 à 21:06:40

      Bonjour,

      première chose, on va corriger le HTML. Les fondations avant la peinture :)

      • <button> ne peut pas être dans un <a>
      • <button> ne peut pas contenir de <div>
      • on évite de mettre <style> dans <body>, sa place est dans <head>

      Quelques remarques sur le CSS :

      • lignes 9 et 12, pas d'espace entre la valeur et son unité
      • display: inline-block sur html, je ne conseillerais pas, notamment parce que le seul et unique enfant de <html> est <body> donc tu ne gagnes pas grand chose à utiliser inline-block

      Ensuite, ton souci. Tu dis

      je n'arrive pas à dire à ma class .LED  de ne pas se décaler a droite quand j'appuis sur OFF.

      Si je comprends bien, ton souci est au niveau de la position du texte par rapport au petit rond à droite ? Tu voudrais que le texte soit centré quelque soit l'état, la présence ou l'absence de ce rond, c'est bien ça ?

      Edit, dernier point : merci de changer ton titre pour quelque chose de plus descriptif que « Page web ». Par exemple en mettant ton sous-titre à la place.

      -
      Edité par Lamecarlate 1 juillet 2024 à 21:18:56

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        2 juillet 2024 à 11:59:54

        Bonjour, voilà les modifications apportés à la structure du code :

        • Partager sur Facebook
        • Partager sur Twitter
          2 juillet 2024 à 13:00:06

          Ton message n'est pas passé, apparemment :(

          (pense à modifier le titre, aussi)

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            3 juillet 2024 à 17:12:30

            Désolé j'ai était bloqué pour 24 h ! ! !
            Bonjour, voilà les modifications apportés à la structure du code :

            je n'arrive plus à mettre mon code je suis bloqué !!!

            • Partager sur Facebook
            • Partager sur Twitter
              3 juillet 2024 à 18:29:51

              Ah, le pare-feu a encore frappé…

              Poste ton code sans formatage, j'essaierai de le formater dans mon message suivant. Si je n'y arrive pas, tant pis, on fera sans coloration :)

              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

                4 juillet 2024 à 14:25:55

                Bonjour, voici le code revu et corrigé.

                  <!DOCTYPE html>
                  <html lang="fr">
                  <head>
                  <title> Mon Projet ESP32 </title>
                   
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <style type="text/css">
                  html{ height: 100%;font-family: Helvetica;margin: 0px auto;text-align: center;}
                  body{ height: 100vh; margin: 0; font-family: helvetica, sans-serif;-webkit-text-size-adjust: none;background-color: #f3fae5;background-image: linear-gradient(to right, transparent 75%, rgba(25, 25, 25, 0.1) 75%);background-size: 6px;text-align: center;}
                  .header-wrapper {height: 44px;font-weight: bold;text-shadow: rgba(0,0,0,0.7) 0 -1px 0;border-top: solid 1px rgba(255,255,255,0.6);border-bottom: solid 1px rgba(0,0,0,0.6);color: #fff;background-color: #8195af;background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05)), linear-gradient(to bottom, transparent, rgba(0, 0, 64, 0.1));background-repeat: no-repeat;background-position: left top, left bottom;background-size: 100% 21px, 100% 22px;box-sizing: border-box;}
                  .header-wrapper {background-color: #40bb00;height: 45px;border-bottom: 2px solid #557b00;box-shadow :#2a3d00 0px 1px 30px ;}
                  .header-wrapper h1 {text-align: center;font-size: 30px;line-height: 44px; margin: 0;}
                  .led-verte-on {display: inline-block;transform: translate(0%, 0%);position: absolute;top: 26%;left: 80%;height: 28px;width: 28px;background: radial-gradient(circle, #51ee00 5%, #38a600 120%); border-radius: 17px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);border: 1px solid rgba(0, 0, 0, 0.15);}
                  .led-verte-off {display: inline-block;transform: translate(0%, 0%);position: absolute;top: 26%;left: 80%;height:28px;width: 28px;background: radial-gradient(circle, #37a200 -10%, #102f00 150%); border-radius: 15px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);border: 1px solid rgba(0, 0, 0, 0.15);}
                  .button { display: inline-block;position: relative; background-color: #40bb00; border: 2px solid #557b00; border-radius: 25px ; color: white; padding: 10px 40px;text-decoration: none;font-weight: bold; font-size: 40px; margin: 10px; cursor: pointer; transition: background-color 0.3s ease;background-image: linear-gradient(to bottom, #40bb00, #40bb00 70%, #399500 90%, #399500);background-size: 100% 200%;background-position: 0 100%;width:200px;}
                  .button:hover { background-color: #3a9e3a;box-shadow: 0 09px 11px 0 rgba(0,0,0,0.20), 0 17px 50px 0 rgba(0,0,0,0.15);}
                  .button2 { background-color: #555555;}
                  </style>
                  </head>
                  <body><div class="header-wrapper"><h1>ESP32 Serveur Web</h1></div>
                  <p><br><i>Broche GPIO 2 off</i></p>
                  <p><button title="Broche GPIO 2" class="button" onclick="location.href='/2/on';">ON<span class="led-verte-off"></span></button></p>
                  <p><i>Broche GPIO 27 off</i></p>
                  <p><button class="button" onclick="location.href='/27/on';">ON</button></p>
                  </body></html>
                   
                   
                J'espère que cela va allée maintenant avec ESP32 ça fonctionne bien.
                Patrick
                • Partager sur Facebook
                • Partager sur Twitter
                  4 juillet 2024 à 15:11:22

                  Ah, j'allais justement proposer position: absolute pour la led :) On pouvait aussi utiliser grid, en mettant le texte et la led dans la même ligne et la même colonne.

                  En revanche, je vois que tu mets une action de "location" sur le bouton. Quand j'ai dit qu'on ne pouvait pas avoir <a> et <button> en même temps, j'aurais dû préciser qu'il faut choisir entre les deux suivant l'action voulue. Si l'action est un déplacement (vers une autre page ou un endroit dans une page), c'est un lien, pas un bouton. Donc c'est <a> qu'il faudrait utiliser ici.

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Pas d'aide concernant le code par MP, le forum est là pour ça :)

                    5 juillet 2024 à 20:41:16

                    Voici les corrections effectuées :
                    <p><a href="/2/on" class="button" title="Broche GPIO 2">OFF<span class="led-verte-off"></span></a></p>
                    J'ai dû modifier la longueur du bouton ! (Je ne sais pas pourquoi il s'était allongé) en ajustant la classe .button :
                    width:100px;
                    Ça doit être correcte maintenant.
                    Merci,
                    Patrick
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Bouton marche arrêt

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur
                    • Markdown