div cursor title und eine Funktion hinzufügen

andynail

Grünschnabel
Hallo zusammen

ich würde gerne divs als Schaltflächen benutzen, und will denen dafür auch einen anderen Mauszeiger zuweisen. Und meine Zeile lautet bisher:

HTML:
<div name="SetupButton" style="background-color:#000; width:60px; height:60px; background-image:url('Pictures/Symbole/1 - I69.ico'); background-repeat:no-repeat; background-position:50% 50%; cursor:pointer" title="Link löschen" onclick="alert('hallo')"></div>

Doch der IE führt weder die Funktion aus, noch wird der gewünschte Mauszeiger und auch nicht der title angezeigt.

Was muß ich jetzt machen? Und ich bedanke mich schonmal für Hilfe.

Gruß Andreas
 
Zuletzt bearbeitet:
Ach shitt das liegt wohl an meiner Seite. Ich hatte jetzt mal die Zeile in ein leeres html Dokument gesetzt und da funktioniert alles. Doch weis ich nicht was ich zu ändern hätte.

Und jetzt kann man mir wohl nicht weiterhelfen. Doch was bitte versperrt das anklicken, den Mauszeiger und die Anzeige des title? Also ich bedanke mich.

Gruß Andreas
 
Ein Link zu der vollständigen Seite dürfte hier Licht ins Dunkel bringen.

Der Umschreibung zufolge lässt es erstmal die Vermutung zu, dass das Element von einem anderen in der Schichtposition überdeckt wird.
 
Zuletzt bearbeitet:
Hallo

ein Link zu meiner Seite existiert nicht da es sich bei der Seite um eine Linksammlung für den lokalen PC und für einen usb stick handelt. Die Seite kommt nicht ins Netz, da wenn vorhanden Benutzerdaten angezeigt werden. Und ja das div wird von anderen divs umschlossen:

<div id="Sidebar" style="position:absolute; width:120px; height:100%; top:0; left:4%; background-image:url('Pictures/hintergrund-g-250.gif'); background-repeat:repeat-y;" onclick="top.ActiveLink = undefined; HideDaten()">
<div id="FarbeBar" style="position:absolute; top:0; left:0; width:100%; height:100%; opacity: 0.4; filter:alpha(opacity=40)" onclick='top.ActiveLink = undefined; HideDaten()'></div>
<div id="SetupBar" style="position:absolute; top:50%; margin-top:-100px; left:10px; width:100px; height:200px; display:none; background-color:#fff; opacity: 0.8; filter:alpha(opacity=80)"></div>
<div id="MenueVerwaltung" style="position:absolute; top:50%; margin-top:-65px; left:10px; width:100px; display:none; z-index:1; left:30px">
<div name="SetupButton" style="position:relative; background-color:#000; width:60px; height:60px; background-image:url('Pictures/Symbole/2 - I134.ico'); background-repeat:no-repeat; background-position:50% 50%; cursor:pointer; margin-bottom:10px; z-index:1" title="Link kopieren" onclick="alert('hallo')"></div>
<div name="SetupButton" style="position:relative; background-color:#000; width:60px; height:60px; background-image:url('Pictures/Symbole/1 - I69.ico'); background-repeat:no-repeat; background-position:50% 50%; cursor:pointer; z-index:1" title="Link löschen" onclick="alert('hallo')"></div>
</div>
</div>

Aber es kann doch nicht sein das die umliegenden divs dafür sorgen das mit denen nix passiert.

Also wie nun?

Danke gruß Andreas
 
HTML:
<div id="MenueVerwaltung" style="... display:none; ...">

Dieses <div> umschließt dein eingangs gezeigtes Element, und wird mit display:none nicht angezeigt, was somit gleichermaßen für seine beiden Nachfahren gilt.

Dieses Verhalten zeigt sich auch nicht ausschließlich im IE, sondern in allen Browsern, und ist deinem CSS folgend völlig korrekt.

Übrigens besitzt dieser Elementtyp laut seiner HTML-Attribut-Referenz (http://de.selfhtml.org/html/referenz/attribute.htm#div) überhaupt kein name-Attribut.
 
Zuletzt bearbeitet:
Hallo

ja dieses div soll auch bis zum Aufruf einer Funktion ausgeblendet bleiben. Und erst dann ist es zu sehen und das align center wollte nicht funktionieren. Aber der Firefox zeigt alles so wie gewünscht, deshalb schrieb ich vom IE.

Gruß Andreas
 
Egal welcher Browser (FF, IE, Opera, Safari, usw.), mit deinem präsentierten Quellcode-Auszug in dieser Form zeigt keiner von ihnen diese beiden <div>'s (name="SetupButton") an, sondern man blickt auf eine leere weiße Seite, da zum einen das Hintergrundbild von "Sidebar" nicht vorliegt, und keines von ihnen einen weiteren Inhalt (z.B. Text) besitzt.

Erst wenn ich besagte CSS-Eigenschaft für "MenueVerwaltung" entferne, oder sie in display:block umwandel, sind sie in allen Browsern sichtbar, und wie schon von Sven eingangs geantwortet, und von dir auch bestätigt, wird der Code (Mauszeiger, Tooltip, Alert) wunschgemäß ausgeführt.

Möglicherweise soll besagtes <div> mit der ID "MenueVerwaltung" diese beiden "SetupButtons" überhaupt nicht umschließen. In diesem Fall wäre einer der schliessenden </div>-Tags am Ende deines Codeschnipsels umzupositionieren:

HTML:
<div id="Sidebar" ...>
    <div id="FarbeBar" ...></div><!-- Ende "FarbeBar" -->
    <div id="SetupBar" ...></div><!-- Ende "SetupBar" -->
    <div id="MenueVerwaltung" ...></div><!-- Ende "MenueVerwaltung" -->
    <div id="SetupButton_1" ...></div><!-- Ende "SetupButton_1" -->
    <div id="SetupButton_2" ...></div><!-- Ende "SetupButton_2" -->
</div><!-- Ende "Sidebar" -->

Mit einer entsprechenden Einrückung des Quellcodes lässt sich das verschachtelte Gebilde einfacher überblicken und auf seine Richtigkeit kontrollieren, im Vergleich zu deiner Aneinanderreihung der einzelnen Blöcke.

Und da die DIVs Bezeichner besitzen, sollten ihre CSS-Formatierungen in ein zentrales Stylesheet ausgelagert werden, was somit die style-Attribute in ihnen erübrigt, und so u.a. deinen HTML-Code noch übersichtlicher gestaltet - hier exemplarisch für "Sidebar":

CSS:
#Sidebar {
position:absolute; 
width:120px; 
height:100%; 
top:0; 
left:4%; 
background:url('Pictures/hintergrund-g-250.gif') repeat-y;
}
HTML:
<div id="Sidebar" onclick="top.ActiveLink = undefined; HideDaten()">
 
Zuletzt bearbeitet:
Ok hallo

es war das Problem mit z-index. Ich hatte. Ich hatte der SideBar nicht z-index:1 zugewiesen und schon steht ein anderes Objekt, zur Ausrichtung des Datenbereichs, drüber und im IE funktionierts nicht. Beim Firefox hatte ich ja keine Probleme damit und so schrieb ich nur vom IE.

Danke gruß Andreas
 
Zurück