✔ DIV-Overlay verschiebt Layout

[Genesyst]

Hallo zusammen,

irgendwie bekomme ich gerade ne mittlere Krise.

Ich nutze seit längerem ein Javascript das bei Mouseover über ein Bild, oder einen DIV-Container, etc ein weiteres DIV-Element öffnet, und das ganze oberhalb aller anderen Seitenelemente. Also quasi eine rweiterter Tooltip.

Jetzt versuche ich gerade eine Menuleiste auf unserer Homepage zu implementieren, wie man sie z.B. hier oben sehen kann: Link

Bei mir stellen sich nun zwei Probleme dar:

1. Wird der Inhalt der "unsichtbaren" DIV-Container bei jedem Seiten-reload angezeigt, und verschwindet erst wenn man über das eigentliche Auslöse-Element geht.

2. Ich will das der sich öffnende DIV-Container über dem darunterliegenden Seitenlayout legt. Derzeit schiebt dieser aber das komplette Layout nach unten.

Das Ganze hier ist nur eine Versuchsanordnung, die Seite ist noch nicht fertig, also nicht wundern. Ich poste den Quellcode jetzt mal nicht hierher, da ich denke das man ihn ganz gut aus dem Quelltext auslesen kann.

Irgendwo habe ich einen ganz dicken Denkfehler, und ich weiss nicht wo. :|

Achso, die Versuchsanordnung findet sich hier: Link

Ich hoffe das es ein CSS-Problem ist, und kein JS, ansonsten entschuldige ich mich für das Falschposting.

Ich bedanke mich vielmals für die Hilde im Voraus!

Grüße vom,

Genesyst

 

[Maik]

Hi!

1. Wird der Inhalt der "unsichtbaren" DIV-Container bei jedem Seiten-reload angezeigt, und verschwindet erst wenn man über das eigentliche Auslöse-Element geht.

Das dürfte daran liegen, dass die DIV-Box beim Seitenaufruf zunächst nicht versteckt ist.

2. Ich will das der sich öffnende DIV-Container über dem darunterliegenden Seitenlayout legt. Derzeit schiebt dieser aber das komplette Layout nach unten.

Positionier mal das Element absolut im Anzeigebereich und weise ihm mit z-index eine entsprechende Schichtposition zu.

 

[Genesyst]

Erstmal vielen Dank, das mit dem absolute war die Lösung. Das Blöde ist, im funktionierenden Code war es so auch drin, hatte es warum auch immer nicht mit übernommen.

Zu Punkt 1 nochmal, also das der Inhalt beim Reload angeziegt wird. Kann ich das irgendwie verhinden? Oder ist das eher ein fall für den JS-Bereich? Wenn ich mir vorstelle das da bald 6 DIV-container hängen, und die bei jedem Seitenrealod angezeigt werden, dann sieht das wahrscheinlich ziemlich plöt aus.

Ein anderes Problem was ich habe ist, dass das Fenster an der Position des Mauszeiger geöffnet wird, ich will aber das es unterhalb der Menukante ansetzt, an einer festen position. Ist das eine Sache des JS, oder auch CSS?

Vielen, vielen dank schonmal!

Genesyst

 

[Maik]

Zu Punkt 1 nochmal, also das der Inhalt beim Reload angeziegt wird. Kann ich das irgendwie verhinden?

Selbstverständlich

Erweiter mal die CSS-Angaben für das Element mit der display:none-Angabe:

<div id="id_1" class="tooltip" onmouseout="hideTip();" onmouseover="showTip(event, 'id_1');" style="width: 250px; z-index: 2500;display:none;"><div>List</div></div>

Ein anderes Problem was ich habe ist, dass das Fenster an der Position des Mauszeiger geöffnet wird, ich will aber das es unterhalb der Menukante ansetzt, an einer festen position. Ist das eine Sache des JS, oder auch CSS?

Hierfür musst du zunächst die fettmarkierten Script-Zeilen rausnehmen, damit der Tooltip nicht am Mauszeiger positioniert wird

var xFromMouse = 0;
var yFromMouse = 0;
var hTimer;
tip = null;

function showTip(e, id) {
  if(hTimer) window.clearTimeout(hTimer);

  if(tip == null || (tip != document.getElementById(id))){
    if(tip != null) tip.style.display = "none";

    tip = document.getElementById(id);
    tip.style.display = "block";
    x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
    tip.style.left = (x + xFromMouse) + "px";
    tip.style.top  = (y + yFromMouse) + "px";
  }
}

function hideTip() {
  hTimer = window.setTimeout("tip.style.display = 'none'; tip=null;", 500);
}

und anschliessend im Stylesheet das Element wie gewünscht positionieren:

.tooltip {
position:absolute;
left:0;
top:0;
z-index:10;
}

 

[Genesyst]

Ich weiss gar nicht wie ich dir danken soll? Hat alles mehr als super funktioniert.

Danke dir!

Eine letzte Frage habe ich noch, ich will dazu jetzt keinen neuen Thread aufmachen. Aber bitte keinen Stress, ich will die Hilfe hier nicht überstrapazieren.

Ich möche dem im hintegrundliegenden DIV opacity (durchsichtigkeit) geben. Dazu sieht der CSS-code wie folgt aus:

.tooltipbg{
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
border:1px solid #000000;
width:200px;
height:300px;
background-color:#990000;
color:#000000;
}

Das Problem ist nun das wenn der Code so ausschaut:

<div class="tooltipbg"><div>Test</div></div>

dann wird auch der in dem ersten DIV-container liegende DIV mit dem Text "Test" darin durchsichtig, bzw der Text selber. Die Frage nun wäre wie kann ich nur dem Hintergrund opacity geben, und die darin liegenden Elemente davon ausnehmen. Ich hatte überlegt dem innenliegenden DIV eine eigene Klasse zu geben, und die opacity wieder auf 100 zu setzen, aber irgendwie bekomme ich es nicht gebacken.

Also, wie gesagt viele lieben Dank nochmal, und ein schönes Wochenende,

Genesyst

 

[Maik]

In diesem Fall empfehle ich dir, anstelle des opacity-Filters eine halbtransparente PNG-Grafik einzusetzen.

 

[Genesyst]

Okay, dann werde ich das so machen. Mit PNGs war ich bisher immer vorsichtig, weil es immer noch solche gibt die IE6 nutzen, aber letztendlich kann man es sowieso nicht allen recht machen. Ich hätte gerne viel mehr PNGs genutzt, da ich unsere HP gerade redesigne, aber... naja, die alte Diskussion.

Ich danke dir nochmals, und bis auf weiteres war es das jetzt erstmal

Grüße vom,

Genesyst

 

[Maik]

Für die älteren IE-Versionen gibt's ja diverse Lösungsansätze, wie beispielsweise in dem Artikel http://ff-webdesigner.de/webdesign-tutorial-transparenz-homepage.html:

.orange {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src='orange.png');
}

 

[Genesyst]

Habs mir grad mal durchgelesen, das Problem wäre hier wieder das wie im Artikel beschrieben Links innerhalb/oberhalb dieser Grafiken nicht funktionieren. Ich allerdings nutze Links da es sich hier ja um ein Menu handelt.

Habe jetzt ne Kompromisslösung gefunden, habe die opacity auf 90 gesetzt, und wenn ich dann helle Schriftfarben nutze geht es auch ganz gut.

 

[Maik]

Sorry, ich wußte nicht, dass in der Box Links untergebracht werden sollen. :-(