Merge pull request 'kalender' (#9) from kalender into master

Reviewed-on: https://illg.xyz/gitea/JasTobi/WeihnachtsKalenderMelly/pulls/9

index.php

@@ -20,20 +20,20 @@ if ($tab == "") {$tab = "home";}
               Mellys Weihnachts Kalender
         </h1>
     </header>
-   <!--  <nav id="nav">
+  <!--  <nav>
-			<ul class="navUl">
+		<ul>
-				<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>
+			<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>
-				<li><a href="?tab=bilder" <?php if ($tab == "bilder")?>>Galerie</a></li>
+			<li><a href="?tab=bilder" <?php if ($tab == "bilder")?>>Galerie</a></li>
-				<li><a href="?tab=gästebuch" <?php if ($tab == "gästebuch")?>>Gästebuch</a></li>
+			<li><a href="?tab=gästebuch" <?php if ($tab == "gästebuch")?>>Gästebuch</a></li>
-				<li class="mainMenu"><a href="#">Über</a>
+			<!--	<li class="mainMenu"><a href="#">Über</a>
 					<ul class="submenu">
 						<li><a href="?tab=impressum">Impressum</a></li>	
 						<li><a href="?tab=datenschutz" <?php if ($tab == "datenschutz")?>>Datenschutz</a></li>
 						<li><a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">Kontak</a></li>
-					</ul>
+					</ul> -->
 				</li>
 		     </ul>
-		</nav> -->
+		</nav>
    
 		<script type="text/javascript">
 			$(".mainMenu > a").mouseover(function(){

sass/_home.sass

@@ -2,10 +2,10 @@ $timerPosition: -10px
 
 .TimeContainer
     margin-top: $navtop
-    color: darkred 
+    color: darkred
     font-size: 20px
     font-weight: bold
-    text-shadow: 1px 1px 1px darkgray 
+    text-shadow: 1px 1px 1px darkgray
 
 #clockdiv
 
@@ -27,13 +27,7 @@ $timerPosition: -10px
             padding-top: 40px
             display: inline-block
             margin-left: $timerPosition
-            
+
 .smalltext
     font-size: 10px
     margin-left: $timerPosition
-
-
-.KalenderTest
-    h3
-        text-decoration: underline
-        border: 3px solid red

sass/_kalender.sass

@@ -0,0 +1,85 @@
+$backgroundSize: 516px // Größe Bild im Kalender
+$bgPosition: -13px // Position Bg und Türen
+$kalenderWidth: 460px // breite des kalenders
+$marginLeftRight: 5px  // abstand linker und rechter rand
+$marginTop: 5px      
+$marginBetween: 5px     // abstand zwischen den Tueren
+$doorBorderSize: 1px    
+$doorWidth: ($kalenderWidth - 3.5*$marginLeftRight - 3*$marginBetween)/4
+
+/* ********************************
+
+.kalender
+  display: inline-block
+  position: relative
+  text-align: center
+  width: $kalenderWidth
+  height: #{6*($doorWidth+$doorBorderSize+$marginBetween)+2*$marginTop}
+  border: 1px solid black 
+  background: #fff url("../inc/bg/baum2.jpg") no-repeat
+  /*background-size: $backgroundWidth
+  background-size: $backgroundSize
+  background-position: $bgPosition 
+
+  div
+    position: absolute
+    border: $doorBorderSize solid darkred
+    width: $doorWidth
+    height: $doorWidth
+    overflow: hidden
+    background: #fff
+
+  h3
+    padding-top: 1.5rem
+    font-weight: bold
+    padding: 1rem
+
+  span
+    position: absolute
+    display: inline-block
+    top: 1rem
+    left: 1rem
+    font-size: 1rem
+    width: 1.2rem
+    height: 1.2rem
+    color: #FFF
+    background: #CD0000
+
+  .left
+    position: absolute
+    left: 0
+    top: 0
+    width: #{$doorWidth+50}
+    height: $doorWidth
+    display: block 
+    border: none
+    background: #fff url("../inc/bg/baum2.jpg") no-repeat
+    /*background-size: $backgroundWidth
+    background-size: $backgroundSize
+    margin-left: $bgPosition
+  a
+    &:hover .left, &:focus .left
+      left: #{-($doorWidth+60)}
+
+    .left
+      display: block
+      position: absolute 
+      transition: left 0.5s
+      
+  .inactive a
+    pointer-events: none
+    cursor: default
+
+  @for $row from 0 through 5
+    @for $col from 0 through 3
+      $leftCalc: $marginLeftRight+($doorWidth+$marginBetween+2*$doorBorderSize)*$col
+      $topCalc: $marginTop+($doorWidth+$marginBetween+2*$doorBorderSize)*$row
+      #ak#{$row*4+$col+1}
+        left: #{$leftCalc}
+        top: #{$topCalc}
+        .left
+          background-position: #{-($leftCalc+$doorBorderSize)} #{-($topCalc+$doorBorderSize)}
+  
+#hiddenTuer
+  margin: 1rem
+  max-height: auto

sass/_nav.sass

@@ -1,52 +1,49 @@
-ul
+$navInPadding: 0.5rem
-  list-style-type: none
-  margin: -2px auto
-  padding: 0
 
-  /*overflow: hidden;
+/* ******************
-  background-color: hsla(0, 0%, 100%, 0.8)
-  border: 2px solid darkred
-  display: inline-block
-  transition: all 60ms
-  box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
 
-  &.navUl
+nav
-    height: 33px
+  ul
+    list-style-type: none
+    margin: -0.13rem auto
+    padding: 0
+    background-color: hsla(0, 0%, 100%, 0.8)
+    border: 2px solid darkred
+    display: inline-block
+    transition: all 60ms
+    box-shadow: inset -2px -2px 10px lightblue, inset 2px 2px 10px lightblue
+    height: 2rem
 
-li
+  li
-  float: left
+    float: left
-  width: auto
+    width: auto
+    margin: 0px 0px
+    
+    &:first-child
+      padding-left: $navInPadding
 
-  /*height: 33px;
+    a
-  margin: 0px 0px
+      display: block
+      color: darkred
+      text-align: center
+      padding: 0.4rem $navInPadding $navInPadding 0
+      text-decoration: none
+      font-weight: bold
+      
+      &:active, &:hover, &:focus, &.active
+        /*background: none;
+        color: red
+        text-decoration: underline
 
-  /*border: 1px solid lightgrey;
+      &:active, &:hover, &:focus
-  border-radius: 0px
+        transition: 1s
+        transform: scale(1.1)
 
-  a
+  ul li ul li
-    display: block
+    display: inline-block
-    color: darkred
-    text-align: center
-    padding: 7px 16px
-    text-decoration: none
-    margin: 1px 0 4px
-    font-weight: bold
 
-nav > ul > li
+  > ul > li > ul > li
-  width: 100px
+    margin: middle
-
-li a
-  &:active, &:hover, &:focus, &.active
-    background: none
-    color: red
-    text-decoration: underline
-
-  &:active, &:hover, &:focus
-    transition: 1s
-    transform: scale(1.1)
-
-ul li ul li
-  display: inline-block
 
 .submenu
   visibility: hidden
@@ -55,20 +52,11 @@ ul li ul li
   margin-left: -10px
   background-color: rgb(255, 255, 255)
 
-  li
+  li, a
-    a
-      display: block
-      float: none
-      border-bottom: 1px solid goldenrod
-      margin: 0 0 0 0
-
     display: block
     float: none
     border-bottom: 1px solid goldenrod
     margin: 0 0 0 0
 
 .submenuActive
-  visibility: visible
+  visibility: visible
-
-nav > ul > li > ul > li
-  margin: middle

sass/_tueren.sass

@@ -0,0 +1,6 @@
+.tueren
+  margin-top: $navtop
+    
+  h3
+    color: red
+    text-decoration: underline

sass/main.sass

@@ -1,6 +1,6 @@
 $navtop: 20px
 $txttop: 5px
-@import 'nav', 'home'
+@import 'nav', 'home', 'kalender', 'tueren'
 
 /* **************************************
 

tab/datenschutz.php

@@ -1,6 +1,6 @@
 <style>
    #teet {
-    display: inline-block; 
+    display: inline-block;
     color: black;
     font-size: 0.7rem;
     font-weight: normal;
@@ -8,7 +8,7 @@
     border: 0px solid red;
     max-width: 700px;
    }
-   
+
    span {
     text-decoration: underline;
     font-weight: bold;
@@ -17,17 +17,17 @@
     color: red;
     text-decoration: underline;
    }
-   
+
 </style>
 
 <h3 id="titel">Datenschutz Gesetzt</h3>
 
 <div id="teet">
-        
+
 <p>Diese Seite wird von mir als Einzelperson betrieben - ohne Gewinnerzielungsabsicht.</p>
 
 <p><span>Verantwortlich für die Datenerfassung</span><br><br>
-Jason Illg <br>
+Jason Lüthje <br>
 Bärlauchstraße 7 <br>
 22850 Norderstedt <br><br>
 
@@ -78,4 +78,4 @@ In den erstellten Gästebüchern haben Sie die Möglichkeit einen Eintrag zu hin
 <p></p>
 <p> Stand: 28.09.20 </p>
 
-</div> 
+</div>

tab/home.php

@@ -160,8 +160,22 @@
     }, 1000);
     </script>
 
-<div class="KalenderTest">
+<div style="
-
+display:inline-block;
-    <h3> Kalender Test Bereich zum Testen </h3>
+font-weight:bold;
-
+color:darkred;
+margin-top:-3rem;
+padding: 0 1.5rem 0 1.5rem;
+text-decoration:underline;
+background-color:#fff;
+background: linear-gradient(to bottom, #fefffd, #e7e9ea 50%, #e1e1e1);
+border: 2px solid #C21514;
+">
+<h2>Bis der Kalender Startet !!!</h2>
 </div>
+
+<div class="">
+<h3></h3>
+</div>
+
+<?php include ("kalender.php") ?>

tab/impressum.php

@@ -1,6 +1,6 @@
 <style>
    #teet {
-    display: inline-block; 
+    display: inline-block;
     color: black;
     font-size: 0.7rem;
     font-weight: normal;
@@ -8,7 +8,7 @@
     border: 0px solid red;
     max-width: 700px;
    }
-   
+
    span {
     text-decoration: underline;
     font-weight: bold;
@@ -17,83 +17,83 @@
     color: red;
     text-decoration: underline;
    }
-   
+
 </style>
 
 <h3 id="titel">Impressum</h3>
 
 <div id="teet">
 
-<p>Jason Illg</p> <p>Bärlauchstraße 7<br> 
+<p>Jason Lüthje</p> <p>Bärlauchstraße 7<br>
-D-22850 Norderstedt</p> <p>E-Mail: <a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">illg@illg.xyz</a></p> 
+D-22850 Norderstedt</p> <p>E-Mail: <a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">illg@illg.xyz</a></p>
 <h2>Disclaimer – rechtliche Hinweise</h2>
 
 <p><span>§ 1 Warnhinweis zu Inhalten</span></p>
 
-<p>Die kostenlosen und frei zugänglichen Inhalte dieser Webseite wurden mit größtmöglicher 
+<p>Die kostenlosen und frei zugänglichen Inhalte dieser Webseite wurden mit größtmöglicher
-Sorgfalt erstellt. Der Anbieter dieser Webseite 
+Sorgfalt erstellt. Der Anbieter dieser Webseite
-übernimmt jedoch keine Gewähr für die 
+übernimmt jedoch keine Gewähr für die
-Richtigkeit und Aktualität der bereitgestellten 
+Richtigkeit und Aktualität der bereitgestellten
-kostenlosen und frei zugänglichen 
+kostenlosen und frei zugänglichen
-journalistischen Ratgeber und Nachrichten. 
+journalistischen Ratgeber und Nachrichten.
-Namentlich gekennzeichnete Beiträge geben die 
+Namentlich gekennzeichnete Beiträge geben die
-Meinung des jeweiligen Autors und nicht immer 
+Meinung des jeweiligen Autors und nicht immer
-die Meinung des Anbieters wieder. Allein durch 
+die Meinung des Anbieters wieder. Allein durch
-den Aufruf der kostenlosen und frei 
+den Aufruf der kostenlosen und frei
-zugänglichen Inhalte kommt keinerlei 
+zugänglichen Inhalte kommt keinerlei
-Vertragsverhältnis zwischen dem Nutzer und dem 
+Vertragsverhältnis zwischen dem Nutzer und dem
-Anbieter zustande, insoweit fehlt es am 
+Anbieter zustande, insoweit fehlt es am
-Rechtsbindungswillen des Anbieters.</p> <p><span>§ 2 
+Rechtsbindungswillen des Anbieters.</p> <p><span>§ 2
-Externe Links</span></p> <p>Diese Website enthält 
+Externe Links</span></p> <p>Diese Website enthält
-Verknüpfungen zu Websites Dritter ("externe 
+Verknüpfungen zu Websites Dritter ("externe
-Links"). Diese Websites unterliegen der Haftung 
+Links"). Diese Websites unterliegen der Haftung
-der jeweiligen Betreiber. Der Anbieter hat bei 
+der jeweiligen Betreiber. Der Anbieter hat bei
-der erstmaligen Verknüpfung der externen Links 
+der erstmaligen Verknüpfung der externen Links
-die fremden Inhalte daraufhin überprüft, ob 
+die fremden Inhalte daraufhin überprüft, ob
-etwaige Rechtsverstöße bestehen. Zu dem 
+etwaige Rechtsverstöße bestehen. Zu dem
-Zeitpunkt waren keine Rechtsverstöße 
+Zeitpunkt waren keine Rechtsverstöße
-ersichtlich. Der Anbieter hat keinerlei 
+ersichtlich. Der Anbieter hat keinerlei
-Einfluss auf die aktuelle und zukünftige 
+Einfluss auf die aktuelle und zukünftige
-Gestaltung und auf die Inhalte der verknüpften 
+Gestaltung und auf die Inhalte der verknüpften
-Seiten. Das Setzen von externen Links bedeutet 
+Seiten. Das Setzen von externen Links bedeutet
-nicht, dass sich der Anbieter die hinter dem 
+nicht, dass sich der Anbieter die hinter dem
-Verweis oder Link liegenden Inhalte zu Eigen 
+Verweis oder Link liegenden Inhalte zu Eigen
-macht. Eine ständige Kontrolle der externen 
+macht. Eine ständige Kontrolle der externen
-Links ist für den Anbieter ohne konkrete 
+Links ist für den Anbieter ohne konkrete
-Hinweise auf Rechtsverstöße nicht zumutbar. Bei 
+Hinweise auf Rechtsverstöße nicht zumutbar. Bei
-Kenntnis von Rechtsverstößen werden jedoch 
+Kenntnis von Rechtsverstößen werden jedoch
-derartige externe Links unverzüglich 
+derartige externe Links unverzüglich
-gelöscht.</p> <p><span>§ 3 Urheber- und 
+gelöscht.</p> <p><span>§ 3 Urheber- und
-Leistungsschutzrechte</span></p> <p>Die auf dieser 
+Leistungsschutzrechte</span></p> <p>Die auf dieser
-Website veröffentlichten Inhalte unterliegen 
+Website veröffentlichten Inhalte unterliegen
-dem deutschen Urheber- und 
+dem deutschen Urheber- und
-Leistungsschutzrecht. Jede vom deutschen 
+Leistungsschutzrecht. Jede vom deutschen
-Urheber- und Leistungsschutzrecht nicht 
+Urheber- und Leistungsschutzrecht nicht
-zugelassene Verwertung bedarf der vorherigen 
+zugelassene Verwertung bedarf der vorherigen
-schriftlichen Zustimmung des Anbieters oder 
+schriftlichen Zustimmung des Anbieters oder
-jeweiligen Rechteinhabers. Dies gilt 
+jeweiligen Rechteinhabers. Dies gilt
-insbesondere für Vervielfältigung, Bearbeitung, 
+insbesondere für Vervielfältigung, Bearbeitung,
-Übersetzung, Einspeicherung, Verarbeitung bzw. 
+Übersetzung, Einspeicherung, Verarbeitung bzw.
-Wiedergabe von Inhalten in Datenbanken oder 
+Wiedergabe von Inhalten in Datenbanken oder
-anderen elektronischen Medien und Systemen. 
+anderen elektronischen Medien und Systemen.
-Inhalte und Rechte Dritter sind dabei als 
+Inhalte und Rechte Dritter sind dabei als
-solche gekennzeichnet. Die unerlaubte 
+solche gekennzeichnet. Die unerlaubte
-Vervielfältigung oder Weitergabe einzelner 
+Vervielfältigung oder Weitergabe einzelner
-Inhalte oder kompletter Seiten ist nicht 
+Inhalte oder kompletter Seiten ist nicht
-gestattet und strafbar. Lediglich die 
+gestattet und strafbar. Lediglich die
-Herstellung von Kopien und Downloads für den 
+Herstellung von Kopien und Downloads für den
-persönlichen, privaten und nicht kommerziellen 
+persönlichen, privaten und nicht kommerziellen
-Gebrauch ist erlaubt.</p> <p>Die Darstellung 
+Gebrauch ist erlaubt.</p> <p>Die Darstellung
-dieser Website in fremden Frames ist nur mit 
+dieser Website in fremden Frames ist nur mit
-schriftlicher Erlaubnis zulässig.</p> <p><span>§ 4 
+schriftlicher Erlaubnis zulässig.</p> <p><span>§ 4
-Besondere Nutzungsbedingungen</span></p> <p>Soweit 
+Besondere Nutzungsbedingungen</span></p> <p>Soweit
-besondere Bedingungen für einzelne Nutzungen 
+besondere Bedingungen für einzelne Nutzungen
-dieser Website von den vorgenannten Paragraphen 
+dieser Website von den vorgenannten Paragraphen
-abweichen, wird an entsprechender Stelle 
+abweichen, wird an entsprechender Stelle
-ausdrücklich darauf hingewiesen. In diesem 
+ausdrücklich darauf hingewiesen. In diesem
-Falle gelten im jeweiligen Einzelfall die 
+Falle gelten im jeweiligen Einzelfall die
 besonderen Nutzungsbedingungen.</p>
 
 <p> Stand: 28.09.20 </p>
 
-</div> 
+</div>

tab/kalender.php

@@ -0,0 +1,151 @@
+<div class="kalender">
+
+	<div class="inactive" id="ak1">
+		<a href="?tab=tür01" <?php if ($tab == "tür01")?>>
+		<h3 id="hiddenTuer">Tür 01</h3>
+    <div class="left"><span>1</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak2">
+		<a href="?tab=tür02" <?php if ($tab == "tür02")?>>
+		<h3 id="hiddenTuer">Tür 02</h3>
+    <div class="left"><span>2</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak3">
+		<a href="?tab=tür03" <?php if ($tab == "tür03")?>>
+		<h3 id="hiddenTuer">Tür 03</h3>
+    <div class="left"><span>3</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak4">
+		<a href="?tab=tür04" <?php if ($tab == "tür04")?>>
+		<h3 id="hiddenTuer">Tür 04</h3>
+    <div class="left"><span>4</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak5">
+		<a href="?tab=tür05" <?php if ($tab == "tür05")?>>
+		<h3 id="hiddenTuer">Tür 05</h3>
+    <div class="left"><span>5</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak6">
+		<a href="?tab=tür06" <?php if ($tab == "tür06")?>>
+		<h3 id="hiddenTuer">Tür 06</h3>
+    <div class="left"><span>6</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak7">
+		<a href="?tab=tür07" <?php if ($tab == "tür07")?>>
+		<h3 id="hiddenTuer">Tür 07</h3>
+    <div class="left"><span>7</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak8">
+		<a href="?tab=tür08" <?php if ($tab == "tür08")?>>
+		<h3 id="hiddenTuer">Tür 08</h3>
+    <div class="left"><span>8</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak9">
+		<a href="?tab=tür09" <?php if ($tab == "tür09")?>>
+		<h3 id="hiddenTuer">Tür 09</h3>
+    <div class="left"><span>9</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak10">
+		<a href="?tab=tür10" <?php if ($tab == "tür10")?>>
+		<h3 id="hiddenTuer">Tür 10</h3>
+    <div class="left"><span>10</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak11">
+		<a href="?tab=tür11" <?php if ($tab == "tür11")?>>
+		<h3 id="hiddenTuer">Tür 11</h3>
+    <div class="left"><span>11</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak12">
+		<a href="?tab=tür12" <?php if ($tab == "tür12")?>>
+		<h3 id="hiddenTuer">Tür 12</h3>
+    <div class="left"><span>12</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak13">
+		<a href="?tab=tür13" <?php if ($tab == "tür13")?>>
+		<h3 id="hiddenTuer">Tür 13</h3>
+    <div class="left"><span>13</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak14">
+		<a href="?tab=tür14" <?php if ($tab == "tür14")?>>
+		<h3 id="hiddenTuer">Tür 14</h3>
+    <div class="left"><span>14</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak15">
+		<a href="?tab=tür15" <?php if ($tab == "tür15")?>>
+		<h3 id="hiddenTuer">Tür 15</h3>
+    <div class="left"><span>15</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak16">
+		<a href="?tab=tür16" <?php if ($tab == "tür16")?>>
+		<h3 id="hiddenTuer">Tür 16</h3>
+    <div class="left"><span>16</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak17">
+		<a href="?tab=tür17" <?php if ($tab == "tür17")?>>
+		<h3 id="hiddenTuer">Tür 17</h3>
+    <div class="left"><span>17</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak18">
+		<a href="?tab=tür18" <?php if ($tab == "tür18")?>>
+		<h3 id="hiddenTuer">Tür 18</h3>
+    <div class="left"><span>18</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak19">
+		<a href="?tab=tür19" <?php if ($tab == "tür19")?>>
+		<h3 id="hiddenTuer">Tür 19</h3>
+    <div class="left"><span>19</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak20">
+		<a href="?tab=tür20" <?php if ($tab == "tür20")?>>
+		<h3 id="hiddenTuer">Tür 20</h3>
+    <div class="left"><span>20</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak21">
+		<a href="?tab=tür21" <?php if ($tab == "tür21")?>>
+		<h3 id="hiddenTuer">Tür 21</h3>
+    <div class="left"><span>21</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak22">
+		<a href="?tab=tür22" <?php if ($tab == "tür22")?>>
+		<h3 id="hiddenTuer">Tür 22</h3>
+    <div class="left"><span>22</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak23">
+		<a href="?tab=tür23" <?php if ($tab == "tür23")?>>
+		<h3 id="hiddenTuer">Tür 23</h3>
+    <div class="left"><span>23</span></div>
+		</a>
+	</div>
+	<div class="inactive" id="ak24">
+		<a href="?tab=tür24" <?php if ($tab == "tür24")?>>
+		<h3 id="hiddenTuer">Tür 24</h3>
+    <div class="left"><span>24</span></div>
+		</a>
+	</div>
+
+
+
+
+</div>

tab/tür01.php

@@ -0,0 +1,15 @@
+<div class="tueren">
+    
+    <h3>Tür 1</h3>
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+</div>

tab/tür02.php

@@ -0,0 +1,15 @@
+<div class="tueren">
+
+    <h3>Tür 2</h3>
+
+
+
+
+
+
+
+
+
+
+
+</div>