template zerlegen in einzelseiten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • template zerlegen in einzelseiten

    Hi Gemeinde!
    Ich steh vor einem Problem.
    Ich habe ein Template in 6+3 seiten aufgeteilt

    Template besteht aus index.html Link dazu im Template auf Zeile 8


    head.inc.php
    footer.inc.php
    nav.inc.php

    und die seiten

    index.php

    galerie.php
    team.php
    service.php
    kontakt.php


    ich habe mit <div ID = "menu-container"> einige verschiedene Versuche unternommen (Zeile 85) {auf jeder der seiten galerie team service kontakt oben reingeschrieben und am ende der seite wieder geschlossen} {überall rausgelöscht} usw.

    Probleme bei mir:

    klicke ich die Links in der Navigation an komme ich nicht auf die entsprechenden seiten. ich bleibe auf der jeweiligen seite auf der ich gerade bin (habe das allerdings erstmal so gelöst, dass ich im nav.inc jedem Link ein onklick mitgegeben habe, so käme ich theoretisch schon mal auf die seite. dort wird mir aber nichts angezeigt, (ausser ich schreibe selber irgendwas hinein) Teilweise ist es dann gegangen, dass ich das was angezeigt werden sollte beim 2. klick auf den link (allerdings nur wenn ich schon auf der seite bin) das angezeigt wurde, was mit der index.html zu sehen ist.
    meine seiten und die index.html liegen alle im gleichen ordner, von daher sollte die anbindung an css /js ja auch richtig sein.

    Kann mir irgendwer von euch einen Tip geben woran es haken könnte?

    Bitte Bitte ?( ?( ?(


    die index.html sieht folgendermassen aus (und funktioniert auch)(kanns nicht reinstellen, nachricht zu lang
    kommt mit dem nächsten beitrag

  • HTML-Quellcode

    1. <!DOCTYPE html>
    2. <head>
    3. <title>Polygon - Responsive HTML5 Template</title>
    4. <meta name="keywords" content="" />
    5. <meta name="description" content="" />
    6. <!--
    7. Polygon Template
    8. http://www.templatemo.com/tm-400-polygon
    9. -->
    10. <meta charset="UTF-8">
    11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    13. <!-- Bootstrap -->
    14. <link href="css/bootstrap.min.css" rel="stylesheet">
    15. <link href="css/font-awesome.min.css" rel="stylesheet">
    16. <link rel="stylesheet" href="css/templatemo_misc.css">
    17. <link href="css/templatemo_style.css" rel="stylesheet">
    18. <link href="css/animate.css" rel="stylesheet">
    19. <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,600' rel='stylesheet' type='text/css'>
    21. <script src="js/jquery-1.10.2.min.js"></script>
    22. <script src="js/jquery.lightbox.js"></script>
    23. <script src="js/templatemo_custom.js"></script>
    24. <script>
    25. function showhide()
    26. {
    27. var div = document.getElementById("newpost");
    28. if (div.style.display !== "none")
    29. {
    30. div.style.display = "none";
    31. }
    32. else {
    33. div.style.display = "block";
    34. }
    35. }
    36. </script>
    38. </head>
    39. <body>
    Alles anzeigen

  • Hallo Petra,

    Sind die Links denn richtig eingepflegt? Also findest du, wenn du den Quelltext betrachtest, ein <a href="galerie.php">Galerie</a> (wichtig ist die href-Angabe).
    Wenn ein Link trotz klicken auf der gleichen Seite bleibt, stimmt entweder der href-Tag nicht oder der Aufruf wird durch ein Javascript geblockt.

    Kann man das ganze online irgendwo anschauen, dann könnte man dir eher bei der Fehlersuche helfen.

  • Links sind richtig gesetzt ja.
    Ich hab versucht das ganze auf eine Alte Website von mir zu stellen, leider akzeptieren die nur html. ich will das ganze aber per php weil ich eine Datenbank mit einbinden möchte. Ich werd mal schauen, vllt find ich einen gratis anbieter wo ichs hochladen kann.

    Ich tippe eher darauf, dass ich irgendwo beim trennen der Seiten was verbockt habe. weil die html-datei geht ja

  • das ist mir auch aufgefallen wie gesagt, das ist das original template, (da funktioniert das switchen zwischen den seiten) scheint über eine js-routine zu funktionieren.

    Wenn ich über mein eigenes drübergehe ohne anzuklicken, erscheint ein link (den ich eingegeben habe) wenn ich auf meinem auf rechte maustaste link öffnen im neuen Fenster komm ich auf entsprechende seite.

    Ich post mal das js

    JavaScript-Quellcode

    1. "use strict";
    3. jQuery(document).ready(function($){
    5. /************** Menu Content Opening *********************/
    6. $(".main_menu a, .responsive_menu a").click(function(){
    7. var id = $(this).attr('class');
    8. id = id.split('-');
    9. $("#menu-container .content").hide();
    10. $("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
    11. $("#menu-container .homepage").hide();
    12. $(".support").hide();
    13. $(".testimonials").hide();
    14. return false;
    15. });
    17. $( window ).load(function() {
    18. $("#menu-container .products").hide();
    19. });
    21. $(".main_menu a.templatemo_home").addClass('active');
    23. $(".main_menu a.templatemo_home, .responsive_menu a.templatemo_home").click(function(){
    24. $("#menu-container .homepage").addClass("animated fadeInDown").show();
    25. $(this).addClass('active');
    26. $(".main_menu a.templatemo_page2, .responsive_menu a.templatemo_page2").removeClass('active');
    27. $(".main_menu a.templatemo_page3, .responsive_menu a.templatemo_page3").removeClass('active');
    28. $(".main_menu a.templatemo_page5, .responsive_menu a.templatemo_page5").removeClass('active');
    29. return false;
    30. });
    32. $(".main_menu a.templatemo_page2, .responsive_menu a.templatemo_page2").click(function(){
    33. $("#menu-container .team").addClass("animated fadeInDown").show();
    34. $(this).addClass('active');
    35. $(".main_menu a.templatemo_home, .responsive_menu a.templatemo_home").removeClass('active');
    36. $(".main_menu a.templatemo_page3, .responsive_menu a.templatemo_page3").removeClass('active');
    37. $(".main_menu a.templatemo_page5, .responsive_menu a.templatemo_page5").removeClass('active');
    38. return false;
    39. });
    41. $(".main_menu a.templatemo_page3, .responsive_menu a.templatemo_page3").click(function(){
    42. $("#menu-container .services").addClass("animated fadeInDown").show();
    43. $(".our-services").show();
    44. $(this).addClass('active');
    45. $(".main_menu a.templatemo_page2, .responsive_menu a.templatemo_page2").removeClass('active');
    46. $(".main_menu a.templatemo_home, .responsive_menu a.templatemo_home").removeClass('active');
    47. $(".main_menu a.templatemo_page5, .responsive_menu a.templatemo_page5").removeClass('active');
    48. return false;
    49. });
    51. $(".main_menu a.templatemo_page5, .responsive_menu a.templatemo_page5").click(function(){
    52. $("#menu-container .contact").addClass("animated fadeInDown").show();
    53. $(this).addClass('active');
    54. $(".main_menu a.templatemo_page2, .responsive_menu a.templatemo_page2").removeClass('active');
    55. $(".main_menu a.templatemo_page3, .responsive_menu a.templatemo_page3").removeClass('active');
    56. $(".main_menu a.templatemo_home, .responsive_menu a.templatemo_home").removeClass('active');
    58. loadScript();
    59. return false;
    60. });
    64. /************** Gallery Hover Effect *********************/
    65. $(".overlay").hide();
    67. $('.gallery-item').hover(
    68. function() {
    69. $(this).find('.overlay').addClass('animated fadeIn').show();
    70. },
    71. function() {
    72. $(this).find('.overlay').removeClass('animated fadeIn').hide();
    73. }
    74. );
    77. /************** LightBox *********************/
    78. $(function(){
    79. $('[data-rel="lightbox"]').lightbox();
    80. });
    83. $("a.menu-toggle-btn").click(function() {
    84. $(".responsive_menu").stop(true,true).slideToggle();
    85. return false;
    86. });
    88. $(".responsive_menu a").click(function(){
    89. $('.responsive_menu').hide();
    90. });
    92. });
    95. function loadScript() {
    96. var script = document.createElement('script');
    97. script.type = 'text/javascript';
    98. script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
    99. 'callback=initialize';
    100. document.body.appendChild(script);
    101. }
    103. function initialize() {
    104. var mapOptions = {
    105. zoom: 12,
    106. center: new google.maps.LatLng(40.7823234,-73.9654161)
    107. };
    108. var map = new google.maps.Map(document.getElementById('templatemo_map'), mapOptions);
    109. }
    Alles anzeigen

  • Achso, ich habe nicht kapiert, dass das das Original ist. Mein Fehler.
    Wie es scheint, hast du den Code richtig übernommen, deswegen kann ich jetzt nur bedingt helfen.
    Ruf mal bitte deine Seite auf (im Firefox oder Chrome), drück F12, wechsel in den Tab Konsole, lade die Seite mit Strg + Shift + R neu und guck, ob eine Fehlermeldung erscheint. Wenn nicht, klick bitte auf einen Link und überprüf, ob dann eine Meldung erscheint.
    Wenn ja, poste die bitte hier. Falls nein wirds wirklich langsam schwierig. Dann wäre es gut deine Seite irgendwo online testen zu können, sonst artet es in lustigem Rätselraten aus.