[ERLEDIGT] Dynamische Fläche

eddcapone · 20 April 2014

Hallo, ich versuche gerade eine rechteckige Fläche mit einigen Links darin erscheinen zu lassen, sobald ich mit der Maus auf einen Teil dieser Fläche zeige. Das ganze funktioniert soweit ganz gut, jedoch habe ich ein kleines Problem, und zwar verschwindet die Fläche wieder sobald ich auf einen Link drücken möchte. Ich hoffe jemand erkennt den Fehler und kann mir helfen.

Hier ist mein bisheriger Code:

main.html

HTML:

<!DOCTYPE html>
<html>
    <meta http-equiv="refresh" content="1">

    <head>
        <link type="text/css" rel="stylesheet" href="style/standard_style.css"/>
            <title>Chat Test</title>
        </head>

    <body>

        <div id="outer_div">

            <div id="inner_div" ">
                 <br>
                 <a href="learn/global_vars.php" >Globale Variablen</a>
                <a href="learn/global_vars.php" >Globale Variablen</a>
                <a href="learn/global_vars.php" >Globale Variablen</a>
                <a href="learn/global_vars.php" >Globale Variablen</a>
                <a href="learn/global_vars.php" >Globale Variablen</a>     
            </div>

                <p>Lernen</p>
        </div>

    </body>
</html>

standard_style.css

Code:

/*--------------#outer_div----------------*/

#outer_div
{
    position:fixed;
    width:250px;
    height:250px;
    background-color:#00FFAA;

    top:-222px;
}

#outer_div:hover
{
    top:0px;
}

#outer_div p
{
    text-align:center;
    margin-top:222px;
    padding-top:4px;
    padding-bottom:4px;
}

#outer_div p:hover
{
    background-color:#AAAAFF;
}

/*--------------#inner_div----------------*/

#inner_div
{
    position:absolute;
    width:200px;
    height:200px;

    margin-left:24px;
    margin-top:20px;


    background-color:#33FFCC;
}

#inner_div:hover
{
    background-color:#0AFFAA;
}

#inner_div a
{
    letter-spacing:2px;
    line-height:36px;

    margin-left:10px;
}

#inner_div a:hover
{
    background-color:#FFFFAA;
}

Meine Idee war es über die CSS Datei zu lösen, indem ich die Fläche am Anfang hochstelle, und sobald die Maus darauf zeigt, sie herunterfahren lass.

#outer_div
{
position:fixed;
width:250px;
height:250px;
background-color:#00FFAA;
top:-222px;
}
#outer_div:hover
{
top:0px;
}

Danke im voraus für jede Hilfe!

Gruß eddcapone

PS: Ich wusste nicht ob ich es hier oder im CSS Forum öffnen soll :/

Ups, wie peinlich, ich habe die Lösung gefunden... xD

Vielleicht habt ihr ja lust die Lösung selbst zu finden, deswegen schreibe ich es in einen Spoiler Tag:

Die Seite wird mit diesem Code jede Sekunde aktualisiert, was natürlich den anschein erweckt, das ein Fehler passiert. Lösung: meta Tag ganz am Anfang entfernen. ^^

Wie peinlich

sry
Gruß eddcapone

[ERLEDIGT] Dynamische Fläche

eddcapone

Neues Mitglied

Neueste Beiträge