Skripte für Jimdo Creator

Textfeld mit Hintergrund

19. April 2024. Füge den HTML-Code im HTML-Modus eines Textfeldes vor dem Text ein. Quelle,

 

<div style="background-color: #0389d1; border: #dddddd 1px solid; padding: 8px; border-radius: 6px 6px 6px 6px;">

 

HTML-Farbcodes

19. April 2024.HTML Farbcodes Quelle.

 

Code von ChatGPT

1. Januar 2025. Kleine Erinnerung: ChatGPT kann Codes generieren.

 

HTML und CSS-Code von ChatGPT, Rahmen um Bild

<!DOCTYPE html>

<html lang="de">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Rahmen um Bilder</title>

  <style>

    .bild-mit-rahmen {

      border: 1px solid #000; /* Farbe und Breite des Rahmens */

      background-color: #f0f0f0; /* Hintergrundfarbe */

      padding: 10px; /* Abstand zwischen Bild und Rahmen */

      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Schatten */

      display: inline-block; /* Verhindert, dass der Hintergrund größer als das Bild wird */

    }

  </style>

</head>

<body>

  <h1>Beispiel: Bild mit Rahmen</h1>

 

  <!-- Bild mit der Klasse -->

  <div class="bild-mit-rahmen">

    <img src="beispielbild.jpg" alt="Beispielbild" width="300">

  </div>

 

  <!-- Ein weiteres Beispiel -->

  <div class="bild-mit-rahmen">

    <img src="beispielbild2.jpg" alt="Ein weiteres Beispiel" width="300">

  </div>

</body>

</html>

 

Erläuterung der wichtigsten Eigenschaften:

  • border: Der Rahmen des Bildes (Stil, Breite, Farbe).
  • background-color: Die Hintergrundfarbe des Bereichs hinter dem Bild und innerhalb des Rahmens.
  • padding: Abstand zwischen dem Bild und dem Rahmen.
  • box-shadow: Schatten-Effekt außerhalb des Rahmens.
  • display: inline-block: Sorgt dafür, dass der Hintergrund eng um das Bild bleibt und sich nicht über die gesamte Breite ausdehnt.

Wie Du es verwendest:

  1. Ersetze die Platzhalter (beispielbild.jpg, beispielbild2.jpg) durch die tatsächlichen Pfade Deiner Bilder.
  2. Füge die Klasse bild-mit-rahmen zu jedem Bild hinzu, das Du mit diesem Stil versehen möchtest.
  3. Passe die CSS-Eigenschaften nach Deinen Vorstellungen an, z. B. Farbe des Rahmens oder Größe des Schattens.

Vorteil:

Der Code ist flexibel und kann für beliebig viele Bilder verwendet werden, ohne dass Du die Bilder vorher bearbeiten musst. Du kannst ihn direkt in eine bestehende Webseite integrieren.

Falls Du Unterstützung beim Anpassen oder Einfügen brauchst, lass es mich wissen! 

 

Textbox mit abgerundeten Ecken

<div style="background-color: #dde5db; border: 1px solid; padding-left: 60px; padding-right: 30px; border-radius: 10px;">

  Dein Text hier...

</div>

Diese Textbox beruht auf einem Skript von ChatGPT. Es sieht ganz OK aus, jedoch muss ich oben und unten noch Padding haben.

HTML-Code für eine flexible Textbox

Diese Textbox beruht auf einem Skript von ChatGPT. Es sieht ganz OK aus, jedoch muss ich oben und unten noch Padding haben.