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

Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

Kufifreund

Neues Mitglied
Hallo zusammen,

in der main meiner Website befinden sich direkt oben zwei left gefloatet Objekte. Ein div, der alle einzelnen Einträge umschließt und ein anderer rechts daneben, der als Seitenleiste dient.

Darüber befindet sich direkt ein mehrstufiges Dropdown-Menü.
Will ich dieses nun ausklappen, verschwindet es direkt wieder, wenn ich mich über den gefloateten Objekten befinde.
Auch kann ich innerhalb der gefloatenen Elemente keinen Text mehr markieren.

Da die beiden div's in der main relativ positioniert sind kann ich doch nicht mit z-index arbeiten, oder?

Kann mir dabei vielleicht jemand weiterhelfen. Wie setze ich das Dropdown-Menü "über" die float-Elemente? Oder liegt das Problem ganz wo anders?

Mein Quelltext:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>



<title>Seite xy</title>




<style type="text/css">
body {
background-color:#f8f8f8;
}

ul#horiznav, #horiznav ul{/
margin:0;
padding:0;
list-style-type:none;
height:32px
}

#horiznav li{
float:left;
position:absolute;
top:175px;
left:310px;
position:relative
}



horiznav li li{
float:left;
width:90px;
position:relative
}

#horiznav li a{
display:block;
width:120px;
line-height:25px;
text-align:center;
color:white;
font-family:verdana;
font-size:80%;
text-decoration:none;
-moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;

}



#horiznav li li a{
display:block;
width:150px;
line-height:10px;
text-align:left;
color:white;
text-decoration:none;
padding:10px;
background-color:#217dd2;
}

#horiznav li li a:hover{
background-color:#2168d2;
    -webkit-transition: background-color linear 0.05s;
    -moz-transition: background-color linear 0.05s;
    -o-transition: background-color linear 0.05s;
    -ms-transition: background-color linear 0.05s;
    transition: background-color linear 0.05s;
}


#horiznav li ul{
display:none;
position:absolute;
right:260px;
top:-150px;
}

#horiznav li li ul{
display:none;
visibility: hidden;
position:absolute;
right:140px;
top:-175px;
}



#horiznav li li:hover > ul{
visibility:visible;
cursor: default;
}

#horiznav li:hover ul {
display:block/*display the ul when the parent li is hovered*/
}

nav{
float:right;
padding:0px;
}

#website {
width:1024px;
margin:0 auto;
}

#header {
width:1024px;
height:200px;
background-image:url(xy-bild.png);
border:1px solid #ddd;

}
#menüstriche {
border-right:1px solid black;
}
#main {
width:1024px;
height:100%;
margin-top:9px;
background-color:white;
border:black;
border:1px solid #ddd;
float:left;
clear:both;
}
#übergang {
border-top:1px solid rey;
}

#eintrag {
border:1px solid #ddd;
width:780px;
height:218px;
position:relative;
}

#alleeintraege {
width:790px;
height:100%;
float:left;
position:relative;
}
.datum {
float:right;
font-family:verdana;
color:white;
font-weight:600;
font-size:11px;
margin-top:2px;
z-index:2;
}

.titel {
font-weight:600;
font-family:verdana;
color:white;
font-size:16px;
margin-top:2px;
}

#überschrift {
height:20px;
background-color:#198cdd;
padding:5px;
border-bottom:1px solid #ddd;
}

.text {
display:block;
font-size:14px;
color:#505050;
font-family:verdana;
padding:10px;
z-index:4;
clear:both;
border:0px solid #ddd;
}

.readon {
z-index:5;
color:#217dd2;
font-family:verdana;
font-size:13px;
text-decoration: none;
}

.bilder {
z-index:3;
width:200px;
height:150px;
margin:20px;
border:1px solid #ddd;
overflow:hidden;
}

.kommentar {
font-family:verdana;
font-size:10px;
float:right;
color:#888;
padding-right:5px;
text-decoration: none;
}

.eintraginformation {
font-family:verdana;
font-size:10px;
float:left;
color:#888;
padding-left:5px;
}

.bildinformation {
font-family:verdana;
font-size:10px;
text-align:center;
color:#888;
}

#strich {
height:150px;
width:1px;
border-left:1px solid #ddd;
}

#seitenleiste {
border:1px solid #ddd;
height:100%;
width:230px;
position:relative;
float:left;
}

.titel-seitenleiste {
font-weight:600;
font-family:verdana;
color:#505050;
font-size:17px;
margin-top:5px;
margin-bottom:5px;
text-align:center;
border-bottom:1px #ddd;
}

.text-seitenleiste {
display:block;
text-align:center;
font-size:14px;
color:#505050;
font-family:verdana;
padding:10px;
z-index:4;
clear:both;
border-bottom:1px #ddd;
}

#strich-seitenleiste {
height:1px;
width:195px;
border-bottom:1px solid #ddd;
margin-left:10px;
}

.footer {
position:relative;
text-align:right;
font-size:12px;
font-family:kailasa;
color:#ddd;

}

#platz {
float:left;
clear:left;
margin-top:2px;
}


/* &#x25BA */
</style>

</head>



<body>
<div id="website">
<div id="header" >
<ul id="horiznav">
<li id="menüstriche"><a href="#">Menüpunkt</a></li>
<li id="menüstriche"><a href="#">Menüpunkt</a>
   <ul>
      <li><a href="#">Menüpunkt</a></li>
      <li><a href="#">Menüpunkt<nav>&rsaquo;</nav></a>
          <ul>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
          </ul>
      </li>
      <li><a href="#">Menüpunkt<nav>&rsaquo;</nav></a>
          <ul>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
             <li><a href="#">Menüpunkt</a></li>
          </ul>
      </li>
   </ul>
</li>
<li id="menüstriche"><a href="#">Menüpunkt</a>
   <ul>
      <li><a href="#">Menüpunkt</a></li>
      <li><a href="#">Menüpunkt</a></li>
   </ul>
</li>
<li id="menüstriche"><a href="#">Menüpunkt</a></li>
<li><a href="#">Menüpunkt</a></li>
</ul>
</div>

<div id="main">


<br>


<div id="alleeintraege">


<div id="eintrag" style="margin:0px 5px 5px 5px;">
  <div id="überschrift">
  <p class="titel">
  Überschrift
  <span class="datum">
    Information
  </span>
  </p>
</div>


<div id="inhalt">
<table border="0px solid black" width="780px" height="150px">
<tr>
<th width="200px" heigth="150px">
<img class="bilder" src="xy.png" style="margin: 3px 3px 0px 3px; float: center;" /></a>
</th>
<td>
<div id="strich"></div>
</td>
<td width="100%" height="150px" align="left" style="padding-left:10px;">
<p class="text">Text xy
</p>

</td>
</tr>
<tr>
    <th colspan="1" height="5px" style="background-color:#f4f4f4;"><span class="bildinformation"  style="float:center;">Information</span>
</th>

    <th colspan="2" height="5px" style="background-color:#f4f4f4;"><span class="eintraginformation">Information</span><a href="  " class="kommentar">
    Information</a>
</th>
  </tr>

</table>
</div>
</div>



<div id="eintrag" style="margin:0px 5px 5px 5px;">
  <div id="überschrift">
  <p class="titel">
  Überschrift
  <span class="datum">
    Information
  </span>
  </p>
</div>


<div id="inhalt">
<table border="0px solid black" width="780px" height="150px">
<tr>
<th width="200px" heigth="150px">
<img class="bilder" src="xy.png" style="margin: 3px 3px 0px 3px; float: center;" /></a>
</th>
<td>
<div id="strich"></div>
</td>
<td width="100%" height="150px" align="left" style="padding-left:10px;">
<p class="text">Text xy
</p>

</td>
</tr>
<tr>
    <th colspan="1" height="5px" style="background-color:#f4f4f4;"><span class="bildinformation"  style="float:center;">Information</span>
</th>

    <th colspan="2" height="5px" style="background-color:#f4f4f4;"><span class="eintraginformation">Information</span><a href="  " class="kommentar">
    Information</a>
</th>
  </tr>

</table>
</div>
</div>

</div>


<div id="seitenleiste" >
<table width="100%" height="100%">
<td>
<tr>
<p class="titel-seitenleiste">
Bestleistungen
</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
<tr>
<p class="text-seitenleiste"> <span style="font-weight:600">xy</span> <br> Information xy<br>Information xy<br>Information xy</p>
</tr>
<div id="strich-seitenleiste"></div>
</td>
</table>
</div>



<div id="platz"></div>

</div>

<footer class="footer">
Copyright 2014 &copy; Person xy
</footer>

</div>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Werbung:
Danke für die Hilfe :),

funktioniert bei mir dadurch aber leider nicht wieder. Es verschiebt sich nur der ganze horiznav Block nach oben links im Header?
Hat es bei dir so funktioniert?

Code:
#horiznav li{
float:left;
top:175px;
left:310px;
position:relative
z-index:2;
}
 
Danke für die Hilfe :),

funktioniert bei mir dadurch aber leider nicht wieder. Es verschiebt sich nur der ganze horiznav Block nach oben links im Header?
Hat es bei dir so funktioniert?

Code:
#horiznav li{
float:left;
top:175px;
left:310px;
position:relative
z-index:2;
}

Ja, bei mir hat das so funktioniert.
Im Safari.

Aber ich muss auch sagen dein Code ist ein ziemliches Schlachtfeld mit einigen Syntax-Fehlern (die schlimmste Sorte Fehler).

So wie das aussieht ist eben schwer zu sagen ob etwas funktioniert oder nicht.
 

Anhänge

  • Unbenannt-1.png
    Unbenannt-1.png
    13,5 KB · Aufrufe: 8
Werbung:
Bei mir werden keine Fehler angezeigt? Was meinst du zum Beispiel?

Ich habe hinter der position:relative das ; vergessen :confused:.. Danke für die Hilfe!
 
Bei mir werden keine Fehler angezeigt? Was meinst du zum Beispiel?

Ich habe hinter der position:relative das ; vergessen :confused:.. Danke für die Hilfe!

Abgesehen davon dass du Tabellen zum Layout missbraucht hast, ist es nicht ganz soooo schlimm wie ich zuerst gedacht habe:

Keine Charset Angabe im <head>.

Duplicate IDs.

Code:
ul#horiznav, #horiznav ul{/

Code:
horiznav li li{

Mehr ist mir jetzt nicht aufgefallen.
 
Zurück
Oben