Bezugspunkt bzw position ändern

  • Guten nabend zusammen

    habe mal wieder mit einem Code ein problem.
    wie bekomme ich denn wohl das ausgabe textfeld mittig zu dem informationbutton???
    leider ist der bezugspunkt immer die rechte seite des informationsbutton...
    wiederrum muss der wert: "position:absolute;" vorhanden bleiben...
    habe versucht den wert "right:" zuveröndern in "center;" "auto;" aber leider klappt es nicht
    oder geht es garnicht???

    So hier der CODE

    <html>
    <head>
    <title>Testseite</title>
    <style type="text/css">
    <!--
    body {
    margin-top:130px;
    }

    #box {
    color:orange;
    background-color:#ffffff;
    border-top:2px solid #ffffff;
    border-right:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    border-left:2px solid #ffffff;
    width:70px;
    }

    #box a {
    color:orange;
    font:14px courier, sans-serif;
    text-decoration:none;
    background-color:#000000;
    display:block;
    border-top:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-left:1px solid #ffffff;
    text-align:center;
    }

    #box a:visited {
    color:orange;
    background-color:#000000;
    }

    #box a:hover {
    color:#ffffff;
    text-decoration:none;
    background-color:#000000;
    border-top:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-left:1px solid #ffffff;
    }

    #box a:active {
    color:orange;
    background-color:#000000;
    }

    #box a .info {
    display:none;
    }

    #box a:hover .info {
    color:white;
    background:#000000;
    font:14px courier,sans-serif;
    display:block;
    position:absolute;
    top:80px;
    right:auto;
    padding:5px;
    width:695px;
    text-align:center;
    border-top:2px solid #ffffff;
    border-right:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    border-left:2px solid #ffffff;
    }
    -->
    </style>

    </head>
    <body>
    <div align="center">
    <div id="box">
    <a href="#">Information<span class="info">Hier Infos</span></a>
    </div>

    </body>

    </html>


    Wäre schön wenn jemand eine lösung hat.

    MFG
    Otti

  • Einmal editiert, zuletzt von Grevas (21. September 2010 um 20:39)