• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menü soll Inhalt überlagern

Status
Für weitere Antworten geschlossen.
T

TimeForGold

Neues Mitglied
Hallo Zusammen,

ich arbeite gerade an einem aufklappbaren Menü. Mein Problem ist, dass das Untermenü den Inhalt nicht überdeckt, sondern das Menü in die Höhe streckt. Legt man das Untermenü unterhalb des Hauptmenüpunkt an, wird der Inhalt nach unten geschoben, wenn das Untermenü aufklappt. Es gibt da die Möglichkeit des z-indexes, welches aber die Angaben von Positionen mit sich zieht. Da Position je nach Auflösung variiert, habe ich damit meine Schwierigkeiten. Vielleicht habt ihr eine recht simple Lösung?


Das ist der Eintrag aus meinem externen Stylesheet:

Code: 
.bereich{
z-index:2;
position:absolute;
display: block;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Deutsch - T&uuml;rkischer Mediatag</title>
  <link rel="stylesheet" type="text/css" href="style/medya.css">
  
 <script type="text/javascript">
 
// Shows and hides elements
function anzeigen(element)
{
  if(document.getElementById(element).style.display=='none')
  {
    document.getElementById(element).style.display='block';
  } 
  else
  {
    document.getElementById(element).style.display='none';
  }
}


</script>

 
  </head>
  <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
  <table border="1" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>&nbsp;</td>
      <td width="800" align="center" valign="top">
        <table border="1" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td>Grafik</td>
          </tr>
          <tr>
            <td><table border="1" cellspacing="0" cellpadding="0" width="100%">
              <tr>
                <td width="160" align="center" bgcolor="#cd071e"><a href="#"><div class="menu" onMouseOver="javascript:anzeigen('menu_1');" onMouseOut="javascript:anzeigen('menu_1');">Um was es geht?</a>
                  <!-- 1 Submenu -->
                  
                  </div>
                </td>
                <td width="160" align="center" bgcolor="#a9121c"><a href="#">Agenda</a></td>
                <td width="160" align="center" bgcolor="#811518"><a href="#">Buchung</a></td>
                <td width="160" align="center" bgcolor="#5d1213"><a href="#">Anreise</a></td>
                <td width="160" align="center" bgcolor="#484344"><a href="#">Kontakt/Impressum</a></td>
              </tr>
              <tr>
               <td><span id="menu_1" style="display:none;">
                  <table border="1" cellspacing="0" cellpadding="0" width="100%">
                      <tr>
                        <td><a href="#">Thema</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">Warum</a></td>
                      </tr>
                      <tr>
                        <td><a href="#">F&uuml;r wen</a></td>
                      </tr>
                  </table>
                  </span></td>
              </tr>
              <tr>
               <td></td>
              </tr>
              <tr>
               <td></td>
              </tr>
              <tr>
               <td></td>
              </tr>
              <tr>
               <td></td>
              </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td align="left" valign="top">Inhalt</td>
          </tr>
        </table>
      <td>&nbsp;</td>
    </tr>
  </table>
  
                
  </body>
</html>
Menu.jpg
Menu.jpg


Bild zur Veranschaulichung
Menu.jpg

Menu.jpg



Vielen Danke für die Unterstützung.
 
Zuletzt bearbeitet:
Kann mir den jemand vielleicht Tipps geben, wie ich ein Aufklappmenü schreibe welches eine Variable Positionierung hat? Soll bedeuten, ich kann nicht keine festen Anagben über die x,y Position machen. Da bei unterschiedlichen Auflösungen diese Werte nicht mehr stimmen würden. Diese Werte benötigt man meines Wissens um das Position Element in Kombination mit dem z-index in Css zu setzen.

Bin über jede Hilfe dankbar, ist leider mein erstes Menü was ich schreibe. Im Web habe ich sehr viele Beispiele gefunden. Leider aber noch keines wo die Positionierung variabel war.

Danke.
 
Ohne position: absolute; geht das nicht.
Position:absolute muß aber nicht immer vom Viewpoint des Browserfensters ausgehen.
Wenn ein Elternelement ebenfalls absolut oder relativ positioniert wurde, gilt dieses als Ausgangspunkt für absolut positionierte Kinderelemente.
Du kannst deine Sub-Navigation also ausgehend von der Tabellenzelle positionieren.

Layout-Tabellen werden schnell unübersichtlich. Ich hatte Schwierigkeiten deine Zusammenhängende Navigation zu überblicken. Deine Tabelle ist irgendwie auch auseinandergerissen. Wenn du Layottabellen benützt, solltest du darauf achten, daß das Element mit dem Event-Handler in der selben Zelle ist wie das Submenü.

display: none; wird von vielen Screenreadern nicht vorgelesen.
Es gibt Autoren, die prophezeien, daß Googe in naher Zukunft display: none ebenfalls ignoriert.
Ich würde die Subnavigation mit css (position:absolute aus dem Viewpoint ziehen und bei :hover zurückholen.

Ich habe ein Beispiel als verschachtelte Liste geschrieben:
css:hover

Für den IE6 funktioniert der hover nur mit einem kleinen Javascript (suckerfish alistapart)

Das Javascript ist per Conditional-Comments versteckt und wird nur von IE-Browser unter Vers.7 angewendet.
 
Danke für die gute Hilfe. Ich habe ein Menü von Stu Nicholls | CSSplay | A CSS only dropdown menu v2 verwendet. Leider klappt das Menü nicht im IE7 auf.

Kann man da jemand weiterhelfen, kenne mich leider mit CSS-Hacks nicht aus, evtl. fehlen dort welche, wobei ich den CSS-Teil eins-zu-eins kopiert habe. Kann jemand mal schauen ob ich was falsch gemacht habe?

CSS
HTML: 
/* style the outer div to give it width */
.menu {
width:750px; 
font-size:0.85em;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}



Html
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Deutsch - T&uuml;rkischer Mediatag</title>
  <link rel="stylesheet" type="text/css" href="style/medya.css">
  </head>
  <body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
  <table border="1" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td>&nbsp;</td>
      <td width="800" align="center" valign="top">
        <table border="1" cellspacing="0" cellpadding="0" width="100%">
          <tr>
            <td>Grafik</td>
          </tr>
          <tr>
            <td align="center" valign="top">
            <div class="menu">
              <ul>
              <li><a href="#">Um was es geht?<!--[if IE 7]><!--></a><!--<![endif]-->
                <ul>
                <li><a href="#">Thema</a></li>
                <li><a href="#">Warum</a></li>
                <li><a href="#">F&uuml;r wen</a></li>
                </ul>
              
              </li>
              </ul>
            </div>
            </td>
          </tr>
          <tr>
            <td align="left" valign="top">Inhalt</td>
          </tr>
        </table>
      <td>&nbsp;</td>
    </tr>
  </table>
                 
  </body>
</html>

Danke, Gruß TimeForGold
 
Das Menü ist von 2006.
Den IE7 gab es damals noch nicht. Ich wage zu behaupten behaupten, daß die (zum Teil experimentellen) Beispiele von cssplay.co.uk nicht für Einsteiger geeignet sind. Wie der title schon sagt, ist das auch nicht der Anspruch der Seite.

Der Klassiker unter den Ausklappmenüs ist:
A List Apart: Articles: Suckerfish Dropdowns
Der Artikel ist um einiges älter aber es funktioniert auch heute noch gut.
Angelehnte Anleitungen gibt es zu hauf im Internet.
Ein Beispiel habe ich auch mal beschrieben:
css | Spalten :: Ausklappmenü
Das Menü lässt sich auch in eine Tabellenzelle Schreiben.
Ab IE5 (win). Für den IE5* (mac) habe ich keine Testmöglichkeit.

Leider kommt dieses Beispiel nicht ohne Javascript für den IE unter Vers. 7 aus.

Verwende in diesem Forum besser den allgemeinen code-Tag auch für html-code.
Die Zeilenumbrüche werden sonst weggekürzt.
Zeilenumbrüche können im html-code unerwünschte Folgen haben.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben