Hover Content!? :(

[Giga]

Hallo

ich bin zwar schon ein wenig mit HTML vertraut aber heute bin ich echt an meine Grenzen gestoßen. Ich baue mir immoment eine Seite für die Arbeit. Diese Seite soll eine "Schnellauswahl" sein, dass heißt, das ich dort Links hinterlegen will, zum schnellen aufrufen. Es sollen 9 Links mit Bild auf jeder Seite sein (Sollen also mehrere Seiten sein). Ich habe das auch so alles fertig, aber nun mein Problem.

Kann leider kein Bild Hochladen um das mal Grafisch zu zeigen, sorry.
Ich versuchst mal mit Strichen :) :

____________________________________________________________________
|  Menu1    |     Menu2      |       Menu3       |      Menu4      |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
____________________________________________________________________
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
--------------------------------------------------------------------
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
--------------------------------------------------------------------
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
|                    |                     |                       |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
(hoffe er behällt die Leerzeichen)
so sieht das in etwa aus. Nun will ich eben, das man nicht jede Seite (Menu1-menu4) neu laden muss, sondern das sich per hover über das Menü der Content mit den Bild-Links ändert.
Gibts da ne Möglichkeit? CSS Javascript?

Ich bin für alles was keinen Webserver braucht offen :)
Und danke für die Mühen :)

MfG Giga

[Take]

Moin,

Hallo

so sieht das in etwa aus. Nun will ich eben, das man nicht jede Seite (Menu1-menu4) neu laden muss, sondern das sich per hover über das Menü der Content mit den Bild-Links ändert.

Meinst du wirklich hovern? Dann CSS.

Gibts da ne Möglichkeit? CSS Javascript?

Beides. Kommt drauf an wie barrierefrei du sein willst. Besser ist CSS, da JavaScript deaktiviert sein kann.

Informiere dich für den CSS-Weg über
    - <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Die Eigenschaft display>
    - <http://de.selfhtml.org/css/formate/zentrale.htm#nachbar-selektor@title=Den Nachbar Selektor>

Für den JavaScript-Weg über
    - http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=getElementById()
    - http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement()
    - <http://de.selfhtml.org/javascript/objekte/node.htm@title=Die Eigenschaften der Elementknoten>

Letztendlich ist der CSS-Weg zu empfehlen. Ist einfacher und barrierefrei(er).

Ich bin für alles was keinen Webserver braucht offen :)
Und danke für die Mühen :)

MfG Giga

Gruß,
Take

[Giga]

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

[Giga]

Ich habs geschaft. danke für die Hilfe :)
es läuft zwa nicht unter IE aber mir Reicht Firefox, was anderes Benutze ich auf der Arbeit auch nicht.

Quellcode ist leider zu lang für einen Post.

An sonsten, ich habe mir das Dropdown menü von SelfHTML angeschaut, und das auf ein Div element umgearbeitet. und es geht ganz gut.

MfG Giga

[Jeremy]

Hallo!

Gibts da ne Möglichkeit? CSS Javascript?

CSS! Weil performanter, besser und weniger #evil(tm).

Folgende Idee, falls du keine haben solltest:

setze den "Menü-Button" mit dem jeweils zugehörigen Inhalt in einen Container, pack den Inhalt in einen separaten Container und steuer den separaten Container per :hover an.

Liebe Grüße aus Norddeutschland.