TimeForGold
New member
Hallo Zusammen,
ich arbeite gerade an ein aufklappbares Menü. Mein Problem ist, das das Untermenü nicht den Inhalt überdeckt, sondern das Menü oder den in der höhe streckt. 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, ahbe ich damit meine Schwierigkeiten. Vielleicht habt ihr eine recht simple Lösung.
Das ist der Eintrag aus meinem externen Stylesheet:
HTML (leider nicht mit diesem Editor eingebuden, da dort alle Umbrüche entfernt wurden):
Um die Problematik zu veranschaulichen ein Screenshot:
Recht vielen Dank für Eure Hilfe.
ich arbeite gerade an ein aufklappbares Menü. Mein Problem ist, das das Untermenü nicht den Inhalt überdeckt, sondern das Menü oder den in der höhe streckt. 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, ahbe 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 (leider nicht mit diesem Editor eingebuden, da dort alle Umbrüche entfernt wurden):
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ü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> </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>
[B]<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 -->
<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ür wen</a></td>
</tr>
</table>
</span>
</div>
</td>[/B]
<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>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">Inhalt</td>
</tr>
</table>
<td> </td>
</tr>
</table>
</body>
</html>Um die Problematik zu veranschaulichen ein Screenshot:
Recht vielen Dank für Eure Hilfe.
Zuletzt bearbeitet von einem Moderator:
