CSS in HTML aufrufen

  • Guten Tag


    Ich bin sehr neu.... aber ich hoffe trotzdem auf Hilfe!


    Ich will im HTML ein CSS File aufrufen welches ein Rechteck anzeigen soll.

    Ich habe keine Warnungen oder Fehler. Jedoch wird das Rechteck nicht aufgerufen.

    Könnt Ihr mir sagen was ich falsch mache?


    HTML

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=, initial-scale=1.0">
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7. <title>Test1</title>
    8. <link rel="stylesheet" href="Rechteck.css".css>
    9. </head>
    10. <body bgcolor="DD473F">
    11. </body>
    12. </html>

    Alles anzeigen
    CSS

    1. #rectangle {
    2. width:100%;
    3. height:60px;
    4. background:rgb(255, 0, 200);
    5. position:fixed;
    6. top:0;
    7. left:0;
    8. }



    Besten Dank und Freundliche Grüsse

    DeWoAlliSeged7

  • CSS
    #rectangle {
    width:100%;
    height:60px;
    background:rgb(255, 0, 200);
    position:fixed;
    top:0;
    left:0;
    }
  • Mit CSS kannst Du nichts anzeigen, sondern Du kannst nur ein Element, das Du im HTML definiert hast, gestalten. In deinem HTML gibt es jedoch kein Element mit der ID rectangle, wenn Du es im body einfügst, z. B. als div, sollte es funktionieren.

  • Habe noch nie mit CSS gearbeitet, Gestern habe ich mich dann doch getraut und einfach bei Wordpress einen Befehl eingegeben, den ich aus einem Videotutorial entnommen habe - und der war genau falsch!

    Also ich wollte immer alle Überschriften im BlogHeader löschen, jetzt sind aber alle Beitragsüberschriften weg!


    Also die css eingabe lautete: .entry-header{display:none;}


    und nun möchte ich das wieder rückgängig machen, habe aber nirgendwo gefunden, wie der entsprechen Befehl dafür heisst!

    Denke mal, dass das none; mit was anderem ersetzt werden muss?



    Also ich bitte um Hilfe und ich bedanke mich schon mal im Voraus!

    So schnell werde ich CSS wohl nicht wieder verwenden, genauso wie ich mich auch nicht ans Terminal traue-Schuster bleib bei deinen Leisten!

    LG

    tommix

  • Wo in WP hast du diesen Code eingegeben? Genau dort kannst du ihn auch wieder löschen.

    Oder ändern in .entry-header {display: block;}.

    Wenn du dich für deine Seite für WP entschieden hast, dann wirst du sehr schnell merken, dass es ohne eigene CSS Kenntnisse nicht geht - also besser mit den Grundlagen vertrau machen, sonst wirst du nicht lange Freude an deinem Webauftritt heben.

    Ach ja... und mache doch bitte ein neues Thema auf, wenn du Probleme hast und hänge dich nicht an ein 'fremdes' Thema an.

  • Danke für die schnelle Antwort!

    Genauso denke ich auch, wollte ja nur diese blöde Überschrift wegbekommen, ansonsten klappt ja alles auch ohne CSS.

    Soll ich jetzt aber die alte Eingabe nur löschen oder die alte umändern oder eine neue wie du vorgeschlagen hast, darunterschreiben?

    Möchte das jetzt nich noch schlimmer machen.


    Sorry, bin auf eurer Seite noch nicht so firm, wenn ich nicht in der richtigen Rubrik antworte.

    Dennoch danke und ich werde mich bemühen

    Tommix

  • Das kommt darauf an, wie der Ursprungszustand deines CSS war. .... hast etwas verändert... oder etwas hinzu gefügt... etwas überschrieben?

    Und vor allem... wo hast du diese Änderung durchgeführt? ... in den im Theme vorhandenen CSS Dateien (style.css) oder im zusätzlichen CSS des Customizers?


    Ansonsten kann man dir besser helfen, wenn man den Code sieht (Link zur Seite) - und eine genaue Beschreibung, was du denn ausgeblendet haben willst, wäre auch hilfreich.

  • Bitte das, was du derzeit im zusätzlichen CSS hast hierdurch ersetzen:

    Code
    /*Die Überschrift im Beitrag (mit display: blocK; -> an / mit display: none; -> aus) */
    .entry-header {
     display: block;
    }
    
    /*Die Überschrift im Header - grauer Hintergrund (mit display: blocK; -> an / mit display: none; -> aus) */
    .page-header-title {
      display: none;
    }

    Schau mal, ob du damit klar kommst - bitte dann auch prüfen, ob unerwünschte Nebeneffekte irgendwo auftreten.

    Wenn es nicht klappt, bitte trotzdem so (online) lassen, damit eine weitere Fehleranalyse möglich ist. Kann sein, dass die Selektoren noch etwas modifiziert werden müssen.

  • Wg der 5 std Zeitverschiebung antworte ich erst jetzt, sorry.


    Vielen herzlichen Dank für die Mühe, die Überschrift im Header ist tatsächlich verschwunden,

    super!

    Die Beitragsüberschriften sind noch nicht wiedererschienen. Ich habe zum testen mal eine Überschrift neu eingegeben, die aber zwar im Backend Beitrag erschien, aber nach veröffentlichen leider nicht im Newsblog !html-seminar.de/woltlab/attachment/1949/

    dazu die Fotos. Sind nicht so viele Überschriften, die könnte ich erneut eingeben, wenn wir herausfinden, woran es liegthtml-seminar.de/woltlab/attachment/1950/


    html-seminar.de/woltlab/attachment/1951/

  • Das Problem legt darin, dass es eine weite CSS Anweisung gibt, die deine Überschrift auf 'none' setzt.

    Ergänze bitte mal im zusätzlichen CSS wie folgt:

    Code
    .entry-header .entry-title {
     display: block;
    }

    Da muss nur das .entry-title an die richtige Stelle eingefügt werden.

  • Nochmal ich, die Überschrift soll ja nicht geblockt werden, nur der Header und das hast du ja supi gemacht!

    Also ich denke mal - mit diesem Code wird doch die Überschrift bestimmt geblockt , oder? Aber die soll ja zu sehen sein

    Code

    1. .entry-header .entry-title {
    2. display: block;
    3. }

    Aber wie heisst denn das in CSS wenn es nicht geblockt werden soll ?


    display: unblock. ? oder display: > an ? oder Was ist denn der Code für On oder an ? also für unblocked oder so


    Das ist doch der Fehler oder seh ich das total falsch?

    für ne kurze Antwort wäre ich wirklich total dankbar!

    Tommix

  • Noch was , wenn ich auf die news blog Seite gehe, kommen immer beim Start kurz die Überschriften und werden dann sofort ausgeblendet?!

    Also sie werden anscheinend "geblockt??!! "

  • Einmal etwas Grundlagen... das CSS Format 'block' hat nichts mit dem deutschen 'geblockt' zu tun! Mit 'block' wird festgelegt, dass das betroffene Element als Block angezeigt wird - es ist dann definitiv AN... im Gegensatz zum Format 'none', das wäre das Analoge zu AUS (wird nicht angezeigt). Bitte schau dir dazu die Grundlagen im CSS an... https://developer.mozilla.org/de/docs/Web/CSS/display

    Aber zurück zu deinem Überschriftenproblem:

    Bisher haben wir bei den Bemühungen die Überschriften so ein- bzw aus zu blenden, wie du es haben willst, auf der Seite https://www.samui-webtv.com/rudi-window-door/ betrachtet. Leider hast du den CSS Code zum Einblenden der Überschriften im Textteil (siehe Beitrag #12) nicht im zusätzlichen CSS aufgenommen, damit wäre auf dieser Seite die Überschrift wieder eingeblendet worden... du hättest die Überschrift dann allerdings doppelt, denn du hattest sie ja noch einmal manuell hinzugefügt.

    Auf der Seite https://www.samui-webtv.com/newsblog/ sind die CSS Selektoren etwas anders zugeordnet - hier wirkt die Weisung

    Code
     .entry-title {
      display: none;
    }

    die in einer deiner CSS Dateien steht, weiterhin auf alle Elemente mit der Klasse 'entry-title'.

    Versuche bitte mal im zusätzlichen CSS mit dem Code

    Code
    .entry-title {
      display: block;
    }

    das Original CSS zu überschreiben. Aber dann bitte auf allen anderen Seitenteile prüfen, ob damit nicht ungewollt andere Elemente (Überschriften) sichtbar werden, die eigentlich ausgeblendet bleiben sollen.

  • Also ich seh schon, das ist alles viel umfangreicher Halsich dachte.

    Besonders möchte ich mich schon mal für deine grosse Mühe und Aufmerksamkeit danken- sowas findet man nicht alle Tage!


    Ehrlich, ich habe grosse Schwierigkeiten beim Verständnis vom CSS. und ich glaube nicht, das ich das auch noch komplett lernen kann.

    Wäre schön, wenn wir das dennoch hinbekämen, denn ich möchte eigentlich noch 2 Filme schneiden und mir läuft die Zeit davon.

    Denn ich weiss auch nicht, was mit zusätzlichem Css gemeint ist und wo man das eingibt.


    Bislang machte ich immer so die Eingaben:


    - in WP öffne ich die entsprechende Seite zB Newsblog

    - dann gehe ich auf Customizer

    - dann scrolle ich auf Custom/JSS und mache dort im Fenster die Eingaben


    Etwas anderes habe ich noch nicht gemacht.

    Denke aber mal , dass es damit nicht getan ist oder?

  • Das machst du genau richtig - dieses 'zusätzliche CSS' (bei dir Custom CSS) ist die Stelle, an der man Änderungen bzw Ergänzungen zu den Formatierungen machen muss, die durch das WP Theme vorgegeben sind.

    Was ich auf der Seite sehe, die derzeit online ist, ist genau das, was ich erwarten würde... wie ich es im Beitrag #16 beschrieben habe.

    Du hast dort eingefügt...

    Code
    .page-header-title {
     display: none;
    }

    Damit wird die Überschrift im Header (grauer Bereich) ausgeblendet - oder besser gesagt, es werden alle Elemente ausgeblendet, denen die Klasse page-header-title gegeben wurde. Da es aber durchaus möglich sein kann, dass diese Klasse auch bei anderen Elementen auf deiner Seite vergeben wurde, sagte ich ja, bitte prüfen, ob unerwünschte Nebeneffekte auftreten und ob da jetzt mehr ausgeblendet wird, als nur diese Überschrift. ... scheint aber wohl nicht der Fall zu sein - oder?


    Dann hast du jetzt im CSS eingefügt...

    Code
    .entry-header .entry-title {
     display: block;
    }

    Damit wird die Überschrift auf der Seite https://www.samui-webtv.com/rudi-window-door/ sichtbar gemacht - aber wohl nur auf dieser Seite, denn der Selektor .entry-header .entry-title trifft offensichtlich nur für genau diese Überschrift zu. Im Prinzip ist das eine gute Sache, denn so kannst du gezielt auf einzelne Elemente zugreifen - in deinem Fall, da du ja auch andere Überschriften sichtbar machen willst, muss dieser Selektor allgemeiner, weniger gezielt auf ein einzelnes Element gehalten werden.

    Deswegen hatte ich vorgeschlagen (siehe Beitrag #16) der gesamten Klasse entry-title ein display: block; zu geben, denn die Überschriften auf der anderen Seite... https://www.samui-webtv.com/newsblog/ sind dieser Klasse zugeordnet und sollten dann auch sichtbar sein.

    Dein zusätzliches / Custom CSS sollte dann so aussehen....

    CSS
    /* Ausblenden aller Überschrift mit der Klasse page-header-title */
    .page-header-title {
     display: none;
    }
    
    /* Einblenden aller Überschriften mit der Klasse entry-title */
    .entry-title {
     display: block !important;
    }

    Das !important muss da mit eingefügt werden, damit die Formatierung aus den original CSS Dateien des WP Themes überschrieben werden und ungültig sind.

    Bitte teste das jetzt mal... und natürlich wieder überall auf unerwünschte Effekte prüfen!!

  • html-seminar.de/woltlab/attachment/1957/html-seminar.de/woltlab/attachment/1958/Ich glaub es nich! Gibts das Wirklich - Grosse Freude bei mir!!! The Titles are Back!!!! Danke dir ganz herzlich!


    Du meintest, ich soll auf unerwünschte Effekte achten- es gibt eine Page, nämlich SHOWCASE, die ihr aussehen etwas verändert hat.

    Muss aber nicht unbedingt damit zusammen hängen? Hier der Unterschied zu den anderen Seiten, ist etwas tiefer gerutscht und der bildfüllende

    graue Hinter Grund ist weg.

    ich habe die Pagebuilder Elemente und Brizy, und wenn ich mit Brizy aktualisiere, siehst wieder richtig aus aber nach dem upload

    ist es weiter falsch. hier die Bilder


    html-seminar.de/woltlab/attachment/1958/

  • Das hat tatsächlich nichts mit den Änderungen in Sachen Überschriften zu tun... muss also entweder schon vorher so gewesen sein, oder irgendetwas hat dort eine Änderung gemacht (hast du was Neues installiert oder ein Update durchgeführt).

    Auf jeden Fall hat das betreffende Element im CSS ein padding: 10px.

    Um das - also den Spalt zwischen Bild und Header - weg zu bekommen, musst das padding-top auf 0 setzen... (wieder im zusätzlichen CSS hinzufügen)

    Code
    .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
      padding-top: 0;
    }

    ... und natürlich auch wieder schauen, ob sich dadurch was Unerwünschtes einschleicht.

Jetzt mitmachen!

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