Wieso ändert sich die Hintergrundfarbe nicht?

Hallo, ich probiere mich gerade ein wenig beim HTML coden aus und komme gerade nicht weiter.
Laut Tutorial sollte sich eigentlich ja jetzt die Hintergrundfarbe ändern aber bei mir bleibt sie weiß. Liegt das an den Klammern?
Was muss ich anders machen?
Siehe Bilder

Bild zum Beitrag

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

15.06.2024, 19:54

In Zeile 7 deines HTML-Dokuments fehlt noch eine schließende spitze Klammer (>). Ohne sie ist der meta-Tag unvollständig.

In Zeile 5 fehlt im Übrigen noch ein d (device-width).

Coder1234

Beitragsersteller

15.06.2024, 19:58

Ahhh das war es. Vielen Dank 😀

Wahnsinn was vergessene Klammern und ,,falsche Rechtschreibung“ alles auslösen kann.

GamersGame

15.06.2024, 23:28

@Coder1234

roter Text = Fehler. Bei solch einfachen Codes kannst du auch in Chat GTP fragen. Einfach Code einfügen und fragen warum nix gut

Coder1234

Beitragsersteller

15.06.2024, 23:50

@GamersGame

Auf ChatGPT hätte ich auch kommen können. Hab ne Rot/Grün Schwäche 😀

GamersGame

16.06.2024, 01:03

@Coder1234

Dann wäre es bestimmt sinnvoll dein Theme in VS Code zu ändern. Ich habe grade dieses Theme gefunden: https://marketplace.visualstudio.com/items?itemName=tankashing.blinds-theme

wäre zukünftig jedenfalls sehr sinnvoll, da du ansonst die Fehler nicht richtig erkennen kannst.
Pro-Tipp: hol dir auch noch dieses Plugin: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

whgoffline

15.06.2024, 19:29

Probier mal ./css/ statt css/ aus.

Ansonsten würde ich dir auch sehr die Live Server Erweiterung für VsCode empfehlen.

regex9

15.06.2024, 19:58

Zwischen diesen Pfadangaben gibt es keinen tatsächlichen Unterschied.

whgoffline

15.06.2024, 19:59

@regex9

Habe ich gerade auch festgestellt. Ist wohl der nicht geschlossene Meta Tag in Zeile 7 der Probleme macht...

Coder1234

Beitragsersteller

15.06.2024, 19:38

Funktioniert auch nicht :-)

Live Server habe ich jetzt aktiviert. Danke ;-)

whgoffline

15.06.2024, 19:40

@Coder1234

Also die index.html hast du mal mit Liveserver gestartet?

Coder1234

Beitragsersteller

15.06.2024, 19:42

@whgoffline

Ja genau. Sobald ich am Text was ändere und speicher aktualisiert sich dieser auch. Nur ebend die Hintergrundfarbe nicht.

whgoffline

15.06.2024, 19:43

@Coder1234

Hast du schonmal in den Entwicklertools vom Webbrowser geschaut?

Coder1234

Beitragsersteller

15.06.2024, 19:45

@whgoffline

Wonach muss ich suchen? :-)
Geöffnet habe ich die Entwicklertools.

whgoffline

15.06.2024, 19:50

@Coder1234

z.B. in der Konsole

Coder1234

Beitragsersteller

15.06.2024, 19:53

@whgoffline

Habe da die Fehlermeldung „device-with“ for key „width“ is invalid, and has been ignored

Coder1234

Beitragsersteller

15.06.2024, 19:55

@Coder1234

Aber sollte ja jetzt nichts damit zu tun haben oder?

whgoffline

15.06.2024, 19:56

@Coder1234

Oh man....ich glaub ich sehe es... Also das device-width im html kannst du auch mal fixen, aber das problem ist wahrscheinlich der nicht geschlossene meta tag vor dem link mit dem css in Zeile 7.

Coder1234

Beitragsersteller

15.06.2024, 20:02

@whgoffline

Ja das war es. Danke für die Hilfe 😀

whgoffline

15.06.2024, 20:04

@Coder1234

Keine Ursache. Ps.: Ich vermute mal, dass du das html selbst getippt hast. Mit emmet kürzeln kannst du auch mit ! und dann Tab arbeiten (geht natürlich nur in html Dateien).

Ähnliche Beiträge

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zum Beitrag

HTML in Webseite ändern und beibehalten?

Wie bleibt die Veränderte HTML auf einer Webseite gibt's da Möglichkeiten

...zum Beitrag

html: wie button zentrieren und farbe ändern?

hallo, wie kann ich in html einen button, den ich wie folgt gemacht habe, zentrieren und die farbe ändern.

html:<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button>Buche deine Session hier</button>
</a>
css:.button {
text-align: center;
}
button {
font-size: 20px;
background-color: yellow;
cursor: pointer;
color: green;
}

hab ich irgendwo einen fehler oder muss man das anders machen, den bei mir ändert sich gar nichts.

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zum Beitrag

Canva in Wordpress importieren ohne schwarze Balken oben & unten?

Wie klappt das? Kann mir jemand ein Kürzel für den Html-Code geben? Evtl. kann ich diese Rahmen auch in der Hintergrundfarbe meiner Website einfärben?

DANKE TAUSENDMAL FÜR JEDE ANTWORT

...zum Beitrag

Warum passiert das mit meinem HTML Code?

Folgendes: ich bin gerade dabei eine Schriftart von Google-fonts in ein HTML Dokument du importieren. Das Problem ist, dass der ganze Code anders formatiert wird, sobald ich den Link einfüge. Fast so, als ob kein schließender Tag vorhanden ist.

Das Dokument in dem das Problem zuallererst aufgetreten ist ist lang, weswegen ich ein kleines Beispiel in einem eigens dafür verwendeten Code hinzufüge, es ist überall das selbe.

Kann mir jemand sagen, ob diese Farbänderung nach dem </head> normal sind? Wenn nein, was sollte ich ändern?

...zum Beitrag

html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Hintergrund mit button ändern?

Beim folgenden Code ändert sich die Farbe von Hintergrund, Schrift.außerdem die Beschriftung vom Button auf die Farbe die als nächstes kommt.

Ich würde aber gerne noch eine dritte Farbe hinzufügen aber auch nach lagen googlen leider nicht fündig geworden des halb Versuche ich es nochmal hier.

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zum Beitrag

Mit HTML die Farbe eines Bildes ändern?

Hallo!

Ich habe eine .png Datei die nur aus transparenten und schwarzen Flächen besteht:

Ist es möglich mit HTML wenn z. B. einer mit der Maus drüber fährt (:hover) das sich der schwarze Teil im Bild zu blau ändert?

...zum Beitrag

Politik Halbkreis selber erstellen? Welche(s) Programm(iersprache)?

Ich bin sehr Politik interessiert und vor allem Sitzverteilungen und Koalitionen interessieren mich.

Ich versuche seit Ewigkeiten immer wieder so einen Halbkreis zu machen - siehe Bild (hier Österreich als Bsp.)

Habe es schon mit HTML und CSS probiert, bin aber an der Form gescheitert und um das alles (Code und Webseite) zu verbinden.

Weiß da jemand mehr bzw. kann mir jemand helfen und mich glücklich machen?

egal ob YT Video, oder sonst was.

Danke schonmal im Voraus

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen