Navigationsmenü funktioniert nicht richtig

[Butterblume]

Okay, dann verwuche ich mir den Beitrag noch einmal genau durchzulesen und hoffe, dass ich es dann hinbekomme! Ohje...

[Butterblume]

Ich habe eben noch mal in den Header metatags geschaut, da ist mir plötzlich aufgefallen, dass da 2x

<script type="text/javascript" src="../../../design/skript-navi.js"></script>

drin steht, dass kann doch auch nicht richtig sein, oder?

[Butterblume]

Habe mir jetzt die ganze Poserbilder nochmal auf meine Testseite geschoben. Nicht das ich auf der originalem was zerschieße und mich dann ärgere!

[HTML-Laie]

Davon kannst du dann du eins löschen.

Irgendwo in deinem Quelltext ist der Wurm drin. Habe von Moni eine Menüleiste für deine Homepage erhalten. Arbeite gerade daran.

LG Hape

[Butterblume]

Eins habe ich schon gelöscht!

Ich stelle mir gerade die frage, wie kann sich das vestellen, wenn ich nach einem update nur die navi links bzw. Den footer für die rechte navileiste bearbeite?! Das ist mir irgendwie zu hoch!

Hape ich danke dir fürs bearbeiten!

[HTML-Laie]

Ich habe mal ein bißchen im Netz gebuddelt und ältere Ausgaben deiner Homepage angesehen. Das Problem mit den nicht eingeklappten Menüs muss schon weitaus länger bestehen.

Nun gut, habe mal wieder deinen Quelltext durchwühlt, habe bei den Menüs einige Bezeichnungen bzw. Namen geändert sowie die CSS-Datei für das Menü erweitert, da hier einiges fehlte um die Menüs wieder einklappbar zu machen.

Hier die geänderten Bereiche des Menüs:

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");
}

Hier die geänderte bzw. erweiterte CSS-Datei für das Menü:

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;
}

Bitte dieses mal testen.

LG Hape

[Butterblume]

Hallo hape,
Wollte nur eben Bescheid geben, dass ich das vor morgen Nachmittag nicht schaffen werde! Ich möchte mir dabei auch ruhe lassen, dass ich das hoffentlich auch mal verstehe...

Aber ich sage vielen lieben für deine Hilfe! Melde ich dann wenn ich es auf meiner Test Seite eingegeben habe und wie es auf einem Handy danach dann aussieht!

Wünsche erst einmal einen scnönen Abend und für morgen einen guten Start in die neue Woche!

[Butterblume]

Hallo Hape,

ich hab mir das jetzt mal angesehen und auch eingefügt! Geändert hat sich aber nichts?? Die Navi ist dennoch aufgeklappt!

Dein Oberster Code: Hier die geänderten Bereiche des Menüs ist bei mir im Footer, weil da die rechte Navileiste drin ist. Und unter dem <div class="sidebar2"> <div class="link-tipp">
<h3>Link Tipp</h3></div> muss erst der Code von Backlinkseller rein, danach kann ich erst mit dem Rest einfügen anfangen!

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 liegt es vielleicht dadran?

Aber vielleicht schaust du nochmal wenn du zeit hast: https://www.test.karins-poserbilder.de

Doch nicht so einfach wie ich dachte!

[HTML-Laie]

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

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.

LG Hape

[Butterblume]

Hape,

du sagst ich soll das ersetzten. Ich habe den zweiten Code nach ganz unten in die style.css gesetzt, weil ich da nicht ersetzen konnte?!

Oh wei... ob ich das hinkriege?!

Das ist meine jetztige style. css auf der Test Seite:

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;
} 

Könntest du da nochmal nachsehen Hape?!



--------------------------

Aber ich habe auch eben was gesehen, was da glaube ich gar nicht reingehört?!

Da sind zwei ABschnitte drin, die ich damals für schwingende Bilder und für bilder die größer werden wenn man drüber fährt brauchte. Ich glaube zu wissen, dass das diese Abschnitte sind?!

Schwingende Bilder

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

größer werdende Bilder beim drüberfahren oder anklicken!

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);
}

Wenn ich das nicht brauche, könnte man das doch sicher gleich mit beheben und löschen?!