Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

Kufifreund · 24 November 2014

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>

Tronjer · 24 November 2014

Kufifreund schrieb:
<!DOCTYPE HTML PUBLIC "-Ω">

Was soll das sein?

Kufifreund · 24 November 2014

Oh, das hatte ich wahrscheinlich durch irgendetwas mal so übernommen. Danke, schon geändert..

Kufifreund · 26 November 2014

Hat wirklich niemand eine Idee?

scbawik · 26 November 2014

Kufifreund schrieb:
Hat wirklich niemand eine Idee?

Ich verstehe das Problem nicht wirklich.
Ein Link zur Seite wäre besser.

Aber natürlich kannst du z-index verwenden.
Nur bei position:static nicht.

Kufifreund · 26 November 2014

Die Seite ist noch nicht online. Du kannst den Quellcode ja einfach mal kopieren und die Seite bei dir lokal öffnen.

scbawik · 26 November 2014

Kufifreund schrieb:
Du kannst den Quellcode ja einfach mal kopieren und die Seite bei dir lokal öffnen.

Na gut, ausnahmsweise.

Code:

#horiznav li {
  z-index:2;
}

Bitte ;)

Kufifreund · 26 November 2014

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;
}

scbawik · 27 November 2014

Kufifreund schrieb:
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.

Kufifreund · 27 November 2014

Bei mir werden keine Fehler angezeigt? Was meinst du zum Beispiel?

Ich habe hinter der position:relative das ; vergessen

.. Danke für die Hilfe!

scbawik · 27 November 2014

Kufifreund schrieb:
Bei mir werden keine Fehler angezeigt? Was meinst du zum Beispiel?

Ich habe hinter der position:relative das ; vergessen .. 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.

Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

Kufifreund

Neues Mitglied

Tronjer

Senior HTML'ler

Kufifreund

Neues Mitglied

Kufifreund

Neues Mitglied

scbawik

Senior HTML'ler

Kufifreund

Neues Mitglied

scbawik

Senior HTML'ler

Kufifreund

Neues Mitglied

scbawik

Senior HTML'ler

Anhänge

Kufifreund

Neues Mitglied

scbawik

Senior HTML'ler

Neueste Beiträge