# div cursor title und eine Funktion hinzufügen



## andynail (14. August 2010)

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:


```
<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


----------



## Sven Mintel (14. August 2010)

Moin Andreas,

ich würde sagen, leere mal deine Browsercache
Mein IE(6,7,8) macht alles, was da steht.


----------



## andynail (14. August 2010)

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


----------



## SpiceLab (14. August 2010)

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.


----------



## andynail (14. August 2010)

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%; cursorointer; 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%; cursorointer; 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


----------



## SpiceLab (14. August 2010)

```
<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.


----------



## andynail (14. August 2010)

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


----------



## SpiceLab (14. August 2010)

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:


```
<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":


```
#Sidebar {
position:absolute; 
width:120px; 
height:100%; 
top:0; 
left:4%; 
background:url('Pictures/hintergrund-g-250.gif') repeat-y;
}
```


```
<div id="Sidebar" onclick="top.ActiveLink = undefined; HideDaten()">
```


----------



## andynail (14. August 2010)

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


----------

