Giga: Hover Content!? :(

Beitrag lesen

SELF-Forum

Hover Content!? :(

Giga
+1 Informationen zu den Bewertungsregeln

Hi und Danke

hab nun den Hover effekt hinbekommen ABER :(
mein Content Element (div) bleibt nun am Menüelement (li) hängen, das heißt, wenn ich auf ein menüfeld in der mitte gehe (z.B. Menu 3) dann wird das Content Element links an das Menü Element angepasst. Es ist also nicht mehr links von der Seite, sondern mitten im Bild. wie bekomme ich das hin?

Hab schon mit "position:fixed" versucht, aber das ist doof, wenn sich die auflösung verändert bzw. wenn man den Browser kleiner Zieht. Scrollen soll man egentlich nicht.

ich poste mal den Quelltext mit, vllt wirds dann etwas verständlicher:

  
<html>  
    <head>  
        <title>Test</title>  
        <link rel="stylesheet" href="default.css" type="text/css" media="screen, projektion" />  
    </head>  
    <body>  
        <div id="HP">  
  
            <ul id="Navigation">  
                <li><a href="#">Startseite</a>  
                    <div class="content"></div></li> <!-- Hier ist das Content Element im Menü element -->  
                <li><a href="#">Startseite</a>  
                    <div class="content"></div></li>  
                <li><a href="#">Startseite</a></li>  
                    <div class="content"></div> <!-- So sollte es eigentlich sein -->  
                <li><a href="#">Startseite</a></li>  
                    <div class="content"></div>  
            </ul>  
  
        </div>  
    </body>  
</html>

body {  
    font: normal 100.01% Helvetica, Arial, sans-serif;  
    color: black;  
  }  
  
    #HP {  
        Position:relative;  
        margin: 0 auto;  
        padding: 0;  
        width: 1000px;  
        height: 700px;  
        background-color: #999999;  
    }  
  
  
  #Navigation {  
    margin: 0;  
        padding: 0;  
        height:30px;  
    text-align: center;  
        background-color: black;  
  }  
  
  #Navigation li {  
    list-style: none;  
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */  
    position: relative;  
    margin: 0.4em;  
        padding: 0;  
  }  
  
  #Navigation .content {  
        position:absolute;  
        width:400px;  
        height:400px;  
        background-color: #000000;  
        top:30px;  
        left:0px;  
        display:none;  
  }  
  
  #Navigation li:hover .content {  
        display: block;  
  }  
  
  #Navigation a {  
    display: block;  
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */  
    padding: 0.2em 1em;  
    text-decoration: none;  
        font-weight: bold;  
    color: maroon;  
        background-color: #ccc;  
  }  
  
  #Navigation a:hover {  
    color: white; background-color: gray;  
  }

Und nicht über die Farben wundern, der CSS-Code ist zu 50% aus http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern@title=SelfHTML.

wie kann ich nun mein Coontent Element an meinem Haupt Element (id=HP) ausrichten?

MfG Giga

Beitrag melden
+1
Informationen zu den Bewertungsregeln