Infobox Fenster immer zentrieren

[joergi]

Halli Hallo,

ich habe mir eine Infobox zusammengebastelt, die soweit auch funktioniert. Bewegt man die Maus über "[info]", wird diese aufgerufen. Leider wird diese nur bei einer Auflösung von 1980 x 1080 zentriert ausgegeben. Je geringer die Auflösung ist, desto mehr nach rechts verschiebt sich das Fenster. Habe auch schon versucht, anstatt

left: 35em;

den Befehl

left: auto;

zu verwenden. Hierbei wird jedoch das Fenster direkt neben dem link angezeigt. Im eigentlichen Script, ist der Info Befehl jedoch ziemlich rechts eingebaut, so das dann ein großer Teil der Infobox nicht gezeigt wird.

Bin leider noch Anfänger. Gibt es dafür überhaupt eine Lösung? :|

Danke im voraus für Eure Hilfe

<style type="text/css">
       a.infobox {
            text-decoration: none;
            border-bottom: none;
                    }
        a.infobox:hover {
            cursor: pointer;
            color: #2543cf;
            background: #ffffff;
        }
        a.infobox span {
            visibility: hidden;
            position: absolute;
            left: -99em;
            text-decoration: none;
            padding: 0.4em;
            margin-top: 2.0em;
            padding:-200px;
            line-height: 120%;
            text-align:left;
            letter-spacing: 0.1px;
            white-space: nowrap;
        }

        a.infobox:hover span {
            visibility: visible;
            left: 35em;
            color: #000000;
            background: white;
            border: 1px solid #c30;
        }
</style>
<font color='#2543CF'><b></b></font><font size='3'><a class='infobox' href='#'>[info]<span>
Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test.Das ist ein Test.Das ist ein Test.Das ist ein Test.<br>
Das ist ein Test. Das ist ein Test. Das ist ein Test. Das ist ein Test.Das ist ein Test.Das ist ein Test.Das ist ein Test.
</span></a>

 

[threadi]

Absolut positionierte Elemente zentriert man so horizontal:

div {
 left: 50%;
 margin-left: -250px;
 width: 500px;
}

Vertikal wäre analog mit top und margin-top und height.

Da Du ein span dafür verwendest, solltest Du neben der festen Breite auch noch "display: block;" angeben.

 

[joergi]

Jau danke,

klappt perfekt :mrgreen: