導航到同一頁面上的 div 部分無法正常工作？

Question

修復標題與頁面錨重疊 - 我有一個包含 5 個鏈接的頂部欄，這些鏈接在同一頁面上單擊時重定向到 div，但是每當我單擊該鏈接時，它都會重定向到完全相同的 div，但位於div的中間內容不在起始位置，我猜也是 div 內容在標題下？

PS：我已經從StackOverflow檢查了這些解決方案，但沒有結果！

PS 頁面太大了，所以我展示了很少的代碼來生成輸出，所以它的格式不正確.. 對於完整的網頁和輸出，請檢查工作頁面

    WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+ 

 window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) { document.getElementById("bar").style.top = "90px"; } else { document.getElementById("bar").style.top = "150px"; } }

 .main-navigation-top { position: fixed; top: 0px; background: #fff; z-index: 999999; width: 100%; } .about-inner { position: relative; top: 90px; } .pg-content .container-fluid { padding: 60px; } .pg-bar .container-fluid { padding: 0px 60px; } .sub-nav { background: #FC453E; padding: 10px; } .pg-bar { position: fixed; top: -50px; width: 100%; display: block; transition: top 0.3s; z-index: 2; } .scrollbar-colored { scrollbar-color: #eee; } /* .pg-bar ul { list-style-type: none; display: flex; justify-content: space-between; padding-left: 0px; margin-bottom: 0px; overflow: auto; } */ .d-flex { display: flex; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .ml-3 { margin-left: 1rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .font-weight-bolder { font-weight: bolder !important; } .w-100 { width: 100% !important; } .sub-nav { display: block; width: auto; } .sub-nav dl { padding: 2px 0; display: flex; justify-content: space-between; } .sub-nav>dl { white-space: nowrap; margin-bottom: 0; overflow-x: auto; } .sub-nav dd { display: inline-block; margin-bottom: 0px; } .sub-nav a { display: inline-block; color: #fff; text-decoration: none; } .pg-bar li a { color: #fff; text-decoration: none; } .pg-content { padding: 100px 0px; } .pg-btn { padding: 8px 10px; border: none; background: #FC453E; color: #fff; border-radius: 2px; font-size: 20px; } .pg-content p { font-family: poppins; font-size: 14px; margin-bottom: 0px; } .pg-content h6 { color: #FC453E; font-size: 18px; } .home-content span { color: #FC453E; font-family: 'Poppins'; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fff; background-color: #FC453E; } .nav-tabs .nav-link { color: #000; background-color: #eee; border-radius: 0px; padding: 8px 40px; } .col-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .tab-accrd h5 { font-size: 20px; } .p-0 { padding: 0px; } .nav-tabs { border: none; } .flug-i i { font-size: 30px; color: #FC453E; } .flug-i h4 { margin-bottom: 0px; text-transform: uppercase; margin-left: 10px; font-family: 'Poppins'; margin-top: 0px; font-size: 24px; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .flug-cont { margin-left: 40px; } .flug-cont i { color: #eab177; position: relative; top: 3px; } .die { padding: 20px; background: #eee; } .ter h5 { text-transform: uppercase; font-family: poppins; font-size: 20px; } .ter td { font-family: poppins; font-size: 14px; } .ter .table thead th { border-bottom: 2px solid #fff; } .ter .table td, .table th { border-top: 1px solid #fff; } .ter tbody tr { background: #eee; } .star { position: relative; background: #eee; padding: 15px 20px; } .star i { position: absolute; content: ''; top: -12px; color: #FC453E; font-size: 25px; left: 0px } .name { padding: 10px; background: #eeeeee; } .more { color: #FC453E; border: 1px solid #FC453E; background: transparent; padding: 5px 15px; text-transform: uppercase; font-weight: 500; font-size: 14px; } .resie i { position: relative; top: 3px; color: #FC453E; } html { scroll-behavior: smooth; } .nav-tabs>li>a { border-radius: 0px; } .nav-tabs>li>a { margin-right: 5px; } /* nav-tab */ .panel.with-nav-tabs .nav-tabs { border-bottom: none; } .panel.with-nav-tabs .nav-justified { margin-bottom: -1px; } .tab-content { padding: 0px; box-shadow: none; } .panel-body { padding: 0px; } .panel-group .panel+.panel { margin-top: 0px; } .panel-group .panel { border-bottom: 1px solid #fc453e; border-radius: 0px; cursor: pointer; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs>li>a, .with-nav-tabs.panel-default .nav-tabs>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li>a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs>.open>a, .with-nav-tabs.panel-default .nav-tabs>.open>a:hover, .with-nav-tabs.panel-default .nav-tabs>.open>a:focus, .with-nav-tabs.panel-default .nav-tabs>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li>a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs>li.active>a, .with-nav-tabs.panel-default .nav-tabs>li.active>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.active>a:focus { color: #fff; background-color: #fc453e; border-color: #ddd; border-bottom-color: transparent; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu { background-color: #f5f5f5; border-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a { color: #777; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus { background-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus { color: #fff; background-color: #555; }

 <link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!---------- Main Header code starts here---------> <div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;"> <div class="row"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <img src="../img/menu-bar.png" width="78"> </button> <a class="navbar-brand" href="/index.html"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> <div class="clearfix"></div> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a> <ul class="dropdown-menu" style="display: none;"> <div class="container"> <div class="col-lg-3"> <h3>Äthiopien</h3> </div> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> </li> </ul> </div> </nav> </div> </div> <!---------- Top Bar navigation with 5 links to div code starts here---------> <section class="pg-bar" id="bar"> <div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-sm-12"> <div class="sub-nav"> <dl class="scrollbar-colored"> <dd><a href="#Home">Reise</a></dd> <dd><a href="#About">Reiseroute</a></dd> <dd><a href="#Service">Programm</a></dd> <dd><a href="#Carrer">Leistungen</a></dd> <dd><a href="#Contact">Termine & Preise</a></dd> </dl> </div> </div> </div> </div> </section> <!---------- content for 5 links to div code starts here---------> <section class="pg-content"> <!-- this line will also changed start here --> <div class="container-fluid"> <!--change end here --> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-lg-8"> <div class="home-content" id="Home"> <h1 class="text-uppercase">Äthiopien Intensiv</h1> <button class="mt-2 pg-btn">Studienreise Äthiopien</button> <button class="ml-2 mt-2 pg-btn">24 Tage</button> <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen. </p> <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben sind. Neue Abenteuer warten auf Sie!</p> <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p> </div> <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p> </div> </div> </div> <div class="col-lg-4"> <img src="image/bctontour.png" class="img img-responsive"> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button> </div> <div class="col-lg-12 mt-5"> <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive"> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>FLÜGE</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Hotel</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland): </p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">1 Übernachtung in Hawassa</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">2 Übernachtungen in Arba Minch</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">2 Übernachtungen in Turmi</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4 class="text-wrap">VERPFLEGUNG</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Ethnologisches Museum Addis Abeba</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Nordäthiopien entdecken</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Blaue Nil Fälle</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Debreh Libanos Kloster</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Süden Äthiopiens</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Mago Nationalpark</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>ABC Pluspunkte</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Informationsmaterial</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Auslandskrankenversicherung</p> </div> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button> </div> </section>

Answer 1

實際上，標題滾動到頁面頂部並隱藏在導航欄下。 您可以在要滾動到的標題上設置scroll-margin-top ，例如scroll-margin-top: 16rem 。

例如，在您的代碼中：

<button class="w-100 text-uppercase font-weight-bolder pg-btn checking" id="About" style="scroll-margin-top: 16rem;">Reiseroute</button>

只需將其添加到您用來設置標題樣式的類（pg-btn？）。 將 16rem 更改為適合您的值。

Answer 2

您可以簡單地：

display: flex;

在那個項目上。

 window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) { document.getElementById("bar").style.top = "90px"; } else { document.getElementById("bar").style.top = "150px"; } }

 .main-navigation-top { position: fixed; top: 0px; background: #fff; z-index: 999999; width: 100%; } .about-inner { position: relative; top: 90px; } .pg-content .container-fluid { padding: 60px; } .pg-bar .container-fluid { padding: 0px 60px; } .sub-nav { background: #FC453E; padding: 10px; } .pg-bar { position: fixed; top: -50px; width: 100%; display: block; transition: top 0.3s; z-index: 2; } .scrollbar-colored { scrollbar-color: #eee; } /* .pg-bar ul { list-style-type: none; display: flex; justify-content: space-between; padding-left: 0px; margin-bottom: 0px; overflow: auto; } */ .d-flex { display: flex; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .ml-3 { margin-left: 1rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .font-weight-bolder { font-weight: bolder !important; } .w-100 { width: 100% !important; } .sub-nav { display: block; width: auto; } .sub-nav dl { padding: 2px 0; display: flex; justify-content: space-between; } .sub-nav>dl { white-space: nowrap; margin-bottom: 0; overflow-x: auto; } .sub-nav dd { display: inline-block; margin-bottom: 0px; } .sub-nav a { display: inline-block; color: #fff; text-decoration: none; } .pg-bar li a { color: #fff; text-decoration: none; } .pg-content { padding: 100px 0px; } .pg-btn { padding: 8px 10px; border: none; background: #FC453E; color: #fff; border-radius: 2px; font-size: 20px; } .pg-content p { font-family: poppins; font-size: 14px; margin-bottom: 0px; } .pg-content h6 { color: #FC453E; font-size: 18px; } .home-content span { color: #FC453E; font-family: 'Poppins'; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #fff; background-color: #FC453E; } .nav-tabs .nav-link { color: #000; background-color: #eee; border-radius: 0px; padding: 8px 40px; } .col-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .tab-accrd h5 { font-size: 20px; } .p-0 { padding: 0px; } .nav-tabs { border: none; } .flug-i i { font-size: 30px; color: #FC453E; } .flug-i h4 { margin-bottom: 0px; text-transform: uppercase; margin-left: 10px; font-family: 'Poppins'; margin-top: 0px; font-size: 24px; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .flug-cont { margin-left: 40px; } .flug-cont i { color: #eab177; position: relative; top: 3px; } .die { padding: 20px; background: #eee; } .ter h5 { text-transform: uppercase; font-family: poppins; font-size: 20px; } .ter td { font-family: poppins; font-size: 14px; } .ter .table thead th { border-bottom: 2px solid #fff; } .ter .table td, .table th { border-top: 1px solid #fff; } .ter tbody tr { background: #eee; } .star { position: relative; background: #eee; padding: 15px 20px; } .star i { position: absolute; content: ''; top: -12px; color: #FC453E; font-size: 25px; left: 0px } .name { padding: 10px; background: #eeeeee; } .more { color: #FC453E; border: 1px solid #FC453E; background: transparent; padding: 5px 15px; text-transform: uppercase; font-weight: 500; font-size: 14px; } .resie i { position: relative; top: 3px; color: #FC453E; } html { scroll-behavior: smooth; } .nav-tabs>li>a { border-radius: 0px; } .nav-tabs>li>a { margin-right: 5px; } /* nav-tab */ .panel.with-nav-tabs .nav-tabs { border-bottom: none; } .panel.with-nav-tabs .nav-justified { margin-bottom: -1px; } .tab-content { padding: 0px; box-shadow: none; } .panel-body { padding: 0px; } .panel-group .panel+.panel { margin-top: 0px; } .panel-group .panel { border-bottom: 1px solid #fc453e; border-radius: 0px; cursor: pointer; } /********************************************************************/ /*** PANEL DEFAULT ***/ .with-nav-tabs.panel-default .nav-tabs>li>a, .with-nav-tabs.panel-default .nav-tabs>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li>a:focus { color: #777; } .with-nav-tabs.panel-default .nav-tabs>.open>a, .with-nav-tabs.panel-default .nav-tabs>.open>a:hover, .with-nav-tabs.panel-default .nav-tabs>.open>a:focus, .with-nav-tabs.panel-default .nav-tabs>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li>a:focus { color: #777; background-color: #ddd; border-color: transparent; } .with-nav-tabs.panel-default .nav-tabs>li.active>a, .with-nav-tabs.panel-default .nav-tabs>li.active>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.active>a:focus { color: #fff; background-color: #fc453e; border-color: #ddd; border-bottom-color: transparent; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu { background-color: #f5f5f5; border-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a { color: #777; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>li>a:focus { background-color: #ddd; } .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:hover, .with-nav-tabs.panel-default .nav-tabs>li.dropdown .dropdown-menu>.active>a:focus { color: #fff; background-color: #555; }

 <link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!---------- Main Header code starts here---------> <div class="container-fluid main-navigation-top" style="padding: 15px 60px 15px;"> <div class="row"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <img src="../img/menu-bar.png" width="78"> </button> <a class="navbar-brand" href="/index.html" style="display: flex;"><img src="../img/logo.png" width="32"> BCT-Touristik <span>Äthiopien Studienreisen</span></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Äthiopien Reisen <span class="caret"></span></a> <div class="clearfix"></div> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Afrikareisen <span class="caret"></span></a> <ul class="dropdown-menu" style="display: none;"> <div class="container"> <div class="col-lg-3"> <h3>Äthiopien</h3> </div> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kontakt &amp; Anmeldung <span class="caret"></span></a> </li> </ul> </div> </nav> </div> </div> <!---------- Top Bar navigation with 5 links to div code starts here---------> <section class="pg-bar" id="bar"> <div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-sm-12"> <div class="sub-nav"> <dl class="scrollbar-colored"> <dd><a href="#Home">Reise</a></dd> <dd><a href="#About">Reiseroute</a></dd> <dd><a href="#Service">Programm</a></dd> <dd><a href="#Carrer">Leistungen</a></dd> <dd><a href="#Contact">Termine & Preise</a></dd> </dl> </div> </div> </div> </div> </section> <!---------- content for 5 links to div code starts here---------> <section class="pg-content"> <!-- this line will also changed start here --> <div class="container-fluid"> <!--change end here --> <div class="row"> <div class="col-lg-8"> <div class="row"> <div class="col-lg-8"> <div class="home-content" id="Home"> <h1 class="text-uppercase">Äthiopien Intensiv</h1> <button class="mt-2 pg-btn">Studienreise Äthiopien</button> <button class="ml-2 mt-2 pg-btn">24 Tage</button> <p class="mt-3">Wenn Sie auch zu der Sorte Mensch gehören, die dem Massentourismus abgeschworen haben und lieber atypische Reiseziele besuchen, dann liegen Sie mit dieser Reise nach Äthiopien völlig richtig. Denn im Gegensatz zu planmäßig errichteten Touristenzentren erleben Sie hier ein Land in seiner ursprünglichen Form. Land und Leute werden Ihnen unverändert entgegen treten. Dieses Erlebnis ist einzigartig und wird sicherlich einen bleibenden Eindruck hinterlassen. </p> <p class="mt-3">Auf dieser gut durchdachten Rundreise wird ihnen das Land Äthiopien und die dort vorhandene Kultur sowie atemberaubende Landschaften näher gebracht. Erleben sie Natur und historische Bauten, die bisher vom Massentourismus verschont geblieben sind. Neue Abenteuer warten auf Sie!</p> <h6 class="text-uppercase mt-4 mb-3">HIGHLIGHTS DIESER REISE:</h6> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Lalibela</span>- Besuch der 11 Felsenkirchen </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Aksum</span>- Auf den Spuren von Indianer Jones zur "Bundeslade" </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Afrika Legenden </span>- Usprung des blauen Nil </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Mago Nationalpark </span>- Zu Besuch bei dem Mursi </p> </div> <h6 class="text-uppercase mt-4 mb-3">VORTEILE BEI DER BCT-TOURISTIK:</h6> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Über 25 Jahre Erfahrung als Afrika Spezialist</span> </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Deutscher Studienreiseleiter der BCT-Touristik</span> </p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Äthiopien Reisen in kleiner Gruppe</span></p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Alle Programmpukte, Transfer und Ausflüge im Preis inklusive</span></p> </div> <div class="resie d-flex"> <i class="fas fa-check-circle"></i> <p class="ml-2"><span>Umfangreiches Informationsmaterial bei allen Studienreisen</span></p> </div> </div> </div> <div class="col-lg-4"> <img src="image/bctontour.png" class="img img-responsive"> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="About">Reiseroute</button> </div> <div class="col-lg-12 mt-5"> <img src="image/route-aethiopien-mursi_24tage.jpg" class="img img-responsive"> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Service" >Programme</button> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Carrer">Leistungen</button> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>FLÜGE</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Hinflug Frankfurt – Addis Abeba</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Hotel</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Hotelunterbringung in 3* und 4* Hotels (entspricht Mittelklasse-Hotels in Deutschland): </p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">1 Übernachtung in Hawassa</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">2 Übernachtungen in Arba Minch</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">2 Übernachtungen in Turmi</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4 class="text-wrap">VERPFLEGUNG</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Abendunterhaltung in Lalibela mit Kaffee-Zeremonie</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Ethnologisches Museum Addis Abeba</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Nordäthiopien entdecken</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Blaue Nil Fälle</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Debreh Libanos Kloster</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>Süden Äthiopiens</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Mago Nationalpark</p> </div> </div> <div class="col-lg-6 mt-5"> <div class="flug-i d-flex"> <i class="fas fa-check-circle"></i> <h4>ABC Pluspunkte</h4> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Informationsmaterial</p> </div> <div class="flug-cont d-flex"> <i class="fal fa-angle-right"></i> <p class="ml-1">Auslandskrankenversicherung</p> </div> </div> <div class="col-lg-12 mt-5"> <button class="w-100 text-uppercase font-weight-bolder pg-btn" id="Contact">Termine & preise</button> </div> </section>