Hover box

Webdesign & Technik HTML & CSS
1

Hi
ich habe in meinem Forum eine hover-box erstellt:
Wenn man mit der Maus über einen Link fährt, öffnet sich darunter eine neue vorher versteckte box. diesen quellcode muss ich leider ganz an das ende des quellcodes schreiben, damit die versteckte box in einer höheren ebene angezeigt wird, als der normale text auf der site.

meine frage:
kann man den effekt, dass die box als höchste ebene angezeigt wird auch mit css erzeugen? ich würde den code nämlich gerne am anfang meines skriptes schreiben

lg
Martin

2

hallo,

meinst du vielleicht die eigenschaft “z-index”? ich wüsste zwar nicht, dass das was mit der position des codes im html-teil zu tun hat aber…
poste doch bitte einmal einen link, dann können wir uns das problem besser ansehen.

mfg
emil

3

Da sollte man noch erwähnen, daß z-index bei positionierten Elementen wirkt.
Wird ein Element allerdings positioniert, so wird es ohnehin über anderen, nicht positionierten
Elementen angezeigt. Insofern muß man da wirklich sehen, was wie im Quelltext steht, um
sagen zu können, was man da im CSS notieren muß.

4

danke für die antwort.

ich habe die einlogg-funktion meines forums mal kurz deaktiviert, damit ihr gucken könnt:
http://film.bplaced.de/Forum/index.php

wenn man mit der maus über wichtig fährt öffnet sich darunter eine vorher versteckte box.
hier der quellcode:

html

<a id="info"> Wichtig <span> Bitte ladet eure Profilbilder noch einmal hoch, denn ich habe jetzt die Anzeige der Profilbilder in soweit geändert, dass beim Profil eine verkleinerte Version des Bildes angezeigt wird. Das hat den Vorteil, dass die Ladedauer nicht so lange ist. </span> </a>

css

[code]a#info {
position:absolute;
left:100px;
top:110px;
width:570px;
height:20px;
background-image:url(…/Grafiken/info.png);
padding:15px;
font-size:20px;
text-align:center;
}
a span {
display:none;
}
a#info:hover span {
display:block;
background-image:url("…/Grafiken/info2.png");

position:relative;
top:20px;
height:200px;

padding:10px;
border:5px solid black;

font-size:18px;
text-align:left;
color:black;
}[/code]

lg
Martin

5

@ hoffmann:

bei mir sind alle elemente positioniert.
das mit z-index gucke ich mir mal an.
lg
Martin

6

Wenn später im Quelltext vorhandene Element wie #index natürlich auch positioniert sind, werden
diese späteren Elemente über zuvor positionierten Elementen angezeigt.
z-index braucht man dann, um dies zu ändern

Ob es allerdings unbedingt sinnvoll ist, alles absolut zu positionieren, ist nochmal ein komplett
anderes Problem. Wenn man das macht, sollte man sich jedenfalls mit CSS und der Problematik
verschieden großer Anzeigebereiche und Schriftgrößen bei verschiedenen Nutzern schon
sehr gut auskennen ;o)
Ich meine, das kann man prinzipiell schon machen, nur eher nicht so, wie es in deiner CSS-Datei
steht ;o)

Was ich noch vergaß: Fehler beim HTML solltest du natürlich erst beseitigen und das
ordentlich strukturieren, bevor du mit CSS anfängst ;o)

7

Ich nehme an, du hast die Funktion nur im FF getestet, denn da wird bei mir die Box über dem restlichen Inhalt angezeigt. Im Opera allerdings ist die Box unter dem Text und im IE funktionierts gar nicht.

8

dass es im iE nicht geht ist mir auch grade aufgefallen, aber momentan habe ich noch keinen lösungsansatz.
und bei mir ist die box im ff und im opera jetzt wieder über dem inhalt, da ich die box im quellcode wieder nach ganz hinten verschoben habe. ich will meine forumsbesucher ja nicht irritiren

lg
Martin

9

ok jetzt klappt es dankeschöön.
ich mache die einlogg-funktion wieder rein, sodass man mit dem link nicht mehr viel anfangen kann.
der admin kann das thema ja bitte schließen.