Ergebnis 1 bis 3 von 3

Thema: Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

  1. #1
    HTML Newbie
    Registriert seit
    24.11.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

    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>

    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

    Bitte Link zur Seite posten, damit man sich das ansehen kann

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    24.11.2014
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar

    Die Seite ist noch nicht online. Man kann doch einfach den Quellcode kopieren und es lokal öffnen.

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 15.11.2013, 20:54
  2. Hilfe bei einem php Skript ...ich blick nicht mehr durch
    Von Draketornado im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 11.06.2010, 07:12
  3. Antworten: 1
    Letzter Beitrag: 27.02.2008, 17:28
  4. komme nicht mehr ins Router Menü...
    Von wurmax im Forum Computer - Internet Forum
    Antworten: 9
    Letzter Beitrag: 16.12.2007, 16:25
  5. Dropdown menü funzt nur bei Firefox aber nicht bei I-net Exp
    Von Pump im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 19.10.2007, 22:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •