Hallo alle zusammen,
folgendes Problem, wenn ich in der Navigation ein Element an wähle wird das Untermenü ausgefahren und das Element das rechts daneben steht verrückt. Ich habe es schon mit dem z-index probiert und verschiede display-optionen wie inline, inline-block usw. aber hat alles nichts gebracht.
Daher nun die Frage an euch ob mir jemand einen Rat zu dem Problem geben kann.
Vielen Dank!
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Startseite</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript"></script>
</head>
<body>
<div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel">WILLKOMMEN</a></li>
<li><a href="#Beispiel">xxxxxx</a>
<ul>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">xxxxxxxxx</a>
<ul>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">xx</a>
<ul>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 3a</a></li>
<li><a href="#Beispiel">Seite 3b</a></li>
<li><a href="#Beispiel">Seite 3c</a></li>
</ul>
</li>
<li><a href="#Beispiel">xxxxxxxxxxx</a></li>
<li><a href="#Beispiel">xxxxxxxxxxxxxx</a></li>
</ul>
<div></div>
</div>
<div id="inhaltsbox_1"><img class="img150" src="108.jpg"></div>
<img class="img151" src="dsc_0029.jpg">
<div id="inhaltsbox_2"><img class="img152" src="dsc_0029.jpg"></div>
<div id="textfeld_1"> <p>yyyyyyyy</p></div>
<div id="textfeld_2"> <p>yyyyyyyyyy</p></div>
<img class="img153" src="karo_groß.gif">
</body>
</html>Code
body {
margin:0px;
padding:0px;
}
div#Tmenu {
font-size: 14px;
padding: 33px;
border-bottom:3px solid white;
background-color: #000000;
background-image:url(schwarzerbalken.gif);
background-repeat:no-repeat;
height:38px;
}
* html div#Tmenu {
width: 100%;
w\idth: 100%; /* IE 6 in standards-compliant mode */
}
div#Tmenu div {
clear: left;
}
ul#Navigation {
margin: 20px 0px 0px 240px;
padding: 0px; /* oben, rechts, unten, links */
text-align: left;
z-index:2;
position:absolute;
}
ul#Navigation li {
list-style: none;
float: left;
margin: 0em;
padding: 0em;
}
* html ul#Navigation li {
margin-bottom: -0.4em;
}
ul#Navigation li ul {
margin: 0;
padding: 0;
top:2.1em;
position:relative;
border:1px solid white;
display:none;
}
* html ul#Navigation li ul {
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li ul li {
float: none;
display: block;
margin: 0em;
border-bottom:1px solid white;
}
ul#Navigation a, ul#Navigation span {
display: block;
width:auto;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
text-decoration: none; font-weight: bold;
margin: 0px 0px 0px 5px;
padding: 0.23em 0.97em 0.16em 1.03em; /* oben, rechts, unten, links */
color: white;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 9.2em;
w\idth: 7em; /* IE 6 in standards-compliant mode */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
width:7em;
padding: 0.16em 1.03em 0.23em 0.97em;
color: #E8D5A0;
}
ul#Navigation li ul a:hover {
border-color: white;
color: #E8D5A0;
}
li a#aktuell {
color: #E8D5A0;
}
ul#Navigation li ul span {
color: #E8D5A0;
}
ul#Navigation li a:active, ul#Navigation li:hover a:active {
color: #E8D5A0;
background-color: black;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover ul {
display:block;
background: black;
}
.img150 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left:65px;
border:3px solid #000000;
border-bottom: 40px solid #000000;
}
.img151 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left:415px;
border:3px solid #000000;
border-bottom: 40px solid #000000;
}
.img152 {
height:222px;
width:320px;
position:absolute;
z-index:1;
margin-top:50px;
margin-left: 190px;
border:3px solid #000000;
border-bottom: 40px solid #000000;
}
#inhaltsbox_1 {
width:50%;
height:84%;
background-color:#7F0E0E;
position:absolute;
margin-left:0%;
margin-top:0%;
background-image:url(karo1.gif);
background-repeat:repeat;
}
#inhaltsbox_2 {
width:50%;
height:84%;
background-color:#654829;
position:absolute;
margin-left:50%;
margin-top:0%;
background-image:url(karo2.gif);
background-repeat:repeat;
}
#textfeld_1 {
position:relative;
margin-left:155px;
margin-top:275px;
color:white;
z-index:2;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing:30px;
}
#textfeld_2 {
position:relative;
margin-left:785px;
margin-top:-67px;
color:white;
z-index:2;
font-family: "Trebuchet MS", "Century Gothic", Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing:30px;
}
.img153 {
width:300px;
height:20px;
position:absolute;
z-index:2;
margin-top:-60px;
margin-left: 427px;
}
,