Zaloguj | Zarejestruj | FAQ
Anonymous

Sichtbarkeit eines Menüs beschränken

+ Odpowiedz

Posty: 6 Strona 1 z 1


Sichtbarkeit eines Menüs beschränken

przez Troll » N cze 10, 2012 9:36 am

Moin CSS'ler!

Ich stelle fest, dass ich wohl doch auf die Hilfe eines Forums bei kleineren Fragen angewiesen bin und somit hier mein/e erste/r Frage/Beitrag:

Ich habe mir mit CSS ein links gesetztes, senkrechtes und scrollbares Menü erstellt. Das soll so sein.

Nur leider scrollt es ja nun sichtbar bis zum oberen Bildrand und "verschwindet" da.

Gibt es mit CSS die Möglichkeit, den oberen Bildrand "runter zu setzen", so dass das Menü bei z.B. 200px vor dem oberen Rand "verschwindet"?

Vielen Dank für Eure Antworten!

Viele Grüße!
Troll
Avatar użytkownika

Troll

  • Posty: 3
  • Dołączył(a): N cze 10, 2012 9:17 am
--
LG
Troll

Re: Sichtbarkeit eines Menüs beschränken

przez XainPro » Pn cze 11, 2012 12:12 pm

vielleicht ist es das Problem mit CSS könnten Sie bitte teilen den genauen CSS-Code mit uns?
Nizza Display Picture haha
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Sichtbarkeit eines Menüs beschränken

przez Troll » Pn cze 11, 2012 7:41 pm

Danke für Ihr Interesse XainPro!

...und da wäre gleich ein erster Punkt: "Sie'tzt" man sich hier im Forum?!? Ich persönlich habe nix gegen ein wertschätzendes (!) "Du", welches von gegenseitiger Achtung und gesunder Demut geprägt ist. Jedenfalls kenne ich es so aus anderen Foren.

Ich habe hier mal etwas zum Verständnis vorbereitet: http://www.foto-finish.de/Test-CSS/

Da ich ja gerade an der Produktion dieser Seite sitze, haben sich weitere Fragen ergeben. Aber der Reihe nach!

1. Mein Problem mit dem Scrollen des Menüs (wie oben im Eröffnungsbeitrag beschrieben) > es sollte vor der Überschrift nicht mehr sichtbar sein. Also nicht weiter sichtbar unter der Überschrift durchscrollen.

2. Schaut Euch mal den ersten Menü-Punkt "Dokumente und mehr" an > warum ist der Absatz versetzt??? ...ich suche und suche und finde den Fehler nicht.

3. Das Menü sollte nach dem Verlassen wieder in seine Ausgangsposition "zurück springen". Bei meiner Umsetzung bleibt es nach dem Scrollen dort stehen, wo es verlassen wurde.

Mein CSS-Style:
Kod: Zaznacz cały
@charset "utf-8";
/* CSS Document */

/* ################################ */
/* # Grundeinstellungen der Seite # */
/* ################################ */

body {
   background-color: #D3E3E7;
        /* for pull-down menu to work in IE6*/
        behavior:url("csshover2.htc");
}

/* ############################## */

/* Überschrift */
div#Top01 {
   /*position:absolute;*/
   position:fixed;
   z-index: 10;   /* Je höher der z-index, um so "sichtbarer" das Objekt */
   top:50px; left:55px;
   width:800px; height:80px;
   text-align: left;
   font-family:Arial;
   font-size:2em;
   font-style:oblique;
   /*font-weight:bolder;*/
   color:#000080;
/*   background:#D3E3E7; */
}

/* ############################## */


/* Rahmen für das Hintergrundbild */
div#BackgroundPicture {
   /*position:absolute;*/
   position:fixed;
   z-index: 5;   /* Je höher der z-index, um so "sichtbarer" das Objekt */
   /*float: left;*/
   top:0px; right:0px;
   /*width:800px; height:800px;*/
   text-align: center;
}

/* ############################## */

/* Bild zu Link bei Mouseover */
a.popup {
  text-decoration:none;
  position:relative;
  display:block;
}
a.popup:hover {
  border:none;
}
a.popup img {
  border:none;
}
a.popup span {
  visibility:hidden;
  position:absolute;
  top:0px;
  left:200px;
}
a.popup:hover span {
  visibility:visible;
}


/* ############################## */
/* ####### pull-down mainmenu css ####### */
/* ############################## */

.mainmenu{
   position:relative;
   z-index: 6;      /* Je höher der z-index, um so "sichtbarer" das Objekt */
   top:200px; left:40px;   
   width: 8em;
   padding: 0;
   float: left;
}

.mainmenu ul {
   float: left;
   width: 100%;
   list-style: none;
   line-height: 1;
   color:#000080;
   /* background: #D3E3E7; */
   padding: 0;
   border: #D3E3E7;
   border-width: 1px 1px;
   margin: 0 0 0 0;
}

.mainmenu a, .mainmenu a:visited {
   display: block;
   width: 100%;
font-family:Arial, Verdana;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
   color: #000080;
   text-decoration: none;
   padding: 1em 0em;
   text-indent:1em;
   margin: 0;   

}
.mainmenu li li a{padding:1em;text-indent:0;}
.mainmenu ul ul a{
   width:100%;
   height:100%;
}
.mainmenu ul a{
      width: 100%;
}


.mainmenu li  {
   float: left;
   width:100%;
   margin:0;
   padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li  {width:100%;} /* !!!!! */
   
.mainmenu li ul {
   position: absolute;
   left: -999em;
   height: auto;
   width:12em;   
   background: #E4E4E4;
   font-weight: normal;
   border-width: 1px;
   margin: 0;
}

.mainmenu li li {
   width: 100% ;
}
.mainmenu li a{width: 100% ; }
.mainmenu li li a{
   width: 100%;
}

.mainmenu li ul  {
   margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
   margin: -2.1em 0 0 -0.3em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
   left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
   left: 100%; /* !!! */
}
.mainmenu li:hover>ul.ul_ch   
{
   left: 100%; /* !!! */
}

.mainmenu li:hover{
   background: #D3E3E7;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
   color:#699A9E;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
   color:#000080;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
   background: #808080;
   z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
   color: #B9D0D2;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
   color: #000080;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
   color: #B9D0D2;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
   color: #000080;
}

/* ############################## */
/* ####### pull-down mainmenu css ####### */
/* ####### ###       E N D E        ########## */
/* ############################## */



Meine index.html:

Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Das ist der Titel der Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Keep the http-equiv meta tag for IE8 -->

  <meta http-equiv="X-UA-Compatible" content="IE=8" />


<!-- Link the CSS file here -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="CSS/style.css" />
<!-- Link CSS file End -->

</head>

<body>

<div id="Top01">Hier ist meine &Uuml;berschrift und unter dieser soll<br>das Men&uuml; beim Scrollen nicht mehr sichtbar seinl</div>

<div id="BackgroundPicture"><img src="images/waschbaer01.png" width="1280" height="1040" border="0"></div>


<!-- ############################# -->
<!-- ### PullDownMenu - BEGINN ### -->
<!-- ############################# -->


<div class="mainmenu">
<ul>
<!-- ### -->
<!--      <li class="li_nc"><a href="#" target="_self" >Home</a></li> -->
<!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Dokumente<br>und mehr</a><ul class="ul_ch">
          <li class="li_hc"><a href="#" target="_self" >Test</a><ul class="ul_ch">
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              </ul></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test Test<br>Test Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              </ul></li>
<!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test Test</a><ul class="ul_ch">
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
      </ul></li>
<!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test Test Test</a><ul class="ul_ch">
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Standards/UnterspritzungMitAdrenalinloesung.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
      </ul></li>
<!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test</a><ul class="ul_ch">
         <li class="li_hc"><a href="#" target="_self" >Test</a><ul class="ul_ch">
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              </ul></li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
      </ul></li>
<!-- ### -->

<!-- ############################# -->
<!-- #### PullDownMenu - ENDE ########## -->
<!-- ############################# -->

</body>
</html>


Herzlichen Dank Euch Allen! ...für Eure Hilfe!

LG
Troll
Avatar użytkownika

Troll

  • Posty: 3
  • Dołączył(a): N cze 10, 2012 9:17 am
--
LG
Troll

Re: Sichtbarkeit eines Menüs beschränken

przez XainPro » Wt cze 12, 2012 4:37 am

Hier ist die Lösung all Ihrer Probleme
Kod: Zaznacz cały
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Das ist der Titel der Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Keep the http-equiv meta tag for IE8 -->

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<!-- Link the CSS file here -->
<style type="text/css">
@charset "utf-8";
/* CSS Document */

/* ################################ */
/* # Grundeinstellungen der Seite # */
/* ################################ */

body {
   background-color: #D3E3E7;
   /* for pull-down menu to work in IE6*/
        behavior:url("csshover2.htc");
   background-image:url(images/waschbaer01.png);
   background-attachment:fixed;
}
/* ############################## */

/* Überschrift */
div#Top01 {
   /*position:absolute;*/
   z-index: 10;   /* Je höher der z-index, um so "sichtbarer" das Objekt */
   top:50px;
   left:55px;
   width:800px;
   height:80px;
   text-align: left;
   font-family:Arial;
   font-size:2em;
   font-style:oblique;
   /*font-weight:bolder;*/
   color:#000080;/*   background:#D3E3E7; */
}
/* ############################## */
#wrapper {
   margin:0 auto;
   width:1000px;
   position:relative;
}
/* ############################## */

/* Bild zu Link bei Mouseover */
a.popup {
   text-decoration:none;
   position:relative;
   display:block;
}
a.popup:hover {
   border:none;
}
a.popup img {
   border:none;
}
a.popup span {
   visibility:hidden;
   position:absolute;
   top:0px;
   left:200px;
}
a.popup:hover span {
   visibility:visible;
}
/* ############################## */
/* ####### pull-down mainmenu css ####### */
/* ############################## */

.mainmenu {
   position:relative;
   z-index: 6;      /* Je höher der z-index, um so "sichtbarer" das Objekt */
   width: 10em;
   padding: 0;
   padding-top:20px;
   float: left;
}
.mainmenu ul {
   float: left;
   width: 100%;
   list-style: none;
   line-height: 1;
   color:#000080;
   /* background: #D3E3E7; */
   padding: 0;
   border: #D3E3E7;
   border-style:solid;
   border-width: 1px 1px;
   margin: 0 0 0 0;
}
.mainmenu a, .mainmenu a:visited {
   display: block;
   width: 100%;
   font-family:Arial, Verdana;
   font-size:0.8em;
   font-weight:bold;
   font-style:normal;
   text-decoration:underline;
   color: #000080;
   text-decoration: none;
   padding: 1em 0em;
   text-indent:1em;
   margin: 0;
}
.mainmenu li li a {
   padding:1em;
   text-indent:0;
}
.mainmenu ul ul a {
   width:100%;
   height:100%;
}
.mainmenu ul a {
   width: 100%;
}
.mainmenu li {
   float: left;
   width:100%;
   margin:0;
   padding:0;
}
.mainmenu ul li {
   float:left;
   position:relative;
}
.mainmenu ul li {
   width:100%;
} /* !!!!! */
.mainmenu li ul {
   position: absolute;
   left: -999em;
   height: auto;
   width:12em;
   background: #E4E4E4;
   font-weight: normal;
   border-width: 1px;
   margin: 0;
}
.mainmenu li li {
   width: 100%;
}
.mainmenu li a {
   width: 100%;
}
.mainmenu li li a {
   width: 100%;
}
.mainmenu li ul {
   margin: -2.1em 0 0 -0.3em;
}
.mainmenu li ul ul {
   margin: -2.1em 0 0 -0.3em;
}
.ul_ch, .mainmenu li:hover ul ul, .mainmenu li li:hover ul ul, .mainmenu li li li:hover ul ul, .mainmenu li li li li:hover ul ul, .mainmenu li li li li li:hover ul ul {
   left: -999em;
}
.mainmenu li:hover ul, .mainmenu li li:hover ul, .mainmenu li li li:hover ul, .mainmenu li li li li:hover ul, .mainmenu li li li li li:hover ul {
   left: 100%; /* !!! */
}
.mainmenu li:hover>ul.ul_ch {
   left: 100%; /* !!! */
}
.mainmenu li:hover {
   background: #D3E3E7;
}
.mainmenu li:hover a, .mainmenu li:hover a:visited, .mainmenu li:hover a:hover, .mainmenu li a:hover {
   color:#699A9E;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited {
   color:#000080;
}
.mainmenu li li:hover, .mainmenu li li li:hover, .mainmenu li li li li:hover, .mainmenu li li li li li:hover, .mainmenu li li li li li li:hover {
   background: #808080;
   z-index:9999;
}
.mainmenu li li:hover a, .mainmenu li li li:hover a, .mainmenu li li li li:hover a, .mainmenu li li li li li:hover a {
   color: #B9D0D2;
}
.mainmenu ul ul a, .mainmenu ul ul a:visited, .mainmenu li li a, .mainmenu li li a:visited {
   color: #000080;
}
.mainmenu ul ul a:hover, .mainmenu li:hover li:hover a, .mainmenu li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited {
   color: #B9D0D2;
}
.mainmenu li:hover li:hover li a, .mainmenu li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li a, .mainmenu li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li a, .mainmenu li:hover li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li a, .mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited {
   color: #000080;
}

/* ############################## */
/* ####### pull-down mainmenu css ####### */
/* ####### ###       E N D E        ########## */
/* ############################## */
</style>
<!-- Link CSS file End -->

</head>

<body>
<div id="wrapper">
  <div id="Top01">Hier ist meine &Uuml;berschrift und unter dieser soll<br>
    das Men&uuml; beim Scrollen nicht mehr sichtbar seinl</div>
 
  <!-- ############################# -->
  <!-- ### PullDownMenu - BEGINN ### -->
  <!-- ############################# -->
 
  <div class="mainmenu">
    <ul>
      <!-- ### -->
      <!--      <li class="li_nc"><a href="#" target="_self" >Home</a></li> -->
      <!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Dokumenteund mehr</a>
        <ul class="ul_ch">
          <li class="li_hc"><a href="#" target="_self" >Test</a>
            <ul class="ul_ch">
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
            </ul>
          </li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test Test Test Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
        </ul>
      </li>
      <!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test Test</a>
        <ul class="ul_ch">
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
        </ul>
      </li>
      <!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test Test Test</a>
        <ul class="ul_ch">
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Standards/UnterspritzungMitAdrenalinloesung.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_hc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
        </ul>
      </li>
      <!-- ### -->
      <li class="li_nc"><a href="#" target="_self" >Test</a>
        <ul class="ul_ch">
          <li class="li_hc"><a href="#" target="_self" >Test</a>
            <ul class="ul_ch">
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
              <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
            </ul>
          </li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
          <li class="li_nc"><a href="PDFs/Test01.pdf"  class="popup" target="_blank" >Test<span><img src="images-PDF/Test01.jpg" width="265" height="400" border="0" alt="Bild" target="_blank" ></span></a></li>
        </ul>
      </li>
      <!-- ### -->
     
      <!-- ############################# -->
      <!-- #### PullDownMenu - ENDE ########## -->
      <!-- ############################# -->
    </ul>
  </div>
</div>
</body>
</html>
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm

Re: Sichtbarkeit eines Menüs beschränken

przez Troll » Wt cze 12, 2012 2:16 pm

Vielen Dank für die Hilfe! ...aber leider hat sich nichts geändert.

Ich möchte auch weiterhin mit je einer index.html und einer CSS-Style-Datei arbeiten, also mit insgesamt 2 Dateien.

Alles in eine Datei zu schreiben, ist für mich ein "Zurückdenken" und überfordert mich.

Trotzdem Vielen Dank nochmals!

LG
Troll
Avatar użytkownika

Troll

  • Posty: 3
  • Dołączył(a): N cze 10, 2012 9:17 am
--
LG
Troll

Re: Sichtbarkeit eines Menüs beschränken

przez XainPro » Śr cze 13, 2012 4:50 am

Sie können Style-Element als externe CSS-Datei machen
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1