kalnder erneuert

This commit is contained in:
2020-12-10 18:30:51 +01:00
parent 6901b4231d
commit a7a0ba7c61
15 changed files with 342 additions and 68 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
inc/bg/baum.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
inc/bg/baum2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@@ -20,20 +20,20 @@ if ($tab == "") {$tab = "home";}
Mellys Weihnachts Kalender Mellys Weihnachts Kalender
</h1> </h1>
</header> </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"> <ul class="submenu">
<li><a href="?tab=impressum">Impressum</a></li> <li><a href="?tab=impressum">Impressum</a></li>
<li><a href="?tab=datenschutz" <?php if ($tab == "datenschutz")?>>Datenschutz</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> <li><a href="mailto:illg@illg.xyz?subject=HochzeitWeb" target="_blank">Kontak</a></li>
</ul> </ul> -->
</li> </li>
</ul> </ul>
</nav> --> </nav>
<script type="text/javascript"> <script type="text/javascript">
$(".mainMenu > a").mouseover(function(){ $(".mainMenu > a").mouseover(function(){

85
sass/_kalender.sass Normal file
View File

@@ -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

View File

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

6
sass/_tueren.sass Normal file
View File

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

View File

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

View File

@@ -160,8 +160,22 @@
}, 1000); }, 1000);
</script> </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>
<div class="KalenderTest">
<h3> Kalender Test Bereich zum Testen </h3>
</div>
<?php include ("kalender.php") ?>

151
tab/kalender.php Normal file
View File

@@ -0,0 +1,151 @@
<div class="kalender">
<div class="active" 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="active" 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>

15
tab/tür01.php Normal file
View File

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

15
tab/tür02.php Normal file
View File

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