Dark-Mode White-Mode Schalter verschieben

Diskutiere Dark-Mode White-Mode Schalter verschieben im HTML Forum im Bereich Programmierung; Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen...
L

Lil Linden

New member
Beiträge
2
Punkte Reaktionen
0
Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

Hier der Code der HTML-Seite:

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset=utf-8>
        <title>Test-Titel(Tab)</title>
        <link rel="Stylesheet" href="TestSeite.css">
    </head>
        <body>
          
            <form>
          
            <!-- LOGO -->
          
            <div class="Logo">
          
                <a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>
          
            </div>
          
            <!-- ----- -->
  
            <input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">
          
            <div class="curtain"></div>
      
            <!-- UEBERSCHRIFT -->
          
            <div class="Ueberschrift">
          
                <h1> <b> ÜBERSCHIRFT </b> </h1>

                <h2> MPRESSUM </h2>
      
            </div>
          
            <!-- ----- -->
          
            <!-- BUTTONS -->
          
                <a href="https://www.google.com/" class="btn-flip"  data-front="TEXT" data-back="TEXT"></a>

                <a href="https://www.google.com/" class="btn-flip"  data-front="TEXT" data-back="TEXT"></a>

                <a href="https://www.google.com/" class="btn-flip"  data-front="TEXT" data-back="TEXT"></a>

                <a href="https://www.google.com/" class="btn-flip"  data-front="TEXT" data-back="TEXT"></a>
      
            <!-- ----- -->
          
            <!-- KONTAKT -->
            <div class="Impressum">
          
                 <h2> <u> TEXT </u> </h2>
          
            </div>
          
            <center>
      
            <p>
            <strong>
                TEXT
            </strong>
                <br>
                TEXT
                <br>
                TEXT
            </p>
            <p>
                TEXT
                <br>
                TEXT
            </p>
            
            <p> TEXT </p>
              
            </center>   
            <!-- ----- -->
          
      
            <!-- IMPRESSUM -->   
            <div class="Impressum">
          
              <h2> <u> IMPRESSUM </u> </h2>
          
                <h3>TEXT</h3>

                <p> TEXT
                    <br>
                    TEXT
                    <br>
                    TEXT
                </p>
                <p> TEXT
                    <br>
                    TEXT
                </p>

                <p>
                <strong>
                    TEXT
                </strong>
                    <br>
                TEXT
                </p>

                    <h2>TEXT</h2>
                <p> TEXT
                    <br>
                    TEXT
                    <br>
                    TEXT
                </p>
                <p>
                    <a href="https://www.google.com/" class="link">TEXT</a>
                  
                </p>
                <p>
                    TEXT
                </p>

                    <h3>Haftung für Inhalte</h3>
                <p>
                    TEXT
                </p>
                <p>
                    TEXT
                </p>

                    <h3>TEXT</h3>
                <p>
                    TEXT
                </p>
                <p>
                    TEXT
                </p>

                    <h3>TEXT</h3>
                <p>
                    TEXT
                </p>
                <p>
                    TEXT
                </p>

            </div>
        
            <!-- ----- -->
      
      
      

  
        </form>
  
    </body>           

</html>


Hier der Code der CSS-Datei:

body {
        font-family: Verdana;                       /* Schriftart */                         
  
    }

    .Logo {
        position: absolute;                         /* Textausrichtung */
  
    }
  
    .Ueberschrift {
        text-align: center;                         /* Textausrichtung */
          
    }
  
  
  
    .link {           
        color: orange;                              /* Textfarbe */                               
        background-color: transparent;              /* Hintergrundfarbe */
        text-decoration: underline;                 /* Textauszeichnung */
      
    }

    .link:visited {
        color: darkorange;                          /* Textfarbe */
        background-color: transparent;              /* Hintergrundfarbe */             
        text-decoration: underline;                 /* Textauszeichnung */

    }
  
    .link:hover {
        color: orangered;                           /* Textfarbe */
        background-color: transparent;              /* Hintergrundfarbe */
        text-decoration: underline;                 /* Textauszeichnung */

    }

    .link:active {
        color: orangered;
        background-color: transparent;              /* Hintergrundfarbe */
        text-decoration: underline;                 /* Textauszeichnung */
    }
  
  
  
    h1 {
        color: black;                               /* Farbe */
      
    }
  
    h2 {
        color: black;                               /* Farbe */
    
      
    }
  
    h3 {
        color:black;                                /* Farbe */
  
    }

    h4 {
        color:black;                                /* Farbe */                                 
  
    }
  
  
  
    summary {
        color: black;
      
    }

    li {
        color: black;                               /* Farbe */
  
    }
  
    th {
        color: black;                               /* Farbe */
  
    }
  
  
    td {
        color: black;                               /* Farbe */
  
    }


    p {
        color:black;                                /* Farbe */
      
    }
  
    .b {
        text-align: center;                         /* Textausrichtung */
  
    }
      
    .c {
        text-align: center;                         /* Textausrichtung */
  
    }
  
    .d {
        text-align: left;                           /* Textausrichtung */
  
    }
  
  
  
    .Impressum {
        text-align: center;                         /* Textausrichtung */
  
    }

    .btn-flip {
        opacity: 1;                                 /* Transparenz */
        outline: 0;                                 /* Umriss */
        color: #fff;                                /* Farbe */
        line-height: 40px;                          /* Zeilenhöhe */
        position: relative;                         /* Position */
        text-align: center;                         /* Textausrichtung */
        letter-spacing: 1px;                        /* Buchstaben-Abstand */
        display: inline-block;                      /* Art der Darstellung */
        text-decoration: none;                      /* Textauszeichnung */
        font-family: "#";                           /* Schriftart */
        text-transform: uppercase;                  /* Groß- und Kleinbuchstaben */
  
    }

    .btn-flip:hover:after {
        opacity: 1;                                 /* Transparenz */
        transform: translateY(0) rotateX(0);        /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate: Repositioniert ein Element Vertikal auf einer 2D Fläche)
        (rotate(x): Rotiert ein Element auf der X-Achse) */   
  
    }

    .btn-flip:hover:before {
        opacity: 0;                                 /* Transparenz */
        transform: translateY(50%) rotateX(90deg);  /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate: Repositioniert ein Element Vertikal auf einer 2D Fläche)
        (rotate(x): Rotiert ein Element auf der X-Achse) */
  
    }

    .btn-flip:before {
        top: 0;                                     /* Positionierung von oben */
        left: 0;                                    /* Positionierung von links */
        opacity: 1;                                 /* Transparenz */
        color: #adadaf;                             /* Farbe */
        display: block;                             /* Art der Darstellung */
        padding: 0 30px;                            /* Innenabstand */
        line-height: 40px;                          /* Zeilenhöhe */
        transition: 0.5s;                           /* Übergang (Zeit) */
        position: relative;                         /* Positionierung eines HTML-Elements */
        background: #323237;                        /* Hintergrund (Farbe) */
        content: attr(data-front);                  /* Erzeugt Content (Inhalte in einem Element) */
        transform: translateY(0) rotateX(0);        /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate: Repositioniert ein Element Vertikal auf einer 2D Fläche)
        (rotate(x): Rotiert ein Element auf der X-Achse) */
  
    }

    .btn-flip:after {
        top: 0;                                     /* Positionierung von oben */
        left: 0;                                    /* Positionierung von links */
        opacity: 0;                                 /* Transparenz */
        width: 100%;                                /* Breite */
        color: #323237;                             /* Farbe */
        display: block;                             /* Art der Darstellung */
        transition: 0.5s;                           /* Übergang (Zeit) */
        position: absolute;                         /* Positionierung eines HTML-Elements */
        background: #adadaf;                        /* Hintergrund (Farbe) */
        content: attr(data-back);                   /* Erzeugt Content (Inhalte in einem Element) */
        transform: translateY(-50%) rotateX(90deg); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate: Repositioniert ein Element Vertikal auf einer 2D Fläche)
        (rotate(x): Rotiert ein Element auf der X-Achse) */
  
    }

    * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --dur: 0.3s;

    }
    body, input {
        color: hsl(0,0%,10%);

    }
    form, .toggle:before, .toggle:after {
        background: hsl(0,0%,90%);
  
    }

    form, .toggle {
        position: relative;
  
    }

    form {
        display: ;
        justify-content: right;
        align-items: right;
        height: 100vh;
  
    }

    .curtain, .toggle:before, .toggle:after {
        position: absolute;

    }

    .curtain, .toggle:before, .toggle:after {
        transition: transform var(--dur);
  
    }

    .curtain {
        top: 0;
        left: 0;
  
    }

    .curtain {
        background: hsl(0,0%,100%);
        mix-blend-mode: difference;
        pointer-events: none;
        width: 100%;
        height: 100%;
        transform: scaleX(0);
        transform-origin: 0 50%;

    }

    .sr {
        clip: rect(1px,1px,1px,1px);
        color: transparent;
        width: 1px;
        height: 1px;
        position: relative;
  
    }

    .toggle {
        background: currentColor;
        border-radius: 0.75em;
        cursor: pointer;
        width: 3em;
        height: 1.5em;
        appearance: none;

    }

    .toggle:checked ~ .curtain {
        transform: scaleX(1);

    }
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben
Das kannst Du recht leicht erreichen indem Du ihn absolut dort positionierst:
Code:
.toggle {
    background: currentColor;
    border-radius: 0.75em;
    cursor: pointer;
    width: 3em;
    height: 1.5em;
    appearance: none;
    position: absolute;
    right: 0;
    top: 0;
}
Er ist ja klein und die Gefahr der Überdeckung nicht groß.
Anders bei dem Logo: Je nachdem, wie groß es ist, kann es andere Inhalte überdecken, eine Gefahr, die bei absoluter Positionierung immer besteht.
Außerdem sind die Tags <b> , <u> und <center> veraltet und sollten nicht mehr verwendet werden. Besser CSS verwenden.
 
L

Lil Linden

New member
Beiträge
2
Punkte Reaktionen
0
Das kannst Du recht leicht erreichen indem Du ihn absolut dort positionierst:
Code:
.toggle {
    background: currentColor;
    border-radius: 0.75em;
    cursor: pointer;
    width: 3em;
    height: 1.5em;
    appearance: none;
    position: absolute;
    right: 0;
    top: 0;
}
Er ist ja klein und die Gefahr der Überdeckung nicht groß.
Anders bei dem Logo: Je nachdem, wie groß es ist, kann es andere Inhalte überdecken, eine Gefahr, die bei absoluter Positionierung immer besteht.
Außerdem sind die Tags <b> , <u> und <center> veraltet und sollten nicht mehr verwendet werden. Besser CSS verwenden.
Danke vielmals für deine Antwort. :) Ich habe eine sehr leichte Lösung gefunden:

Ich habe einfach:
input {
float: right;

}
diesen Befehl eingefügt, funktioniert bis jetzt super :)
 
S

Sempervivum

Well-known member
Beiträge
274
Punkte Reaktionen
42
Mag super funktionieren, geht jedoch an dem vorbei wofür das float gedacht ist, und führt häufig im weiteren Verlauf zu unerwarteten Ergebnissen.
 
Thema:

Dark-Mode White-Mode Schalter verschieben

Oben Unten