1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Deutsch
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

Frage für meine Hausarbeit

  • aless
  • 3. Januar 2025 um 15:20
  • Unerledigt
  • aless
    2
    aless
    Mitglied
    Reaktionen
    2
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 15:20
    • #1

    Hallo ihr Lieben :)

    Ich studiere AI und bin im ersten Semester. Jetzt schreibe ich gerade eine Hausarbeit über HTML und CSS und bin bei position: … angekommen.

    Gibt es eine Möglichkeit für die Beispiele Buttons zu erstellen, die dann beim Klick die entsprechende position-Eigenschaft annehmen?

    Danke schon mal für eure Hilfe :)

  • aless 3. Januar 2025 um 15:23

    Hat den Titel des Themas von „Hausarbeit“ zu „Frage für meine Hausarbeit“ geändert.
  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.049
    Beiträge
    718
    Einträge
    3
    • 3. Januar 2025 um 15:56
    • #2

    Hallo und herzlich willkommen!

    Meinst du sowas?

    position - CSS: Cascading Style Sheets | MDN
    Die position CSS Eigenschaft legt fest, wie ein Element in einem Dokument positioniert wird. Die Eigenschaften top, right, bottom und left bestimmen die…
    developer.mozilla.org

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000 pixelpatron90-100000?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=black&color=FF0000

    https://evarioo.eu/

  • aless
    2
    aless
    Mitglied
    Reaktionen
    2
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 17:27
    • #3

    Hallo und danke?

    Das ist zwar gut, aber leider nicht das, was ich brauche!

    Der Button soll sich im Fließtext befinden und im Browser dann anklickbar sein.

    Also wie z.B. der Button auf dem Bild, dass der dann beim Klick auf position:fixed springt!

    Bilder

    • IMG_9031.jpg
      • 404,49 kB
      • 1.200 × 1.600
  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.049
    Beiträge
    718
    Einträge
    3
    • 3. Januar 2025 um 17:52
    • #4

    Also wenn ich rein auf seine Frage antworte: Ja die gibt es. Ich verstehe aber nicht genau was du meinst denke ich. Brauchst du Beispiele für Buttons die fixed, relativ absolut etc sind?

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000 pixelpatron90-100000?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=black&color=FF0000

    https://evarioo.eu/

  • aless
    2
    aless
    Mitglied
    Reaktionen
    2
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 18:54
    • #5

    Ich brauche einen Button, der nicht die ganze Zeit auf der zugewiesenen Positionswigenschaft ist, sondern nur die beim anklicken auf die verschiedenen Positionen springt und bei erneutem Klick zurück. Und da brauche ich für jede der Eigenschaften von position: … einen anderen Button. Ich würde nur gerne wissen, wie ich einen Button mit dieser Verhaltensweise erstellen kann

  • Beitrag von PixelPatron (3. Januar 2025 um 20:07)

    Dieser Beitrag wurde vom Autor aus folgendem Grund gelöscht: Moment lol (3. Januar 2025 um 20:12).
  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.049
    Beiträge
    718
    Einträge
    3
    • 3. Januar 2025 um 20:16
    • #7

    Keine Ahnung ob ich es jetzt verstanden habe aber ich habe einfach mal gebaut was ich denke was du suchst ..

    Code
    <button id="toggleButton">Toggle Properties</button>
    <script>
      const button = document.getElementById("toggleButton");
      const properties = [
        { property: "position", value: "static" },
        { property: "position", value: "relative" },
        { property: "position", value: "absolute" },
        { property: "position", value: "fixed" },
        { property: "position", value: "sticky" },
      ];
      let currentIndex = 0;
    
      button.addEventListener("click", () => {
        const { property, value } = properties[currentIndex];
        button.style[property] = value;
        currentIndex = (currentIndex + 1) % properties.length;
      });
    </script>
    Alles anzeigen

    Also der Button toggelt bei Klick quasi immer seine style eigenschaft position. Hab nur die 5 genommen aber es gibts ja noch die "globalen" ... ich hoffe ich konnte dir etwas helfen.

    Nachtrag: Gerade nochmal nachgedacht .. man kann natürlich auch je Positions Eigenschaft einen button erstellen und den dann nur dieses eine eigenschaft toggeln lassen.

    Falls du sowas suchst wäre das vielleicht eher etwas:

    Code
    <button id="toggleButton">Toggle Style</button>
    
    <script>
      const button = document.getElementById("toggleButton");
      let isToggled = false;
    
      button.addEventListener("click", () => {
        isToggled = !isToggled;
        button.style.position = isToggled ? "static" : "relative";
      });
    </script>
    Alles anzeigen

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000 pixelpatron90-100000?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=black&color=FF0000

    https://evarioo.eu/

    Einmal editiert, zuletzt von PixelPatron (3. Januar 2025 um 20:28)

  • aless
    2
    aless
    Mitglied
    Reaktionen
    2
    Punkte
    32
    Beiträge
    5
    • 3. Januar 2025 um 20:38
    • #8

    Super lieb, vielen Dank für deine Mühen!!☺️

    Ich probiere es direkt mal aus, wenn meine Kinder schlafen?

  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.049
    Beiträge
    718
    Einträge
    3
    • 3. Januar 2025 um 21:04
    • #9
    Zitat von aless

    Ich probiere es direkt mal aus, wenn meine Kinder schlafen?

    Fühl ich. Meine sind grade im Schlaf Modus .. fahren grade runter deswegen hatte ich ebend zeit mir das genauer durchzulesen :grinning_squinting_face:

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000 pixelpatron90-100000?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=black&color=FF0000

    https://evarioo.eu/

  • aless
    2
    aless
    Mitglied
    Reaktionen
    2
    Punkte
    32
    Beiträge
    5
    • 4. Januar 2025 um 10:58
    • #10

    Soooo, ich bin jetzt endlich dazu gekommen, das auszuprobieren und es ist genau das, was ich möchte!! Es ist perfekt, vielen Dank?


    Ja, ist nicht immer leicht mit den Kleinen, aber es lohnt sich ?

  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.049
    Beiträge
    718
    Einträge
    3
    • 4. Januar 2025 um 11:15
    • #11

    Klasse! Freut mich wenn dir hier geholfen werden konnte.

    Wenn du wieder eine Frage hast hau einfach raus. Und wenn du Bock hast kannst du uns ja Mal deine Hausarbeit in Funktion zeigen.

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000 pixelpatron90-100000?style=for-the-badge&logo=GitHub&logoColor=white&labelColor=black&color=FF0000

    https://evarioo.eu/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Ähnliche Themen

  • Smalltalk - Chatten, Diskutieren....

    • Maximilian Rupp
    • 13. April 2023 um 15:03
    • Smalltalk

Tags

  • css
  • html
  • frage

Rechtliches

Impressum

Datenschutzerklärung

  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  • Deutsch
  • English
Zitat speichern