Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > table in den Hintergrund...
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > table in den Hintergrund...

Pages: [1]
geschrieben von Raver2 am 06.04.2004 - 15:29
Hi,
ich habe folgendes Problem: ich habe so 'ne minipage entwickelt (mit Menu von Starleos) und das Problem ist die Tablelle darunter ist im vordergrund und man kann das Submenü nicht erkennen...
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 
77: 
78: 
79: 
80: 
81: 
82: 
83: 
84: 
85: 
86: 
87: 
88: 
89: 
90: 
91: 
92: 
93: 
94: 
95: 
96: 
97: 
98: 
99: 
100: 
101: 
102: 
103: 
104: 
105: 
106: 
107: 
108: 
109: 
110: 
111: 
112: 
113: 
114: 
115: 
116: 
117: 
118: 
119: 
120: 
121: 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de" lang="de">
<head>
 <title>Unbenannt</title>
 <meta name="generator" content="Scribe! 2 [http://scribe.de]" />
<script type="text/javascript">
<!--
  function montre(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="block";
		} else if (document.all) {
		  document.all[id].style.display="block";
		} else if (document.layers) {
		  document.layers[id].display="block";
		} } 

 function cache(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="none";
		} else if (document.all) {
		  document.all[id].style.display="none";
		} else if (document.layers) {
		  document.layers[id].display="none";
		} } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu {
position: absolute;
width: 480px; 
margin-left:-240px;
left:50%;
top:20px;
}
div.menu li {
float: left;
width: 120px;               
}

div.menu a {
margin: 0 0px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

div.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
#tablemain {
position: absolute;
width: 480px; 
margin-left:-240px;
left:50%;
top:40px;
background:silver;
border:1px solid black;
height:300px;
width:480px;
}
-->
</style></head>


<body>
<div class="menu">
<ul><li><a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Menu 1</a>	<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
	<li><a href="">Subkategorie 1.1</a></li>
	<li><a href="">Subkategorie 1.2</a></li>
	<li><a href="">Subkategorie 1.3</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu2');" onmouseout="cache('smenu2');" href="">Menu 2</a><ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
	<li><a href="">Subkategorie 2.1</a></li>
	<li><a href="">Subkategorie 2.2</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu3');" onmouseout="cache('smenu3');" href="">Menu 3</a><ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
	<li><a href="">Subkategorie 3.1</a></li>
	<li><a href="">Subkategorie 3.2</a></li>
	<li><a href="">Subkategorie 3.3</a></li>
	<li><a href="">Subkategorie 3.4</a></li>
	<li><a href="">Subkategorie 3.5</a></li>
	</ul></li>
	<li><a onmouseover="montre('smenu4');" onmouseout="cache('smenu4');" href="">Menu 4</a><ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
	<li><a href="">Subkategorie 4.1</a></li>
	<li><a href="">Subkategorie 4.2</a></li>
	<li><a href="">Subkategorie 4.3</a></li>
	</ul></li>
</ul>
</div>
<table id="tablemain"><tr><td>text</td></tr></table>

</body>
</html>

geschrieben von Raver2 am 06.04.2004 - 16:52
ich habe jetzt die neueste Version der Page upgeloaded , aber das Problem besteht immer noch...
http://www.bergmon.de/Seite5.html

geschrieben von Armin am 06.04.2004 - 17:01
Hallo,

versuch mal bei
div.menu {
position: absolute;
width: 480px;
margin-left:-240px;
left:50%;
top:20px;
}

noch ein z-index:1 rein zu schreiben. Ansonsten zusätzlich um die tabelle auch ein div mit z-index:0

Armin

geschrieben von Raver2 am 06.04.2004 - 17:06
danke, danke, danke,...es geht...


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.