MouseOver Menü schiebt den Rest weg.

Status
Nicht offen für weitere Antworten.

Crazy_down

Erfahrenes Mitglied
Hallo,
Ich habe in einer Zeitung einen Interessanten Artikel zu CSS gefunden und mich ein wenig damit beschäftigt.

Erklärt war darin ein Menü das aufgeht wenn man mit der Maus darüber fährt.
Also ein Fragezeichen ( TEXT ) ein Fenster das auf geht wo weiterer Text drinne steht.

Dabei schiebt das fenster was aufgeht, sich aber über den Text, Bild etc. weg.
Ich möchte das es einfach drüber geblendet wird.
Also habe ich auf selfhtml geschaut und da einen sogenannten z-index gefunden.
So wie ich das aber verstanden habe, funktioniert das nur wenn ich beiden eine feste Position geben würde und das möchte ich nicht.

Gibt es eine andere möglichkeit ?
Ich hänge mal eine datei an wie dieses Fenster aussieht. ( einfach wieder in .html umbennen)

Danke schonmal
greetz
crazy_down
 

Anhänge

Zuletzt bearbeitet:
Hi,

wenn sich das CSS-Popup über den Text legen soll, dann kommst du nicht um eine absolute Positionierung der Popup-Box herum. Wenn das umschliessende DIV .info zudem eine relative Positionierung erhält (hierbei sind keine Positionsangaben erforderlich), lässt sich das Popup auch innerhalb dieses DIVs positionieren.

P.S. Der Farbname lautet gray und nicht grey.
 
Ok. danke.
Solle es denn in etwas so aussehen ?

HTML:
.info{
width:60px;z-index:2;
position:absolut;


}

und bei dem text

HTML:
<div style="z-index:1;position:relative;">
fdsfdsfdsf
</div>
 
Nein, die Positionierungsart muß genau entgegengesetzt vorgenommen werden ;)

Code:
.info{
width:20px;
z-index:99px;
position:relative;
}

.info a{
color:#FF0000;
font:bold 18px Arial;
text-decoration:none;
backround-color:#006666;
display:block;
padding:2px 5px 3px 5px;
}

.info a:hover{
color:#000000;
opacity:0.5;
background-color:CCCCFF;
width:350px;
}

.info a span {display:none;}

.info a:hover span{
position:absolute;
left:0;
top:20px;
opacity:0.5;
width: 250px;
color:#000000;
background-color:#ffffff;
font:14px arial;
display:block;
z-index:2;
padding: 50px;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück