Wie bekomme ich das Overlay unter den Text?

Bild zum Beitrag

1 Antwort

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

13.03.2025, 17:54

das geht relativ gut, wenn du z-index in Kombination von position verwendest. Das Overlay kannst du mit der CSS-Eigenschaft position auf den Wert absolute stellen. Dann einen niedrigeren z-index ansetzen für das overlay. Danach einfach der Schrift die position auf relativ stellen und einen höheren z-index-Wert geben. Dann hast funktioniert es.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

Text Overlay bei Bildern: "live"-Version komplett falsch (CSS)?

Hallo,

ich versuche bei bestimmten Bildern ein Overlay als Text zu haben, welches am Bild oben rechts platziert wird. Ich habe ein bisschen was gebastelt und zusammen gesucht, aber der Overlay liegt nicht über dem Bild, sondern scheint sich am Bildschirm zu orientieren. Er soll eigentlich nur beim zweiten Bild erscheinen und die Bilder davor und danach sollen sich einreihen, das tut er aber nicht.

https://codepen.io/gooloonetwork/pen/MWQXzbd

Das Problem ist aber, dass es auf der Live-Webseite (www.gooloo.de/partner) so aussieht (die Bilder sind extrem klein und "zusammen gedrückt"):

...zum Beitrag

Wo ist der Fehler im HTML Code?

Ich habe einen kleinen Fehler im meiner Überschrift entdeckt.

Auf der Seite steht das zwar korrekt da. Aber der Text bei der Maus zeigt einen Teil des html codes. Hier der Code

<li class="pos2" role="presentation">
<a href="/Text/Text-mit-co2-Text/" title="Text mit CO<sub>2</sub> Text" data-urlname="">
<span class="menu-text">Text mit CO<sub>2</sub> Text</span></a>
</li>

Da wo Text steht, steht dann die Überschrift usw.

Das Problem ist jetzt. Dass beim Text bei der Maus auf der Seite steht:

Text mit CO<sub>2</sub> Text

Es soll aber eben das <sub></sub> nicht dabei stehen und die 2 tiefergestellt sein.

Wie gesagt, angezeigt wird es richtig, nur der Text bei der Maus, wenn man auf diesen Link geht, steht dann mit den Code da.

Wie bekommt man das hin?

...zum Beitrag

CSS-Bild-Text?

Hallo, wie lautet der Befehl, wenn ein Text und ein Bild auf der gleichen Linie stehen?

<div class="räderContainer">
                    <h3 class="h41">Text</h3>
                    <img class="rad" src="zahnrad.png">
                </div>

...zum Beitrag

Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>

...zum Beitrag

Kann man mit HTML einen Text nur auf die Hälfte der Seite machen?

Ich möchte einen Text im Blocksatz nur auf der Hälfte der Seite haben, sodass der Text mit dem Ende einer Tabelle abschließt. Ist da was möglich? Wie nennt man sowas, ich scheine nicht die richtigen Begriffe für Google zu verwenden?

Skizze hinzugefügt.

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

Titelbild mit Text auf WordPress?

Hi! Ich will in WordPress für meine Webseite und die Unterseiten Titelbilder erstellen. Also Bilder die dann direkt unter dem Header sind. Ich möchte Text darüber setzen, Hintergrund-Farben für den Text festlegen können, das alles ginge mit Cover. Aber ich suche nach mehr Gestaltungsmöglichkeiten, zum Beispiel die Größe des Hintergrundes und der Abstand zu anderem Text und sowas. Da muss es doch ein PlugIn geben wo man Text über ein Bild legen kann und noch ein paar mehr Gestaltungsmöglichkeiten hat.

Bisher hab ich den SmartSlider verwendet aber der verursacht Probleme mit den Benutzerrollen, deswegen suche ich einen Ersatz. Nutze das Blocksy Theme. Meine aktuelle Lösung ist das Bild auf Canva zu erstellen. Dann muss ich meinen KollegInnen aber auch noch Canva beibringen und für die ist WordPress schon kompliziert genug.

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

HTML/CSS: Wie kann ich den Text neben dem zweiten Symbol zentrieren?

Hallo,

ich brauche Hilfe. Ich möchte den Text „Announcements“ so verschieben, dass es neben dem zweiten Symbol zentriert ist (siehe erster Text „My courses“).

Dankeschön.

Es wäre nett, wenn ihr antworten würdet.

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

HTML - Wie kriege ich den Text in einer Liste linksbündig?

In einer Zeile eines Inhaltsverzeichnisse ist ein rotes Sternchen. Ich hätte gerne, dass der Text rechts daneben linksbündig ist, also nicht verschoben durch den Zeilenumbruch.

Der Text in den anderen Zeilen ist hinter den Nummern einwandfrei linksbündig. Nur sollte die zweite Zeile in Nr. 7 eingerückt sein.

...zum Beitrag

Timer auf Webseite (HTML)?

Wie kann ich in JTML einen Versteckten Tiger stellen, so dass einige Texte erst nach Ablauf des Timers (z.B. 10 sek.) Auftauchen. Der endbenutzer soll davon nichts sehen!

...zum Beitrag

Wordpress Text zum weiter lesen runter klicken?

Huhu,

ich möchte auf meiner WordPress Homepage (Elementor) wie auf dem Foto einen Text haben, auf den man klickt und sich anschließend dort drunter ein weiteres Text Feld öffnet.

Wisst ihr wie man Spezifisch diese Funktion nennt?

Dann kann ich das passende YouTube Tutorial finden!

...zum Beitrag

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->

Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen