Ingrid: include-Funktion und CSS

0 18

include-Funktion und CSS

Ingrid
  • css
  • includes
  • php
  1. 0
    Rolf B
    1. 0
      MudGuard
      • menschelei
      1. 0
        Rolf B
  2. 0
    djr
    1. 0
      Ingrid
      1. 0
        djr
  3. 0
    Matthias Scharwies
    1. 1
      Matthias Scharwies
      1. 0
        Ingrid
  4. 0
    MudGuard
    1. 0
      Ingrid
  5. 0
    Ingrid
    1. 0
      Gunnar Bittersmann
      • includes
      • php
      1. 0
        Ingrid
    2. 0
      Rolf B
      1. 0
        Ingrid
        1. 0
          Rolf B
SELF-Forum

include-Funktion und CSS

Ingrid
– Informationen zu den Bewertungsregeln

Hallo!

Darf ich mit meinen geringfügigen Informatik-Kenntnissen mich wieder einmal an die Gemeinschaft der Super-Experten wenden? ;)

Diesmal geht es um folgendes:

Bis vor ein paar Jahren hatte ich ein Blog unter Wordpress; es wurde von Hackern vollständig zerstört. Zwischenzeitlich habe ich mir ganz leidliche HTML- und CSS-Kenntnisse angeeignet und möchte das Blog wieder aufbauen (anfangs ohne Kommentar-Funktion).

Ich bin jetzt so weit, dass sämtliche Dateien – von vernachlässigenswerten Kleinigkeiten abgesehen – auf WAMP funktionieren; sogar das Responsive Design klappt. Allerdings möchte ich, in vorausschauender Planung, einiges HTML mittels der PHP-include-Funktion auslagern. (Das sind sozusagen meine ersten Schritte in PHP.)

Vereinfacht und verkürzt gesagt handelt es sich um folgendes: Ich hatte bisher die folgende Datei:

<!DOCTYPE html>

<html>

<head>/* Hier folgen die typischen Angaben einschließlich eines Links zur ausgelagerten CSS-Datei.*/

</head>

<body>

<header>

<h1>Mein Blog</h1>

</header>

<main>

<h1>Titel der Seite</h1>

<p>Lorem ipsum</p>

</main>

</body>

</html>

Dazu folgende CSS-Datei, ebenfalls in verkürzter Fassung:

header { background-color: blue; }

header h1 { color: white; }

body{ background-color: white; }

body h1, body p { color: #333; }

Soweit, so gut. Alles funktioniert. Jetzt wandle ich also die erste Datei um:

<!DOCTYPE html>

<html>

<head>/* Hier folgen die typischen Angaben einschließlich eines Links zur ausgelagerten CSS-Datei.*/

</head>

<body>

/********** ACHTUNG, hier wird es anders: ***********/

<?php include ("include_header.php"); ?>

<main>

<h1>Titel der Seite</h1>

<p>Lorem ipsum</p>

</main>

</body>

</html>

Zu meiner großen Überraschung funktioniert dies weder zu 100 %, noch zu 0 %, sondern zu – sagen wir mal – 70 %:

  • sämtliches HTML ist korrekt wiedergegeben

  • sämtliches CSS in <main> ist korrekt wiedergegeben

  • der größte Teil des CSS des <header> ist nicht umgesetzt, z. B. ist die Schriftfarbe auch dort #333333.

Woran mag das liegen? Muss ich den CSS-Link an eine andere Stelle setzen oder ihn irgendwo wiederholen? Oder ist alles mit Responsive Design zu kompliziert? Oder ist der Pfad zum CSS zu lang? (Wohlgemerkt: Ohne die include-Funktion funktioniert der Pfad.)

Danke im voraus für Eure Ideen.

Ingrid

P. S.: Ich hatte gedacht, ich hätte diesen Beitrag schon abgeschickt, aber ich sehe ihn nirgends auftauchen. Für den Fall, dass ich ihn versehentlich abgeschickt hätte, bitte ich um Entschuldigung.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. include-Funktion und CSS

    Rolf B
    – Informationen zu den Bewertungsregeln

    Hallo Ingrid,

    Dumme Fragen vorweg

    • Du hast die Ursprungsdatei von dingsbums.html in dingsbums.php umbenannt?
    • include_header.php liegt im gleichen Ordner wie dingsbums.php, bzw. du hast einen PHP Include-Pfad gesetzt und sie liegt darin (wenn Du nicht weißt, wie man den setzt, bleib beim ersten Teil der Frage :) ).
    • PHP wird bei Dir ausgeführt? Wenn Du nicht sicher bist, nimm diese kleine PHP Datei, speichere sie als test.php im Web und rufe sie im Browser ab.
    <?php
echo "2 mal 3 macht " . (2+2);
?>

    Meine ersten Schritte nach der Abklärung der dummen Fragen wären:

    • Browser-Entwicklerwerkzeuge öffnen
    • Im Netzwerktab gucken ob alle Dateien empfangen werden oder ob es Fehlercodes gibt
    • Pro geladener Datei gucken ob sie die erwarteten Inhalte enthält

    Nach dem, was Du bisher gezeigt hast, kannst Du eigentlich nichts falsch gemacht haben.

    Rolf

    --
    sumpsi - posui - clusi
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. include-Funktion und CSS

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      <?php
echo "2 mal 3 macht " . (2+2);
?>

      Das ist aber falsch! Es muß "3 mal 3 macht " heißen, sonst stimmt ja das Ergebnis nicht.

      cu,
      Andreas ich-mach-mir-die-Welt-wie-sie-mir-gefällt MudGuard

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. include-Funktion und CSS

        Rolf B (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo MudGuard,

        Putz Dir mal die Ohren und hör genau zu!

        Rolf

        --
        sumpsi - posui - clusi
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. include-Funktion und CSS

    djr
    – Informationen zu den Bewertungsregeln

    Hallo @Ingrid,

    soweit ist Alles richtig.

    Nur was steht in der include_header.php?

    Vllt ist darin ein Fehler in der HTML-Syntax. Ein Element nicht geschlossen o.ä..

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. include-Funktion und CSS

      Ingrid
      – Informationen zu den Bewertungsregeln

      Hallo djr,

      Bezogen aufs Beispiel stünde in meinem "header.php" nur: <header> <h1>Mein Blog</h1> </header>

      In meinem echten "header.php" steht in etwa: <header>
      <img src="../../images/logo.png" height="80px;" alt="[logo]">
      <div class="name_der_klasse">
      <h1>Mein_Blog</h1>
      <h2>Untertitel</h2>
      </div> </header>

      Gruss Ingrid

      P. S.:

      In meinem Beitrag bin ich ein bisschen durch einandergekommen. In Wirklichkeit hatte ich die include-Datei nicht "include_header.php", sondern einfach "header.php" genannt.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. include-Funktion und CSS

        djr
        – Informationen zu den Bewertungsregeln

        Hallo @Ingrid,

        schicke Deine Dokumente (so wie sie von PHP erstellt werden und im Browser ankommen) mal durch den jeweiligen Validator https://wiki.selfhtml.org/wiki/Validator.

        Denn ist z.B. das HTML nicht valide, greift der CSS-Selektor daneben.

        In Deiner header.php ist height="80px;" ungültig und muss height="80" heißen ( - im <img>).

        Viel Erfolg.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. include-Funktion und CSS

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    Das sind sozusagen meine ersten Schritte in PHP.) Soweit, so gut. Alles funktioniert.

    Perfekt! Dann liegt es wohl nicht am PHP!

    Zu meiner großen Überraschung funktioniert dies weder zu 100 %, noch zu 0 %, sondern zu – sagen wir mal – 70 %:

      • sämtliches HTML ist korrekt wiedergegeben

  • sämtliches CSS in <main> ist korrekt wiedergegeben

  • der größte Teil des CSS des <header> ist nicht umgesetzt, z. B. ist die Schriftfarbe auch dort #333333.

    Woran mag das liegen?

    Wenn das HTML zu 100% funktioniert, liegt das Problem wohl nicht am PHP.

    Wenn das CSS in main funktioniert, wird die CSS-Datei wohl auch geladen und ausgeführt.

    Wenn die CSS-Regelsätze für header nicht funktionieren, muss es irgendwo dort im CSS haken.

    • Schau dir mal diese möglichen Fehlerquellen an und hake sie ab.

    • Kommentiere die Wertzuweisungen aus und checke sie eine nach der anderen, ob sie funktionieren.

    Muss ich den CSS-Link an eine andere Stelle setzen oder ihn irgendwo wiederholen?

    Gibt es denn ein zweites Stylesheet? Wenn ja, überprüfe mit dem Seiteninspektor (F12), ob die Wertzuweisungen überschrieben werden.

    Oder ist alles mit Responsive Design zu kompliziert?

    Nein, das wird nicht so sein!

    Oder ist der Pfad zum CSS zu lang? (Wohlgemerkt: Ohne die include-Funktion funktioniert der Pfad.)

    Nein, sonst würde ja das CSS von main nicht geladen.

    Herzliche Grüße

    Matthias Scharwies

    --
    "I don’t make typos. I make new words."
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. include-Funktion und CSS

      Matthias Scharwies
      +1 Informationen zu den Bewertungsregeln

      Servus!

      Wenn die CSS-Regelsätze für header nicht funktionieren, muss es irgendwo dort im CSS haken.

      • Schau dir mal diese möglichen Fehlerquellen an und hake sie ab.

      • Kommentiere die Wertzuweisungen aus und checke sie eine nach der anderen, ob sie funktionieren.

      Muss ich den CSS-Link an eine andere Stelle setzen oder ihn irgendwo wiederholen?

      Gibt es denn ein zweites Stylesheet? Wenn ja, überprüfe mit dem Seiteninspektor (F12), ob die Wertzuweisungen überschrieben werden.

      header { background-color: blue; }

header h1 { color: white; }

body{ background-color: white; }

body h1, body p { color: #333; }

      Ich habe mir Dein CSS noch mal angeschaut.

      Die header h1 wird vom folgenden body h1 überschrieben.

      mögl. Lösungen:

      Herzliche Grüße

      Matthias Scharwies

      --
      "I don’t make typos. I make new words."
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. include-Funktion und CSS

        Ingrid
        – Informationen zu den Bewertungsregeln

        Danke, Matthias.

        Die CSS-Angaben sind nur ein Beispiel gewesen, in Wirklichkeit ist mein Code viel komplizierter. Aber Du hast recht erkannt: Ich verstehe und beherrsche nicht alles, und bei vielem probiere ich einfach so lange herum, bis es funktioniert. Seltsamerweise funktionierte mein Code, solange ich nichts mit der include-Funktion ausklammerte. Du Deiner Frage: Ja, ich habe mehr als ein CSS-Stilblatt, aber jeder php-Datei ist nur ein einziges Stilblatt zugeordnet (z. B. anderes Stilblatt für die Startseite als für die Blogseiten).
        Die Frage nach dem Wiederholen des CSS hatte ich gestellt, weil ich mich frage, ob die "@media" im Rahmen des Responsive Design irgendeine Auswirkung haben könnten.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  4. include-Funktion und CSS

    MudGuard Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi,

      • der größte Teil des CSS des <header> ist nicht umgesetzt, z. B. ist die Schriftfarbe auch dort #333333.

    wie wird das denn eingebunden?

    Das hast Du ja leider hinter /* Hier folgen die typischen Angaben einschließlich eines Links zur ausgelagerten CSS-Datei.*/ versteckt …

    Stimmt der Pfad zur CSS-Datei?

    cu,
    Andreas a/k/a MudGuard

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. include-Funktion und CSS

      Ingrid
      – Informationen zu den Bewertungsregeln

      Hallo Andreas,

      Ich glaube, dass der Pfad stimmt. Denn ich habe, wie oben beschrieben, folgenden Versuch unternommen: den <header> zu verdoppeln, direkt untereinander:
      - den ersten <header> in die selbe Datei integriert
      - den zweiten <header> mittels "include" in eine andere Datei namens "header.php" ausgelagert.
      Beide <header> erscheinen untereinander, der erste mit richtigem HTML und richtigem CSS, der zweite mit richtigem HTML, aber mit fehlerhaftem CSS.

      Der Link zur CSS-Datei sieht im Original übrigens wie folgt aus:
      <link rel="stylesheet" href="../../styles/style_name_der_stildatei.css">
      Im oben geannten Beispiel hatte ich der Kürze halber alles ein bisschen vereinfacht.

      Gruss Ingrid

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  5. include-Funktion und CSS

    Ingrid (Versionen)
    – Informationen zu den Bewertungsregeln

    Danke Rolf.

    Dumm sind Deine Fragen nicht. Der Reihe nach:
    1.) Ja, ich habe die Datei umbenannt.
    2.) Ja, ich habe auf die Pfade achtgegeben. Vorsichtshalber habe ich Gegenproben gemacht, für die ich die Pfade vorübergehend verändert habe.
    Ergebnis beim Pfad der CSS-Datei: Bei der Gegenprobe funktioniert überhaupt nichts mehr, während vorher wenigstens ein Teil funktioniert hat. Ergebnis beim Pfad der include-Datei: Bei der Gegenprobe funktioniert überhaupt nichts mehr, während vorher wenigstens das HTML korrekt sowie ein Teil des CSS funktioniert hat.
    Eine Frage zu den Pfaden:
    Kann es sein, dass meine Pfade zu kompliziert sind?:
    ../../include/header.php ../../styles/style.php Wie schon gesagt, ohne die include-Funktion funktioniert das CSS. 3.) Das PHP wird ausgeführt. (Deine Pipi-Langstrumpf-Rechnung habe ich trotzdem ausprobiert: Es klappt.)
    Aber sowieso: Der Teil HTML funktioniert anstandslos, es hapert mit dem CSS.

    Zu Deinen weiteren Vorschlägen:
    Du schreibst: "Browser-Entwicklerwerkzeuge öffnen". Das habe ich gemacht. "Im Netzwerktab gucken ob alle Dateien empfangen werden oder ob es Fehlercodes gibt".
    Mit anderen Tabs habe ich bisher schon gearbeitet, aber das Netzwerktab ist neu für mich. Da sind verschiedene Dateien angeführt, und beim Zustand steht "200". (Was heisst das? Und was heisst in manchen anderen Dateien "304"?) Allerdings ist zu meiner Überraschung die include-Datei nicht angeführt.
    Aber der HTML-Text der include-Datei ist ausgeführt! Und wenn ich den Text in der include-Datei verändere, dann verändert sich der Text auch in der Gesamtseite.

    Im übrigen habe ich noch einen weiteren Versuch unternommen:
    Ich habe den HTML-header und den include-header übereinandergesetzt:

    <body>   
<header>   
<h1>Mein Blog</h1>   
</header>   
<?php include ("include/header.php"); ?> /* 
/* usw. */

    Ergebnis:
    Der <header> erscheint zweimal untereinander: zuerst richtig; dann richtig hinsichtlich des HTML, aber teilweise falsch hinsichtlich des CSS.

    Ich verstehe nur noch Bahnhof.

    Gruss Ingrid

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. include-Funktion und CSS

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Ingrid

      Mit anderen Tabs habe ich bisher schon gearbeitet, aber das Netzwerktab ist neu für mich. Da sind verschiedene Dateien angeführt, und beim Zustand steht "200". (Was heisst das? Und was heisst in manchen anderen Dateien "304"?)

      HTTP-Statuscodes

      Allerdings ist zu meiner Überraschung die include-Datei nicht angeführt.

      Das sollte nicht überraschen. Der Client (Browser) fragt eine Ressource beim Server an: bspw. example.net/index.php. Der Server merkt, dass es sich um eine PHP-Datei handelt und füht das PHP erstmal aus, bevor er irgendwas rausschickt. Steht nun im PHP-Code include 'header.php' [1], dann wird header.php eingebunden (wobei auch darin PHP ausgeführt wird[2]). Dann erst wird das zusammengebaute HTML-Dokument rausgeschickt. Der Client erfährt überhaupt nichts davon, dass da serverseitig was zusammengebaut wurde, also ist keine Include-Datei im Entwicklertool zu sehen.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

      1. include ist keine Funktion, deshalb sind die Klammern überflüssig. ↩︎

      2. Wenn im Include kein PHP-Code vorkommt, muss das auch nicht vom PHP-Interpreter geparst werden. Dann bietet sich die Einbettung mit readfile() an. ↩︎

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. include-Funktion und CSS

        Ingrid
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        Vielen Dank für alle Deine Informationen. Ich muss jetzt das alles erst einmal lesen, ausprobieren und verarbeiten, denn vieles ist neu für mich (z. B. hatte ich bisher noch nie etwas von "readfile()" gehört. Und "404" hatte ich zwar gekannt, aber ich hatte bisher gedacht, dass wäre eben der Name einer fehlenden Seite.) Bis ich das alles verarbeitet habe, werde ich erst einmal eine Schreibpause hier einlegen.
        Gegebenfalls nehme ich in einiger Zeit erneut Kontakt mit Euch auf.

        Bis dahin Grüsse an alle Foristen, die mir so freundlich geschrieben haben
        Ingrid

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. include-Funktion und CSS

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Ingrid,

      wenn Du den Inhalt der inkludierten PHP-Datei im Browser siehst, war der Pfad nicht zu kompliziert, dann ist alles gut. Ein Fehler bei Include wird von PHP übrigens als "weniger schlimm" betrachtet, deswegen wird kein schwerer Fehler gemeldet. Anders ist es, wenn Du include durch require ersetzt: eine fehlende require-Datei wird von PHP als E_COMPILE_ERROR gemeldet (Stufe: Fatal), der das Script abbricht. D.h. wenn dein PHP Script keinen fatalen Error wirft, ist das Einbetten gelungen.

      Aus meiner Sicht sollte man eigentlich immer require nehmen, es sei denn, es gehört zum erwarteten Programmablauf, dass eine Include-Datei nicht vorhanden ist, und es gibt eine sinnvolle Alternative mit der man fortsetzen kann (Beispiel: Internationalisierung mittels Include einer PHP Datei mit übersetzten Texten[1], die sinnvolle Alternative wäre die Default-Sprache des Systems).

      Zu den HTTP Statuscodes: Solange Du keinen 4xx oder 5xx Code hast, ist eigentlich alles gut. 200 ist OK, besser geht's nicht. Die 3xx Codes sind Informationen für den Browser, wie "Die Datei hast Du schon" oder "Die Datei ist da und da hin umgezogen". Schlecht ist vor allem HTTP 404 - das ist das Schild, das am Büro des Alphabet-Chefs hängt wenn er Urlaub macht[2]

      WENN aber HTML und CSS Dateien ankommen, dann müsstest Du Dich fragen, ob der Brauser dein HTML wie erwartet interpretiert. Vielleicht hast Du ein HTML Element nicht korrekt geschlossen. Wenn das DOM eine andere Struktur hat als Du glaubst, dann treffen die von Dir formulierten CSS Regeln nicht mehr zu. Das siehst Du im DOM Inspektor der Entwicklerwerkzeuge („Elemente“ in Chrome, „DOM Explorer“ im IE).

      Rolf

      --
      sumpsi - posui - clusi

      1. Ja, Gunnar, ich weiß, dass zu I18N mehr gehört als nur Texte zu übersetzen ↩︎

      2. Also: Page not found ↩︎

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. include-Funktion und CSS

        Ingrid
        – Informationen zu den Bewertungsregeln

        Hallo,

        Ganz vielen Dank für die viele Arbeit, die Ihr Euch mit mir macht. Fürs erste habe ich so viele neue Informationen, dass mir der Kopf davon schwirrt. Ich werde Eure Tipps erst einmal ausprobieren und bis dahin eine Pause in der Konversation mit Euch machen.

        Gegebenenfalls wende ich mich wieder später an Euch.

        Gruss
        Ingrid

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. include-Funktion und CSS

          Rolf B
          – Informationen zu den Bewertungsregeln

          Hallo Ingrid,

          okay. Wenn Du die Seite irgendwo online hast, kannst Du uns ja die Adresse nennen - vielleicht sieht ja jemand eine Fehlermeldung die Du übersiehst.

          Rolf

          --
          sumpsi - posui - clusi
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln