Guestbook in HTML5/CSS webpage einfügen

Diskutiere Guestbook in HTML5/CSS webpage einfügen im HTML Forum im Bereich Programmierung; Hallo, wer könnte behilflich sein mit einem Problem? Ich versuche konform Anleitung ein Guestbook (Gästebuch) per iframe in einer HTML5/CSS...
Diskutiere Guestbook in HTML5/CSS webpage einfügen im HTML Forum im Bereich Programmierung; Hallo, wer könnte behilflich sein mit einem Problem? Ich versuche konform Anleitung ein Guestbook (Gästebuch) per iframe in einer HTML5/CSS...
J

JorisJV

New member
Beiträge
3
Punkte Reaktionen
0
Hallo,

wer könnte behilflich sein mit einem Problem? Ich versuche konform Anleitung ein Guestbook (Gästebuch) per iframe in einer HTML5/CSS responsive Webpage einzufügen. Nach Online stellen müsste angeblich das Gästebuch sichtbar sein, tut es aber leider nicht! Ich habe schon versucht den iframe Code an einer anderen Stelle (ausserhalb einer DIV) einzufügen. Nur das behebt das Problem nicht.
Gerne kann ich den Link zu der Website schicken, wie auch den Gesamt Code der einzelne Seite.

Ich würde mich riesig freuen, wenn Jemand Hilfe bieten könnte.
 
J

JorisJV

New member
Beiträge
3
Punkte Reaktionen
0
Hallo Scatello,

herzlichen Dank für den Hinweis!
Hiermit den Link zu der Webseite: https://test.vloeberghs.eu/azu_website/gastenboek.html

Den Code ist wie folgt:

<!DOCTYPE html>
<html lang="en">

<head>
<meta name=„robots“ content=„noindex, nofollow„ />
<link rel="icon" href="images/azufavicon.png">

<!--Basic Page Needs
==================================================
-->
<meta charset="utf-8">
<title> A-Z Uitvaart</title>
<!--
Mobile Specific Metas
==================================================
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--
CSS
==================================================
-->
<!-- Bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Animation-->
<link rel="stylesheet" href="css/animate.css">
<!-- Morris CSS -->
<link rel="stylesheet" href="css/morris.css">
<!-- FontAwesome-->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Icon font-->
<link rel="stylesheet" href="css/icon-font.css">
<!-- Owl Carousel-->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- Owl Theme -->
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Colorbox-->
<link rel="stylesheet" href="css/colorbox.css">
<!-- Template styles-->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive styles-->
<link rel="stylesheet" href="css/responsive.css">


<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file.-->
<!--if lt IE 9
script(src='js/html5shiv.js')
script(src='js/respond.min.js')
-->

HTML:
</head>

<body>

      <div class="site-top-2">
         <header class="header nav-down" id="header-2">
            <div class="container">
               <div class="row">
                  <div class="logo-area clearfix">
                     <div class="logo col-lg-3 col-md-12">
                        <a href="index.html">
                           <img src="images/AZU_logo.png" alt="">
                        </a>
                     </div>
                     <!-- logo end-->
                     <div class="col-lg-9 col-md-12 pull-right">
                        <ul class="top-info unstyled">
                           <li><span class="info-icon"><i class="icon icon-phone3"></i></span>
                              <div class="info-wrapper">
                                 <p class="info-title">24/7 Beschikbaarheid</p>
                                 <p class="info-subtitle">045 850 10 21&nbsp;</p>
                              </div>
                           </li>
                           <li><span class="info-icon"><i class="icon icon-envelope"></i></span>
                              <div class="info-wrapper">
                                 <p class="info-title">Uw vraag per email</p>
                                 <p class="info-subtitle">[email protected]</p>
                              </div>
                           </li>
                          
                        </ul>
                     </div>
                     <!-- Col End-->
                  </div>
                  <!-- Logo Area End-->
               </div>
            </div>
            <!-- Container end-->
            <div class="site-nav-inner site-navigation navigation navdown">
               <div class="container">
                  <nav class="navbar navbar-expand-lg ">
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"><i class="icon icon-menu"></i></span></button>
                     <!-- End of Navbar toggler-->
                     <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                           <li class="nav-item dropdown active"><a class="nav-link" href="index.html" >Home</a>                         
                        </li>
                           <!-- li end-->
                             <li class="nav-item dropdown"><a class="nav-link" href="#" data-toggle="dropdown">A-Z Uitvaart<i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li><a href="overlijden.html">Info bij overlijden</a></li>
                                  <li><a href="voorregeling.html">De vóórregeling</a></li>
                                 <li class="dropdown-submenu"><a class="nav-link" href="#" data-toggle="dropdown">De Uitvaart</a>
                                    <ul class="dropdown-menu">
                                       <li><a href="uitvaart_voor.html">Vóór de Uitvaart</a></li>
                                       <li><a href="uitvaart_dag.html">Dag van Uitvaart</a></li>
                                       <li><a href="uitvaart_na.html">Na de Uitvaart</a></li>
                                    </ul>
                                       <li><a href="uitvaartkosten.html">Uitvaartkosten</a></li>
                                       <li><a href="uitvaartverzekering.html">Uitvaartverzekering</a></li>
                                       <li><a href="about.html">A-Z Uitvaart Team</a></li>
                                       <li><a href="galerij.html">Ons Uitvaartcentrum</a></li>
                                       <li><a href="faq.html">Veel gestelde vragen</a></li>
                                 </li>
                              </ul>
                           </li>
                           <!-- li end-->
                           <li class="nav-item dropdown"><a class="nav-link" href="#" data-toggle="dropdown">Service<i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu" role="menu">
                                 <li><a href="https://a-z-uitvaart.nabestaandendesk.nl/en/login" target="_blank">Nabestaandenloket</a></li>
                                 <li><a href="notaris.html">Notariële informatie</a></li>
                                 <li><a href="https://www.a-z-uitvaart.nl/laatstewensonline/" target="_blank">Laatste Wens</a></li>
                                 <li><a href="https://www.herinneringaan.nl/muziekgids" target="_blank">Muziekgids</a></li>
                                 <li><a href="memori.html">Memori</a></li>
                                 <li class="dropdown-submenu">
                              </ul>
                           </li>
                           <!-- li end-->
                           <li class="nav-item dropdown"><a class="nav-link" href="#" data-toggle="dropdown">Rouwkisten<i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu" role="menu">
                                 <li><a href="#" target="_blank">Standaard</a></li>
                                 <li><a href="#" target="_blank">Kinderkistjes/manden</a></li>
                              </ul>
                           </li>
                           <!-- li end-->
                           <li class="nav-item dropdown"><a class="nav-link" href="#" data-toggle="dropdown">Rouwdrukwerk<i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu" role="menu">
                                 <li><a href="#" target="_blank">Standaard</a></li>
                                 <li><a href="#" target="_blank">Speciaal</a></li>
                              </ul>
                           </li>
                           <!-- li end-->
                            <li class="nav-item dropdown">
                           <a class="nav-link" href="#" data-toggle="dropdown">Gastenboek
                              <i class="fa fa-angle-down"></i>
                           </a>
                              <ul class="dropdown-menu" role="menu">
                                 <li><a href="gastenboek.html">A-Z Gastenboek</a></li>
                                 <li><a href="https://www.keurmerkpersoonlijkeuitvaart.nl/beoordelingen/relatie.php?id=20008" target="_blank">Keurmerk Overzicht</a></li>
                                 <li><a href="https://www.google.com/search?client=firefox-b-d&q=a-z-uitvaart" target="_blank">Google Recenties</a></li>
                              </ul>
                           </li>
                           <!-- li end-->
                           <li class="nav-item dropdown">
                                 <a href="weetjes.html">Weetjes</a>
                           </li>
                           <!-- li end-->
                             <li class="nav-item dropdown"><a class="nav-link" href="#" data-toggle="dropdown">Downloads<i class="fa fa-angle-down"></i></a>
                              <ul class="dropdown-menu" role="menu">
                                  <li><a href="downloads/lwf_2022_01.pdf" target="_blank">Laatse Wens Formulier</a></li>
                                  <li><a href="#" target="_blank">Flyer Online</a></li>
                                  <li class="dropdown-submenu"><a class="nav-link" href="#" data-toggle="dropdown">Drukwerk</a>
                                    <ul class="dropdown-menu">
                                       <li><a href="downloads/azu_flyer.pdf" target="_blank">Flyer (PDF)</a></li>
                                       <li><a href="#" target="_blank">Extra</a></li>
                                    </ul>
                                 </li>
                              </ul>
                           </li>
                           <!-- li end-->
                           <li class="nav-item dropdown">
                                 <a href="contact.html">Contact</a>
                           </li>
                        </ul>
                        <!--Nav ul end-->
                     </div>
                     <!-- Top bar btn -->
                  </nav>
                  <!-- Collapse end-->
               </div>
            </div>
            <!-- Site nav inner end-->
         </header>
         <!-- Header end-->
      </div>

      <div class="banner-area" id="banner-area" style="background-image:url(images/banner/banner_azu.jpg);">
         <div class="container">
            <div class="row justify-content-center">
               <div class="col">
                  <div class="banner-heading">
                    <h1 class="banner-title">A-Z Gastenboek</h1>
                     <ol class="breadcrumb">
                      
                       <li><a href="#" target="_blank">recensies</a></li>
                     </ol>
                  </div>
               </div>
               <!-- Col end-->
            </div>
            <!-- Row end-->
         </div>
         <!-- Container end-->
      </div>
      <!-- Banner area end-->
    
      <section class="main-container" id="main-container">
         <div class="container">
            <div class="row">
               <div class="col-lg-8">
                  <div class="post news-post">
<div class="post-body clearfix">
  <!-- Post meta left-->
  <div class="post-content">
                 <div class="entry-header">
                             <div class="post-meta"><span class="post-cat"><i class="icon icon-tag"></i><a href="https://www.keurmerkpersoonlijkeuitvaart.nl/beoordelingen/relatie.php?id=20008" target="_blank"">Keurmerk recensies</a></span>
                           <span class="post-tag"><i class="icon icon-tag"></i><a href="https://www.google.com/search?client=firefox-b-d&q=a-z-uitvaart" target="_blank">Google recensies</a></span>
                        </div>
                              <h2 class="entry-title"><a href="#" >Welkom bij ons gastenboek</a></h2>
                           </div>
                           <!-- header end-->
                           <div class="entry-content">
                              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                              </p>
                           </div>
</div>
                        <!-- Post content right-->
                   </div>
                     <div class="post-body clearfix">
                  
                       <!-- Gastenboek widget-->
                       <iframe scr="guestbook.php" width="100%" name="guestbook" id="guestbook" style="border: none;">
                       <p><a href="guestbook.php">Gastenboek</a></p>
                       </iframe>
                      
                       <!-- Post content right-->
             </div>
                    <!-- post-body end-->
                  </div>
                  <!-- 1st post end-->
                  <!-- 3rd post end-->                  <!-- 4th post end-->
               </div>
               <!-- Content Col end-->
              
               <div class="col-lg-4">
                 <div class="sidebar sidebar-left">
             <div class="widget recent-posts">
             <h3 class="widget-title">Archief</h3>
                        <ul class="unstyled clearfix">
                           <li class="media">
                              <div class="media-left media-middle">
                                 <img src="images/news/foto_blauw.jpg" alt="img" class="img-fluid">
                              </div>
                              <div class="media-body media-middle"><span class="post-date"><i class="icon icon-calendar-full"></i><a href="#"> 19 Jan, 2018</a></span>
                                 <h4 class="entry-title"><a href="news-single.html">Lorem ipsum dolor sit amet</a>
                                    <small>by Anton</small>
                                 </h4>
                              </div>
                              <div class="clearfix"></div>
                           </li>
                           <!-- 1st post end-->
                           <li class="media">
                              <div class="media-left media-middle">
                                 <img src="images/news/foto_groen.jpg" alt="img" class="img-fluid">
                              </div>
                              <div class="media-body media-middle"><span class="post-date"><i class="icon icon-calendar-full"></i><a href="#"> 24 Jan, 2018</a></span>
                                 <h4 class="entry-title"><a href="news-single.html">Lorem ipsum dolor sit amet</a>
                                    <small>by Anton</small>
                                 </h4>
                              </div>
                              <div class="clearfix"></div>
                           </li>
                           <!-- 2nd post end-->
                           <li class="media">
                              <div class="media-left media-middle">
                                 <img src="images/news/foto_aqua.jpg" alt="img" class="img-fluid">
                              </div>
                              <div class="media-body media-middle"><span class="post-date"><i class="icon icon-calendar-full"></i><a href="#"> 27 Jan, 2018</a></span>
                                 <h4 class="entry-title"><a href="news-single.html">Lorem ipsum dolor sit amet</a>
                                    <small>by Anton</small>
                                 </h4>
                              </div>
                              <div class="clearfix"></div>
                           </li>
                           <!-- 3rd post end-->
                          
                           <li class="media">
                              <div class="media-left media-middle">
                                 <img src="images/news/foto_blauw.jpg" alt="img" class="img-fluid">
                              </div>
                              <div class="media-body media-middle"><span class="post-date"><i class="icon icon-calendar-full"></i><a href="#"> 24 Jan, 2018</a></span>
                                 <h4 class="entry-title"><a href="news-single.html">Lorem ipsum dolor sit amet</a>
                                    <small>by Anton</small>
                                 </h4>
                              </div>
                              <div class="clearfix"></div>
                           </li>
                           <!-- 4th post end -->
                           <!-- 5th post end -->
                        </ul>
                     </div>
                     <!-- Recent post end-->
                  </div>
                  <!-- Sidebar end-->
               </div>
               <!-- Sidebar Col end-->
            </div>
            <!-- Main row end-->
         </div>
         <!-- Container end-->
      </section>

   <!-- Footer start-->
      <footer class="footer" id="footer">
         <div class="footer-main bg-overlay">
            <div class="container">
               <div class="row">
                  <div class="col-lg-4 col-md-12 footer-widget footer-about">
                     <div class="footer-logo">
                        <img src="images/AZU_logo footer.png" alt="">
                     </div>
                     <p>Toekomstig zullen wij een nieuwsbrief gaan versturen. Mocht u interesse hebben, dan kunt u dit onderstaand kenbaar maken door uw email-adres in te vullen en te versturen.</p>
                    
                     <h3 class="widget-title">Schrijf hier in voor de Nieuwsbrief!</h3>
                     <form class="newsletter-form" id="newsletter-form" action="#" method="post">
                        <div class="form-group">
                           <input class="form-control form-control-lg" id="newsletter-form-email" type="email" name="email" placeholder="Email"
                              autocomplete="off">
                           <button class="btn btn-primary"><i class="fa fa-paper-plane"></i></button>
                        </div>
                     </form>
                  </div>
                  <!-- About us end-->
                  <div class="col-lg-4 col-md-6 footer-widget">
                     <h3 class="widget-title">Links</h3>
                     <ul class="list-dash">
                      <li><a href="#">De Uitvaart</a></li>
                      <li><a href="#">Muziekgids</a></li>
                      <li><a href="#">Uitvaartkosten</a></li>
                      <li><a href="#">Memori</a></li>
                      <li><a href="#">Uitvaartverzekering</a></li>
                      <li><a href="#">Rouwkisten</a></li>
                      <li><a href="#">Nabestaandenloket</a></li>
                      <li><a href="#">Kinderkistjes/manden</a></li>
                      <li><a href="#">Notariele zaken</a></li>
                      <li><a href="#">Rouwdrukwerk</a></li>
                      <li><a href="#">Laatste wens</a></li>
                      <li><a href="#">Rouwdrukwerk speciaal</a></li>
                      <li><a href="#">Assieraden</a></li>
                      <li><a href="#">Gastenboek</a></li>
                    </ul>
                  </div>
                  <div class="col-lg-4 col-md-6 footer-widget">
                     <h3 class="widget-title">A - Z Uitvaart</h3>
                     <div class="ts-contact-info"><span class="ts-contact-icon float-left"><i class="icon icon-map-marker2"></i></span>
                        <div class="ts-contact-content">
                           <h3 class="ts-contact-title">Adres</h3>
                          <p>Uitvaartcentrum:</p>
                          <p>Hoofdstraat 31</p>
                          <p>6436 CB Amstenrade</p>
                          <p>Kantoor:</p>
                          <p>Socratesstraat 2</p>
                           <p>6446 BD Brunssum</p>
                        </div>
                        <!-- Contact content end-->
                     </div>
                    
                     <div class="ts-contact-info last"><span class="ts-contact-icon float-left"><i class="icon icon-envelope"></i></span>
                        <div class="ts-contact-content">
                           <h3 class="ts-contact-title">Email</h3>
                           <p>[email protected]</p>
                        </div>
                        <!-- Contact content end-->
                     </div>
                     <div class="ts-contact-info"><span class="ts-contact-icon float-left"><i class="icon icon-phone3"></i></span>
                       <div class="ts-contact-content">
                           <h3 class="ts-contact-title">Telefoon</h3>
                          <p>Uitvaartcentrum: 046 737 00 30</p>
                          <p>Kantoor: 045 850 10 21</p>
                          <p>Melding van Overlijden: 06 18 33 69 00</p>
                        </div>
                        <!-- Contact content end-->
                     </div>
                  </div>
               </div>
               <!-- Content row end-->
            </div>
            <!-- Container end-->
         </div>
         <!-- Footer Main-->
         <div class="copyright">
            <div class="container">
               <div class="row">
                  <div class="col-lg-6 col-md-12">
                     <div class="copyright-info"><span>Copyright © 2023 A-Z Uitvaart | <a href="av.html">Algemene Voorwaarden</a> | Designed by <a href="#" target="blank">Grafiprof</a></span></div>
                  </div>
                  <div class="col-lg-6 col-md-12">
                    <div class="footer-social text-right">
                        <ul>
                           <li><a href="https://www.facebook.com/people/A-Z-uitvaart/100039380725036/" target="blank"><i class="fa fa-facebook"></i></a></li>
                           <li><a href="https://www.linkedin.com/in/anton-kleintjens-bb2a5713/" target="blank"><i class="fa fa-linkedin"></i></a></li>
                           <li><a href="https://www.youtube.com/channel/UCJ7JC4GnGQeiYUv_bEbGGng" target="blank"><i class="fa fa-youtube"></i></a></li>
                           <li><a href="https://www.google.com/search?client=firefox-b-d&q=a-z-uitvaart" target="blank"><i class="fa fa-google"></i></a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <!-- Row end-->
            </div>
            <!-- Container end-->
         </div>
         <!-- Copyright end-->
      </footer>
      <!-- Footer end-->

      <div class="back-to-top affix" id="back-to-top" data-spy="affix" data-offset-top="10">
         <button class="btn btn-primary" title="Back to Top"><i class="fa fa-angle-double-up"></i>
            <!-- icon end-->
         </button>
         <!-- button end-->
      </div>
      <!-- End Back to Top-->

      <!--
Javascript Files
==================================================

Javascript:
-->
      <!-- initialize jQuery Library-->
      <script type="text/javascript" src="js/jquery.js"></script>
      
      
      <!-- Bootstrap jQuery-->
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
      <!-- Owl Carousel-->
      <script type="text/javascript" src="js/owl.carousel.min.js"></script>
      <!-- Counter-->
      <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
      <!-- Waypoints-->
      <script type="text/javascript" src="js/waypoints.min.js"></script>
      <!-- Color box-->
      <script type="text/javascript" src="js/jquery.colorbox.js"></script>
      
      
      <!-- Template custom-->
      <script type="text/javascript" src="js/custom.js"></script>
      
   </div>
      
   <!--Body Inner end-->
</body>

</html>
 
S

Sempervivum

Well-known member
Beiträge
412
Punkte Reaktionen
66
Hallo JorisJV,
das ist jetzt ein bisschen mysteriös: Rufe ich die PHP-Datei mit dem Gästebuch allein auf, funktioniert das. In dem iFrame sehe ich jedoch nur einen Link ohne HTML-Grundgerüst.
Ist es möglich, dass dein Provider iFrames nicht zulässt?
 
J

JorisJV

New member
Beiträge
3
Punkte Reaktionen
0
Hallo Sempervivum,

herzlichen dank für den Hinweis. Mein Provider lässt allerdings iFrames zu!
Ich verstehe leider auch nicht wo der 'Fehler' sein könnte. Sie sind da besser informiert, wäre es möglich das eine DIV etwas blockiert?
Gestern habe ich kurz mit der Technischen Hotline meines Providers telefoniert. Sogar die Techniker konnten auf erster Sicht kein Fehler entdecken...

Nur frage ich mich, was es sein könnte!
 
Thema:

Guestbook in HTML5/CSS webpage einfügen

Thema:

Guestbook in HTML5/CSS webpage einfügen

Oben Unten