Re: Textarea
Verfasst: Sa 22. Okt 2022, 14:30
Okay, dann verwuche ich mir den Beitrag noch einmal genau durchzulesen und hoffe, dass ich es dann hinbekomme! Ohje...
Webseitenbau - Designvorlagen - Grafik Shop - Hilfe Lexikon und vieles mehr
https://homepagehelfer.org:443/
Code: Alles auswählen
<div class="sidebar2"> <div class="link-tipp">
<h3>Link Tipp</h3></div>
<div class="link-bottom"></div>
<ul class="topnav2">
<li class="icon">
<a href="javascript:void(0);" style="font-size:1.0em; color:#D49C07; text-align:center;center;border-bottom: 2px ridge #387B8B;padding-top:15px;padding-bottom:15px;" onclick="myFunction1()"><strong>Bastelarbeiten</strong></a>
</li>
<li>
<a href="https://www.bastelecke.karins-poserbilder.de/gebastelt/uebersicht_bilder.php">Bilder</a>
</li>
<li>
<a href="https://www.bastelecke.karins-poserbilder.de/gebastelt/uebersicht_kalender.php">Kalender</a>
</li>
<li>
<a href="https://www.bastelecke.karins-poserbilder.de/gebastelt/uebersicht_uhren.php">Uhren</a>
</li>
</ul>
<script>
function myFunction1() {
document.getElementsByClassName("topnav2")[0].classList.toggle("responsive");
}
</script>
<ul class="topnav3">
<li class="icon">
<a href="javascript:void(0);" style="font-size:1.0em; color:#D49C07; text-align:center;border-bottom: 2px ridge #387B8B;border-top: 2px ridge #387B8B;padding-top:20px;padding-bottom:20px;" onclick="myFunction2()"><strong> Gästebuchbilder</strong></a>
</li>
<!-- Untermenü 4-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub4')">
<span style="color:#98795A;"> Feiertage
</span>
</div>
<span class="submenu" id="sub4">
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/erste_mai/erstemai_y.php">1. Mai</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/frauentag/frauentag_y.php">Frauentag</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/halloween/halloween_q.php">Happy Halloween</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/karneval/karneval_x.php">Karneval</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/muttertag/muttertag_w.php">Muttertag</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/ostern/ostern_u.php">Ostern</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/pfingsten/pfingsten_x.php">Pfingsten</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/silvester/silvester_w.php">Silvester</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/valentin/valentin_w.php">Valentinstag</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/vatertag/vatertag_z.php">Vatertag / Himmelfahrt</a>
<a href="https://www.gb4you.karins-poserbilder.de/feiertage/uebersichtweihnachtszeit.php">Weihnachten / Advent</a>
</span>
</div>
</li>
<!-- Ende Untermenü 4 -->
<!-- Untermenü 5-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub5')">
<span style="color:#98795A;">Jahreszeiten
</span>
</div>
<span class="submenu" id="sub5">
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/fruehling/fruehling_v.php">Frühling</a>
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/sommer/sommer_r.php">Sommer</a>
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/herbst/herbst_s.php">Herbst</a>
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/winter/winter_w.php">Winter</a>
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/regenwetter/regenwetter_x.php">Regenwetter</a>
<a href="https://www.gb4you.karins-poserbilder.de/jahreszeiten/zeitumstellung/umstellen_x.php">Zeitumstellung</a>
</span>
</div>
</li>
<!-- Ende Untermenü5 -->
<li>
<a href="https://www.gb4you.karins-poserbilder.de/schoener_tag/uebersichtschoener_tag.php" >Schöner Tag</a>
</li>
<!-- Untermenü 6-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub6')">
<span style="color:#98795A;">Tageszeiten
</span>
</div>
<span class="submenu" id="sub6">
<a href="https://www.gb4you.karins-poserbilder.de/tageszeiten/guten_morgen/morgen_w.php">Guten Morgen</a>
<a href="https://www.gb4you.karins-poserbilder.de/tageszeiten/guten_abend/abend_m.php">Guten Abend</a>
<a href="https://www.gb4you.karins-poserbilder.de/tageszeiten/gute_nacht/nacht_s.php">Gute Nacht</a>
</span>
</div>
</li>
<!-- Ende Untermenü6 -->
<!-- Untermenü 7-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub7')">
<span style="color:#98795A;"> Verschiedenes
</span>
</div>
<span class="submenu" id="sub7">
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/freunde/freundschaft_z.php" >Freundschaft</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/geburtstag/geburtstag_v.php" >Geburtstag</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/gute_besserung/gute_besserung_y.php" >Gute Besserung</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/waechter/waechter_z.php" >HP-Wächter</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/liebe_gruesse/liebe_gruesse_u.php" >Liebe Grüße</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/schule/einschulung_x.php" >Mein 1. Schultag</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/schutzengel/schutzengel_z.php" >Schutzengel</a>
<a href="https://www.gb4you.karins-poserbilder.de/verschiedenes/urlaub/urlaub_y.php" >Urlaub</a>
</span>
</div>
</li>
<!-- Ende Untermenü 7 -->
<!-- Untermenü8-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub8')">
<span style="color:#98795A;">Wochenende
</span>
</div>
<span class="submenu" id="sub8">
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/allgemein/allgemein_w.php">Wochenende -Allgemein</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/fruehling/fruehling_p.php">Wochenende -Frühling</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/sommer/sommer_p.php">Wochenenede -Sommer</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/herbst/herbst_t.php">Wochenende -Herbst</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/regen/regen_z.php">Wochenende -Regenwetter</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenende/winter/winter_u.php">Wochenende -Winter</a>
</span>
</div>
</li>
<!-- Ende Untermenü 8 -->
<!-- Untermenü 9-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub9')">
<span style="color:#98795A;"> Wochenstart
</span>
</div>
<span class="submenu" id="sub9">
<a href="https://www.gb4you.karins-poserbilder.de/wochenstart/allgemein/allgemein_x.php">Wochenstart -Allgemein</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenstart/fruehling/fruehling_u.php">Wochenstart -Frühling</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenstart/sommer/sommer_u.php">Wochenstart -Sommer</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenstart/herbst/herbst_t.php">Wochenstart -Herbst</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochenstart/winter/winter_w.php">Wochenstart -Winter</a>
</span>
</div>
</li>
<!-- Ende Untermenü 9 -->
<!-- Untermenü 10-->
<li>
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub10')">
<span style="color:#98795A;">Wochentage
</span>
</div>
<span class="submenu" id="sub10">
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtmontag.php">Montag</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtdienstag.php">Dienstag</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtmittwoch.php">Mittwoch</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtdonnerstag.php">Donnerstag</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtfreitag.php">Freitag</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtsamstag.php">Samstag</a>
<a href="https://www.gb4you.karins-poserbilder.de/wochentage/uebersichtsonntag.php">Sonntag</a>
</span>
</div>
</li>
</ul>
<!-- Ende Untermenü10 -->
<script>
function myFunction2() {
document.getElementsByClassName("topnav3")[0].classList.toggle("responsive");
}
</script>
<center>
<img src="https://www.karins-poserbilder.de/design/frosch.png" style="border: 0px;" alt="Frosch">
</center>
<ul class="topnav4">
<li class="icon">
<a href="javascript:void(0);" style="font-size:1.0em; color:#D49C07; text-align:center;center;border-bottom: 2px ridge #387B8B;border-top: 2px ridge #387B8B;padding-top:20px;padding-bottom:20px;" onclick="myFunction3()"><strong>Sonstiges</strong></a>
</li>
<li>
<a href='../../../../info/adopiert.php'>Frederike adoptiert</a>
</li>
<li>
<a href='../../../../info/ue-bilder.php'>Ü-Bilder von euch</a>
</li>
<li>
<a href='../../../../info/auf_reisen.php'>Molly geht auf Reisen</a>
</li>
<li>
<a href='https://www.karins-poserbilder.de/info/banner.php'>Mein Banner</a>
</li>
<li>
<a href='https://www.karins-poserbilder.de/info/links.php'>Links von euch</a>
</li>
<li>
<a href='../../../../info/dabei.php'>Plauderei</a>
</li>
<li>
<a href='../../../../info/anderehps.php'>Meine anderen Hp´s</a>
</li>
<li>
<a href='../../../../info/nuetzliches_fuer_euch.php'>Nützliches für euch!</a>
</li>
</ul>
<script>
function myFunction3() {
document.getElementsByClassName("topnav4")[0].classList.toggle("responsive");
}
Code: Alles auswählen
ul.topnav {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav li {float: none}
ul.topnav li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav */
ul.topnav li a:hover {background-color:transparent;}
ul.topnav li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: block;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* untermenü*/
@media screen and (max-width:680px) {
ul.untermenu li:not(:first-child) {display: none;}
ul.untermenu li{
float: right;
display: block;
}
}
@media screen and (max-width:680px) {
ul.untermenu .responsive {position: relative;}
ul.untermenu.responsive li{
position: absolute;
right: 0;
top: 0;
}
ul.untermenu.responsive li {
float: none;
display: block;
}
ul.untermenu.responsive li a {
display: block;
text-align: left;
}
}
/* Untermenü Überschrift */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;
}
.submenu {
margin-bottom: 0;
}
.submenu a {
color: #AFB0C2;
text-decoration: none;
border-bottom: 1px dotted #3C6539;
padding:3px 3px 3px 3px;
}
.submenu a:hover {
color: #3C6539;
background-color: #FFECEC;
text-decoration: none;
border-bottom: 1px solid #3C6539;
}
/* Menu link */
a.menulink:link, a.menulink:visited, a.menulink:active {
list-style-type: none;
display: block;
width: 100%;
font-size: 1.0em;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #3C6539;
background-color: transparent;
border-bottom: 1px dotted #3C6539;
}
a.menulink:hover {
color: #0000FF;
background-color: transparent;
}
/*navi2*/
ul.topnav2 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav2 li {float: none}
ul.topnav2 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav2 */
ul.topnav2 li a:hover {background-color:transparent;}
ul.topnav2 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav2 li:not(:first-child) {display: none;}
ul.topnav2 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav2.responsive {position: relative;}
ul.topnav2.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav2.responsive li {
float: none;
display: block;
}
ul.topnav2.responsive li a {
display: block;
text-align: left;
}
}
/*navi3*/
ul.topnav3 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav3 li {float: none}
ul.topnav3 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav */
ul.topnav3 li a:hover {background-color:transparent;}
ul.topnav3 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav3 li:not(:first-child) {display: none;}
ul.topnav3 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav3.responsive {position: relative;}
ul.topnav3.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav3.responsive li {
float: none;
display: block;
}
ul.topnav3.responsive li a {
display: block;
text-align: left;
}
}
/*navi4*/
ul.topnav4 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav4 li {float: none}
ul.topnav4 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav4 */
ul.topnav4 li a:hover {background-color:transparent;}
ul.topnav4 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav4 li:not(:first-child) {display: none;}
ul.topnav4 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav4.responsive {position: relative;}
ul.topnav4.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav4.responsive li {
float: none;
display: block;
}
ul.topnav4.responsive li a {
display: block;
text-align: left;
}
}
/* untermenü*/
@media screen and (max-width:680px) {
ul.untermenu li:not(:first-child) {display: none;}
ul.untermenu li{
float: right;
display: block;
}
}
@media screen and (max-width:680px) {
ul.untermenu .responsive {position: relative;}
ul.untermenu.responsive li{
position: absolute;
right: 0;
top: 0;
}
ul.untermenu.responsive li {
float: none;
display: block;
}
ul.untermenu.responsive li a {
display: block;
text-align: left;
}
}
/* Untermenü Überschrift */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;
}
.submenu {
margin-bottom: 0;
}
.submenu a {
color: #AFB0C2;
text-decoration: none;
border-bottom: 1px dotted #3C6539;
padding:3px 3px 3px 3px;
}
.submenu a:hover {
color: #3C6539;
background-color: #FFECEC;
text-decoration: none;
border-bottom: 1px solid #3C6539;
}
Ja dieser Code muss in die Datei für die Navigation also in deinem Falle hast du sie ja styles.css genannt. Also deinen Code in der styles.css ersetzen gegen den Code den ich hier gepostet habe.Bei deinem zweiten Code Hier die geänderte bzw. erweiterte CSS-Datei für das Menü: Bin ich nicht ganz hintergekommen, muss das nicht eigentlich in die Navi.css? Die habe ich hier gar nicht
Code: Alles auswählen
/*CSS Format by http://HomepageHelfer.net*/
@font-face {
font-family: 'gabrielle';
src: url('gabrielle-webfont.eot');
src: url('gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
url('gabrielle-webfont.woff2') format('woff2'),
url('gabrielle-webfont.woff') format('woff'),
url('gabrielle-webfont.ttf') format('truetype'),
url('gabrielle-webfont.svg#gabrielleregular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #E0E4E3;
font-family: gabrielle;
font-size: 2.0em;
padding: 6px;
max-width: 100%;
color: #387B8B;
text-align: center;
background-image: url(bg80.png);
background-repeat: repeat;
background-position: 0 0;
background-attachment: fixed;
margin: 0;
padding: 30px;
}
ul, ol, dl {
margin: 0;
}
h1 {
font-size: 1.2em;
letter-spacing: 0.1em;
color: #D49C07;
text-align: center;
margin-bottom: 15px;
text-shadow: 1px 1px black;
}
h2 {
font-size: 1.0em;
letter-spacing: 0.11em;
color: #D49C07;
text-align: center;
margin-bottom: 15px;
text-decoration: none;
}
h3 {
font-size: 1.0em;
font-weight: bold;
color: #D49C07;
margin-bottom: 15px;
}
img {
border: none;
max-width: 100%;
height: auto;
}
a:link {
color: #C73535;
text-decoration: none;
font-size: 29px;
}
a:visited {
color: #C73535;
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
color: #C73535;
}
.goog-te-gadget-simple .goog-te-menu-value span {
text-decoration: none;
font-size: 15px;
}
textarea {
color: #387B8B;
font-size: 12px;
font-family: verdana;
background-color: #E0E4E3;
border: solid 1px #387B8B;
}
#tabelle
* {
box-sizing:border-box;
}
table {
width:70%;
}
table, td, tr, th {
border:0px solid black;
border-collapse: collapse;
text-align: center;
}
td, tr, th {
padding:1em;
}
th {
background:#eee;
font-weight: bold;
}
.text1 {
width: 100%;
}
@media screen and (max-width:700px) {
table, tr, td {
padding:0;
border:0px solid black;
}
table {
border:none;
}
thead {
display:none;
}
tr {
float: left;
width: 100%;
margin-bottom: 1em;
}
td {
float: left;
width: 100%;
padding:1em;
}
td::before {
content:attr(data-label);
word-wrap: break-word;
background: #660000;
border-right:0px solid black;
font-weight: bold;
margin:-1em 1em -1em -1em;
}
}
img {
max-width: 100%;
height: auto;
border: 0;
}
a img {
border: none;
}
p {
margin-top: 1.0em;
margin-bottom: 1.0em;
}
/* Design */
.container {
width: 100%;
max-width: 1900px;
background: #E0E4E3;
border: 1px ridge #387B8B;
border-radius: 8px;
background-image: url(bg80a.png);
background-repeat: repeat;
margin: 0 auto;
-webkit-box-shadow: 0 0 2px 2px #387B8B;
box-shadow: 0 0 2px 2px #387B8B;
}
.header {
width: 100%;
max-height: 100%;
}
.inhalt {
width: 100%;
background-image: url(bg100.png);
background-repeat: repeat;
border-top: 2px ridge #387B8B;
}
.sidebar1 {
float: left;
width: 15%;
text-align: center;
font-size: 0.9em;
margin-bottom: 2.5%;
}
.box-left {
float: left;
width: 100%;
text-align: center;
border-bottom: 2px ridge #387B8B;
}
.content {
width: 68.5%;
min-height: 900px;
float: left;
border-left: 2px ridge #387B8B;
border-right: 2px ridge #387B8B;
}
.sidebar2 {
float: right;
text-align: center;
width: 16%;
margin-bottom: 2.5%;
}
.box-right {
width: 100%;
margin-bottom: 10px;
border-top: 2px ridge #387B8B;
border-bottom: 2px ridge #387B8B;
font-size:1.0em;
color:#8EB407;
text-align:center;
}
.link-tipp {
font-size:1.0em;
color:#8EB407;
text-align:center;
}
.link-bottom {
border-top: 2px ridge #387B8B;
font-size:1.0em;
color:#8EB407;
text-align:center;
}
border-bottom: 2px ridge #387B8B;
.balken-werbung {
float: left;
width: 98%;
border-top: 2px ridge #387B8B;
margin-top: 2%;
text-align: center;
padding: 1%;
}
.cc_container {
background: #E0E4E3 !important;
/* Hintergrundfarbe des gesamten Bereichs */
color: #387B8B !important;
/* Schriftfarbe des gesamten Bereichs */
}
.footer {
position: relative;
min-height: 30px;
line-height: 30px;
text-align: center;
font-weight: normal;
clear: both;
border-top: 2px ridge #387B8B;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
.copyright {
font-size: 18px;
letter-spacing: 2px;
font-family: Impact;
font-style: normal;
color: #C73535;
text-align: center;
}
.copyright a {
font-size: 18px;
font-family: Impact;
font-style: normal;
color: #C73535;
text-decoration: none;
}
.copyright a:hover {
color: #C73535;
}
/* swing-bilder*/
.swing {
-webkit-animation: swinging 10s ease-in-out 0s infinite;
-moz-animation: swinging 10s ease-in-out 0s infinite;
animation: swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
@-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(0);
}
5% {
-webkit-transform: rotate(10deg);
}
10% {
-webkit-transform: rotate(-9deg);
}
15% {
-webkit-transform: rotate(8deg);
}
20% {
-webkit-transform: rotate(-7deg);
}
25% {
-webkit-transform: rotate(6deg);
}
30% {
-webkit-transform: rotate(-5deg);
}
35% {
-webkit-transform: rotate(4deg);
}
40% {
-webkit-transform: rotate(-3deg);
}
45% {
-webkit-transform: rotate(2deg);
}
50% {
-webkit-transform: rotate(0);
}
/* Come to rest at 50%. The rest is just stillness */
100% {
-webkit-transform: rotate(0);
}
}
@-moz-keyframes swinging {
0% {
-moz-transform: rotate(0);
}
5% {
-moz-transform: rotate(10deg);
}
10% {
-moz-transform: rotate(-9deg);
}
15% {
-moz-transform: rotate(8deg);
}
20% {
-moz-transform: rotate(-7deg);
}
25% {
-moz-transform: rotate(6deg);
}
30% {
-moz-transform: rotate(-5deg);
}
35% {
-moz-transform: rotate(4deg);
}
40% {
-moz-transform: rotate(-3deg);
}
45% {
-moz-transform: rotate(2deg);
}
50% {
-moz-transform: rotate(0);
}
/* Come to rest at 50%. The rest is just stillness */
100% {
-moz-transform: rotate(0);
}
}
@keyframes swinging {
0% {
transform: rotate(0);
}
5% {
transform: rotate(10deg);
}
10% {
transform: rotate(-9deg);
}
15% {
transform: rotate(8deg);
}
20% {
transform: rotate(-7deg);
}
25% {
transform: rotate(6deg);
}
30% {
transform: rotate(-5deg);
}
35% {
transform: rotate(4deg);
}
40% {
transform: rotate(-3deg);
}
45% {
transform: rotate(2deg);
}
50% {
transform: rotate(0);
}
/* Come to rest at 50%. The rest is just stillness */
100% {
transform: rotate(0);
}
/*Zoom Galery */
.zoom_img img {
margin: 35px;
height: 150px;
width: 150px;
-moz-transition: -moz-transform 0.5s ease-in;
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -o-transform 0.5s ease-in;
}
.zoom_img img:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
}
/* --------------Media Screen------------ */
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) {
.container {
width: 100%;
}
.header {
width: 100%;
}
.sidebar1 {
width: 100%;
}
.sidebar2 {
width: 100%;
}
.content {
width: 100%;
border-left: 0px ridge #387B8B !important;
border-right: 0px ridge #387B8B !important;
}
.footer {
width: 100%;
}
.box-left {
width: 98%;
height: auto;
background: transparent;
}
img {
max-width: 100%
}
}
/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 768px) and (orientation: portrait) {
.container {
width: 100%;
}
.header {
width: 100%;
}
.sidebar1 {
width: 100%;
}
.sidebar2 {
width: 100%;
}
.content {
width: 100%;
border-left: 0px ridge #387B8B !important;
border-right: 0px ridge #387B8B !important;
}
.footer {
width: 100%;
}
.box-left {
width: 98%;
display: none;
visibility: hidden;
}
img {
max-width: 100%
}
}
/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
.container {
width: 100%;
}
.header {
width: 100%;
}
.sidebar1 {
width: 100%;
}
.sidebar2 {
width: 100%;
}
.content {
width: 100%;
border-left: 0px ridge #387B8B !important;
border-right: 0px ridge #387B8B !important;
}
.footer {
width: 100%;
}
.box-left {
width: 98%;
display: none;
visibility: hidden;
}
img {
max-width: 100%
}
}
/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
.container {
width: 100%;
}
.header {
width: 100%;
}
.sidebar1 {
width: 100%;
}
.sidebar2 {
width: 100%;
}
.content {
width: 100%;
border-left: 0px ridge #387B8B !important;
border-right: 0px ridge #387B8B !important;
}
.footer {
width: 100%;
}
.box-left {
width: 98%;
display: none;
visibility: hidden;
}
img {
max-width: 100%
}
ul.topnav {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav li {float: none}
ul.topnav li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav */
ul.topnav li a:hover {background-color:transparent;}
ul.topnav li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: block;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* untermenü*/
@media screen and (max-width:680px) {
ul.untermenu li:not(:first-child) {display: none;}
ul.untermenu li{
float: right;
display: block;
}
}
@media screen and (max-width:680px) {
ul.untermenu .responsive {position: relative;}
ul.untermenu.responsive li{
position: absolute;
right: 0;
top: 0;
}
ul.untermenu.responsive li {
float: none;
display: block;
}
ul.untermenu.responsive li a {
display: block;
text-align: left;
}
}
/* Untermenü Überschrift */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;
}
.submenu {
margin-bottom: 0;
}
.submenu a {
color: #AFB0C2;
text-decoration: none;
border-bottom: 1px dotted #3C6539;
padding:3px 3px 3px 3px;
}
.submenu a:hover {
color: #3C6539;
background-color: #FFECEC;
text-decoration: none;
border-bottom: 1px solid #3C6539;
}
/* Menu link */
a.menulink:link, a.menulink:visited, a.menulink:active {
list-style-type: none;
display: block;
width: 100%;
font-size: 1.0em;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #3C6539;
background-color: transparent;
border-bottom: 1px dotted #3C6539;
}
a.menulink:hover {
color: #0000FF;
background-color: transparent;
}
/*navi2*/
ul.topnav2 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav2 li {float: none}
ul.topnav2 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav2 */
ul.topnav2 li a:hover {background-color:transparent;}
ul.topnav2 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav2 li:not(:first-child) {display: none;}
ul.topnav2 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav2.responsive {position: relative;}
ul.topnav2.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav2.responsive li {
float: none;
display: block;
}
ul.topnav2.responsive li a {
display: block;
text-align: left;
}
}
/*navi3*/
ul.topnav3 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav3 li {float: none}
ul.topnav3 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav */
ul.topnav3 li a:hover {background-color:transparent;}
ul.topnav3 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav3 li:not(:first-child) {display: none;}
ul.topnav3 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav3.responsive {position: relative;}
ul.topnav3.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav3.responsive li {
float: none;
display: block;
}
ul.topnav3.responsive li a {
display: block;
text-align: left;
}
}
/*navi4*/
ul.topnav4 {
width:100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
ul.topnav4 li {float: none}
ul.topnav4 li a {
display: block;
color:#3C6539;
text-align:left;
padding:3px 3px 3px 3px;
text-decoration: none;
transition: 0.3s;
font-size: 1.0em;
border-bottom: 1px dotted #3C6539;
}
/* topnav4 */
ul.topnav4 li a:hover {background-color:transparent;}
ul.topnav4 li.icon {display: inline;}
.icon {
color: #008000;
}
@media screen and (max-width:680px) {
ul.topnav4 li:not(:first-child) {display: none;}
ul.topnav4 li.icon {
float: right;
display: block;}
}
@media screen and (max-width:680px) {
ul.topnav4.responsive {position: relative;}
ul.topnav4.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav4.responsive li {
float: none;
display: block;
}
ul.topnav4.responsive li a {
display: block;
text-align: left;
}
}
/* untermenü*/
@media screen and (max-width:680px) {
ul.untermenu li:not(:first-child) {display: none;}
ul.untermenu li{
float: right;
display: block;
}
}
@media screen and (max-width:680px) {
ul.untermenu .responsive {position: relative;}
ul.untermenu.responsive li{
position: absolute;
right: 0;
top: 0;
}
ul.untermenu.responsive li {
float: none;
display: block;
}
ul.untermenu.responsive li a {
display: block;
text-align: left;
}
}
/* Untermenü Überschrift */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;
}
.submenu {
margin-bottom: 0;
}
.submenu a {
color: #AFB0C2;
text-decoration: none;
border-bottom: 1px dotted #3C6539;
padding:3px 3px 3px 3px;
}
.submenu a:hover {
color: #3C6539;
background-color: #FFECEC;
text-decoration: none;
border-bottom: 1px solid #3C6539;
}
Code: Alles auswählen
}
/* swing-bilder*/
.swing {
-webkit-animation: swinging 10s ease-in-out 0s infinite;
-moz-animation: swinging 10s ease-in-out 0s infinite;
animation: swinging 10s ease-in-out 0s infinite;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
@-webkit-keyframes swinging
Code: Alles auswählen
}
/*Zoom Galery */
.zoom_img img {
margin: 35px;
height: 150px;
width: 150px;
-moz-transition: -moz-transform 0.5s ease-in;
-webkit-transition: -webkit-transform 0.5s ease-in;
-o-transition: -o-transform 0.5s ease-in;
}
.zoom_img img:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
}