Frage zum HTML-Menü

  • Hallo zusammen,


    ich habe gerade unter index.html ein Menü erstellt. Auch das Design ist soweit fertig.

    Allerdings möchte ich das Menü nicht auf jeder Seite neu schreiben, sondern nur auf einer seite haben und dies dann mit den anderen Verbinden.

    Sodass ich beim ändern des Menüs nicht jeder Seite extra aufrufen muss.


    Kann mir da jemand weiterhelfen?


    Lg Niklas

  • Hey,


    lagere dein Menü sowie dein Kopfbereich und Fußbereich aus. Das heißt in extra Dateien.


    Somit hast du folgende Dateien:

    - header.html (Kopfbereich, Menü ist mitenthalten)

    - footer.html (Fußbereich)


    Nun musst du diese beiden HTML-Dateien mit PHP in die HTML-Seiten einbinden in denen du das brauchst.

    Schau mal hier: PHP Include


    Somit hast du nur eine Datei für den Header und Footer. Werden in diesen Änderungen vorgenommen, ändert sich dies auf jeder Seite.


    Grüße,

    Stef

  • Hallo Stef,


    vielen Dank, du hast mir sehr weitergeholfen.


    Nun stehe doch vor einem Problem.

    Und zwar habe ich auf meiner Seite <link href="header.html" rel="import" /> eingefügt, was auch geklappt hat.


    Allerdings zeigt jetzt nur den Menü-Hintergrund an und die Menüpunkte nicht.


    Könntest du mir vielleicht ein Beispiel senden, wie das header.html aussehen sollte?


    Lg Niklas

  • Hey Niklas,


    mit <link href="header.html" rel="import"> würde ich keine HTML-Datei einbinden.


    Speichere mal deine ganzen Dateien als .php ab.


    Beispiel:

    HTML: header.html
    <header>
        <nav>
            <ul>
                <li><a href='#'>Punkt1</a></li>
                <li><a href='#'>Punkt2</a></li>
                <li><a href='#'>Punkt3</a></li>
            </ul>
        </nav>
    </header>

    Diese möchtest du in die index.php einbinden. Dies erfolgt mit der Funktion include();


    Also so:

    PHP: index.php
    <body>
    <?php
        include("header.html");
    ?>
    </body>

    Und dies machst du dann mit jeder .html-Datei welche du einbinden willst.


    Grüße,

    Stef

  • Hallo Stef,


    vielen Dank.

    Bei meinen HTML-Dokument steht ja am Anfang <html>.

    Was ich muss ich den stattdessen hinschreiben, wenn ich ein php-Dokument habe?


    Lg Niklas

  • Hallo Stef,


    ich habe jetz meine index-Datei als index.php abgespeichert und die header-Datei als header.html

    Ist das richtig?


    Leider wird im Menü weiterhin nur der Hintergrund angezeigt (siehe Bild). Wieso?


    Lg Niklas

  • Hey,


    okay, das ist komisch. Dann zeige mal bitte die Header.html und index.php.


    Wie öffnest du die PHP-Datei? Direkt im Browser, in XAMPP oder auf dem Webserver?


    Grüße,

    Stef

  • Hallo Stef,


    die PHP-Datei öffne ich über meinen Browser (firefox). Aber auch schon als HTML-Datei wurde es nicht angzeigt.


    Lg Niklas

  • Ich muß sagen nicht so gut.

    1. Du vergisst öffters deine """""

    2. id header ,id body nimmt man eigenlich nicht.

    3. dein doctype ist mist

    4. Was ist das ? <sidecontent class="box">Zusatz2</sidecontent> und das <content> vieleicht vertue ich mich da jetzt auch ,aber kenne das gerade nicht.Fals ich mich vertue dann sorry dann vergiss Punkt 4

    5. type="text/css" kannst du bei <style></style> weg lassen

    6 .xmlns="http://www.w3.org/1999/xhtml" weg damit und lang="de" hinschreiben


    Dann schreibt der Validator noch

    Zitat

    Element div not allowed as child of element ul in this context.

    Da sollte man was anderes nehmen,aber das ist für dein jetztiges Problem erstmal unwichtig.



    wenn du Punkt 1 bis 6 weg hast sehe ich da eigentlich kein Problem mehr das dein include nicht gehen sollte außer du hast in der Css irgendwie das Menü noch ausgeblendet.Aber das kannst du ja über die dev Tools vom Browser sehen ob dein Menü includiert wurde

  • Hey,


    du benutzt noch das veraltete HTML. Das aktuelle HTML ist die Version 5. Aktualisiere bitte deine Scripte zu HTML5.

    Tags wie <content> oder <sidecontent> sind veraltet. Deweiteren hast du da ein Sonderzeichenproblem. Liegt dieses villt.

    an dem Editor welchen du benutzt? Speichere deine Datei mal als UTF-8 ohne BOM ab

    Wenn du HTML5 noch nicht kennst dann schau unter folgendem Link nach: HTML5 lernen. Dort wird dir alles über HTML5 erklärt.


    Die PHP Datei funktioniert nur in Xampp (beim Apache-Server) oder auf dem Webspace wo PHP auch unterstützt wird. Wenn du die index.php im Browser direkt aufrufst, wird der PHP-Teil nicht ausgeführt.


    Wenn du PHP-Dateien lokal ausführen willst empfehle ich dir Xampp und wenn du es online ausführen willst dann melde dich bei einem Freehoster an und lade die Dateien hoch. Ich rate dir dies lokal zu machen. Erst wenn alles soweit steht würde ich es hochladen.


    Melde dich dann nochmal wenn du dein HTML aktualisiert hast und die Index.php über Xampp aufgerufen hast.


    Grüße,

    Stef

  • Hallo Stef,


    vielen Dank.


    Ich kenne mich da leider noch nicht so aus. Wo kann man denn HTML aktualisieren?


    Ich benutze den Editor von Microsoft. Kannst du mir vielleicht ein besseren Empfehlen?#


    Lg Niklas

  • Hey,


    Zitat

    Ich kenne mich da leider noch nicht so aus. Wo kann man den HTML aktualisieren?

    Du hast doch dein HTML-Script. Dieses änderst du dann in HTML5 ab, aktualisierst es. Zum lernen kannst du meinen Link im vorigen Beitrag nehmen. Dieses Tutorial erklärt dir sehr gut alle HTML5-Tags und wie man diese anwenden soll. Auch gibt es eine HTML5-Tag Liste mit vielen HTML-Tags.


    Zitat


    Ich benutze den Editor von Microsoft. Kannst du mir vielleicht ein besseren Empfehlen?#

    Verwendest du Visual Studio Code? Der ist ganz okay. Empfehlen würde ich dir Sublime Text 3. Dieser ist ein sehr guter Editor.


    Grüße,

    Stef

  • Ich habe mal deinen Code bei mir auf Server geladen und getestet. Komischerweiße läuft das trotzdem mit den ganzen Fehlern. Kann das sein wie ich schon sagte das deine Css das menü ausblendet?

  • Ja dann kann das wohl auch nicht gehen.Aber das wird er uns ja jetzt bestimmt sagen.

    Ich muß dazu sagen das ich das noch nie genutzt habe weil ich direkt alles im Browser auf den Server mache.Aber das weißt du ja. Wer diese möglichkeiten nicht hat sollte es natürlich mit Lokalen Apache Server machen sonst wird das wohl nie was

  • Hallo,


    ich werde nun das Programm "Sublime Text" benutzen.

    Außerdem werde ich die Seite neu schreiben.


    Was genau muss den oben am Code geändert werden?


    Das ich index.php über den Browser öffne, ist richtig.


    Lg Niklas

  • Hey,


    Zitat


    Was genau muss den oben am Code geändert werden.

    Dies kannst du diesem Tutorial entnehmen: HTML Tutorial


    Zitat


    Das ich index.php über den Browser öffne, ist richtig.

    Installiere dir mal Xampp und führe die Datei dort aus. Gib uns dann eine Rückmeldung ob es funktioniert.


    Grüße,

    Stef

  • Installiere dir mal Xampp und führe die Datei dort aus.

    Auch wenn ich XAMPP selber schon häufiger empfohlen habe, ich würde mir dieses Paket nicht mehr installieren. Da sind viele Dinge bei, die man eigentlich nie braucht. Deshalb habe ich mir den Apache, PHP und MariaDB einzeln downgeloaded und den Webserver und den Datenbankserver als Dienst eingerichtet. Zusätzlich noch einen kleinen FTP-Server, über den ich Daten von meinem Handy austausche.

  • Hallo,


    ich habe jetzt folgen index.php-Inhalt:

    Wo genau muss ich jetzt den von dir genannten Code @Ste einfügen, um den Header & Navigation, sowie den Footer auszulagern?


    Lg Niklas

Jetzt mitmachen!

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