Header über include einbinden - flex-box-formatierung wird nicht übernommen

    Moin,

    Ich hab da mal ne frage zu flexboxen und include.


    ich habe meinen header meiner Seite ausgelagert in eine andere Datei und binde diese über include ein. meine externe header-Datei habe via flexboxen formatiert (Bild-->Name-->Bild). Die Elemente sind vertikal via align-items: center; zentriert und horizontal sind die Elemente mit justify-content: space-between formatiert.

    Wenn ich diese Datei nun über include einbinde werden die Inhalte in meinem header eingebunden, aber die Ausrichtung wird nicht übernommen (die Elmente liegen nun dicht beieinander).

    Ich gehe davon aus, dass der include-Befehl die ausgelagerte Seite als ein Element einbindet und die Formatierungen übergeht.

    Aber wie löse ich das Problem, das ich den Header über include einbinde und die Flex-Box-Formatierung meiner ausgelagerten Datei bestehen bleibt??


    vielen Dank für die Antworten!


    viele Grüße!

    Zitat

    Ich gehe davon aus, dass der include-Befehl die ausgelagerte Seite als ein Element einbindet und die Formatierungen übergeht.

    Nein, der include-Befehl wirkt im wesentlichen genau so wie wenn Du den Inhalt der ausgelagerten Datei per Copy&Paste an der Stelle einfügst, wo das include steht. Die Elemente bleiben dabei aufgeschlüsselt und können durch CSS gestaltet werden. Sicher gibt es eine einfache Erklärung, warum das bei dir nicht funktioniert. Poste am besten mal die URL der Seite.

    Ich hab die Seite nicht online, Sie ist nur zum ausprobieren gedacht. ich hab die Seite aber mal als Anhang hochgeladen, vielleicht hilft dir das ja weiter. Wie du schon sagst, wird es wahrscheinlich was ganz banales sein, aber ich sehe den Wald vor lauter Bäumen nicht. Wenn ich die Datei per include in den header lade, dann werden die Abstände (space-between) auch sauber übernommen. dann bekomme ich den Inhalt des headers aber nicht vertical zentriert. wenn ich nun den header, in den ich den header-inhalt per include einlade, ebenfalls zu einem flexcontainer mache und über align-items: center ausrichten will, tut er dies nicht.


    Gruß

    Du hast in der header.php und der nav.php komplette Seitengerüste stehen. Dort dürfen aber nur die Inhalte stehen, die eingefügt werden sollen. In der header.php also


    Code
    <div id="header">
<img src="bilder/logo-small.png" alt="Logo" />
<span id="header_text">INTO THE WIDE OPEN - OUTDOOR SPORT</span>
<img src="bilder/logo-small.png" alt="Logo" />
</div>


    Wobei das div#header überflüssig wie ein Kropf ist. Besser also


    Code
    <img src="bilder/logo-small.png" alt="Logo" />
<span id="header_text">INTO THE WIDE OPEN - OUTDOOR SPORT</span>
<img src="bilder/logo-small.png" alt="Logo" />


    Und dann weist du in der start.php dem header-Element die id "header" zu.

    Noch ein Tip, der bei include hilfreich sein kann:


    Du kannst eigentlich in jedem Browser mit Klick der rechten Maustaste ein Kontextmenü aufrufen und dort den Quelltext anzeigen lassen, den der Browser vom Server bekommen hat.


    Um den Text besser lesen zu können kannst du mit Drücken der Strg-Taste und dem Mouserad die Schriftgröße ändern.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden