Script.Aculo.us: Problem mit Slidermenü (CSS)

[Temruk]

Hallo Experten,

auf einer Seite nutze ich die effect.js von script.aculo.us um ein Slidermenü zu implementieren. Das geht auch entsprechend dieser Anleitung wunderbar:

<div id="slidedown_demo" style="top:70px; left:400px; display:none; width:230px; height:200px; background:#ccc; text-align:center;">  
  <div>  
    This is some test content. This is some test content.  
  </div>  
</div>  
  
<ul>  
  <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>  
  <li><a href="#" onclick="$('slidedown_demo').hide(); return false;">Reset</a></li>  
</ul>

Nun möchte ich den Style-Tag oben aber weg haben und lagere das daher in mein CSS aus:

div.slidedown_demo {  
  top:70px;  
  left:400px;  
  display:none;  
  width:230px;  
  height:200px;  
  background:#ccc;  
  text-align:center;  
}

Und dann funktioniert das Menü komischerweise nicht mehr :( Ich habe erst gedacht es würde an meiner Positionierung liegen, aber ich habe das dann mal auf eine ganz flache Seite gepackt und kann dort genau den gleichen Effekt feststellen. Style-Info direkt am Tag: geht, Style-Info im CSS: geht nicht.

Kann mir jemand einen Tipp geben oder die Tomaten von den Augen nehmen :)?

Herzlichen Dank und Grüße,
Temruk

[Dieter]

Hallo Experte,

div.slidedown_demo {

top:70px;
  left:400px;
  display:none;
  width:230px;
  height:200px;
  background:#ccc;
  text-align:center;
}

  
Du kannst alles auslagern, bis auf `display:none`{:.language-css}, dies muß direkt am Element gesetzt werden.  
  
cya

[Temruk]

Du kannst alles auslagern, bis auf display:none, dies muß direkt am Element gesetzt werden.

cya

Hallo Dieter,

danke, wieder etwas gelernt :)

Viele Grüße,
Temruk

[ChrisB]

Hi,

<div id="slidedown_demo"

div.slidedown_demo {
  top:70px;

Dass du mit diesem Selektor das DIV-Element gar nicht ansprichst, ist dir klar?

MfG ChrisB

[Temruk]

<div id="slidedown_demo"

div.slidedown_demo {
Dass du mit diesem Selektor das DIV-Element gar nicht ansprichst, ist dir klar?

MfG ChrisB

Hi ChrisB,

ja, sorry, da hätte ein class="..." stehen sollen. Seitdem ich nun das display:none direkt am DIV habe, geht das. Gibt es dafür eigentlich einen (irgendwo nachlesbaren) Grund, warum das display nicht ausgelagert werden kann?

Viele Grüße und Danke,
Temruk

[ChrisB]

Hi,

Seitdem ich nun das display:none direkt am DIV habe, geht das. Gibt es dafür eigentlich einen (irgendwo nachlesbaren) Grund, warum das display nicht ausgelagert werden kann?

Der Wert von CSS-Eigenschaften ist über das style-Objekt nur auslesbar, wenn der Wert direkt am Element per style-Attribut, oder zuvor bereits per JavaScript gesetzt wurde - und vermutlich macht das Script genau das, den Wert bei der Initialisierung auslesen.

MfG ChrisB