Problem mit Overflow-Hidden

[Caro Mühlheim]

Hallo zusammen,
ich bin neu im Forum und hoffe jemand von euch kann mir helfen. Ich habe auf meiner Startseite eine Meta erstellt, die auf klick ein- und ausfahren soll. Die Meta besteht aus einem Hintergrundbild und verlinkten Menüpunkten in Form von Listen. Ich habe beide Elemente (Bild und Links) in ein Gesamt-div gepackt um es im Anschluss wie hier http://jsfiddle.net/DjQUc/3/ zu animieren. Der Befehl overflow-hidden funktioniert bei mir aber nicht... er verbreitert mir lediglich das Browserfenster nach rechts, statt den überstehenden Bereich weg zu schneiden. Hat jemand einen Tipp für mich? Hier mal mein Code:

<div id="metaslider" style="overflow: hidden">
<img src="http://www.tutorials.de/Images/HG_Startseite_Meta.png" width="288" height="289" alt="Meta" />
    <ul id="textmeta">
        <li><a href="startseite.html">Startseite</a></li><li>–</li>
        <li><a href="#">Upload</a></li><li>–</li>
        <li><a href="downloads.html">Download</a></li><li>–</li>
        <li><a href="#">Suche</a></li>
    </ul>
</div>

mein CSS dazu:

#metaslider {
	position: absolute;
	width: 288px;
	height: 289px;
	top: 51px;
	right: -200px;
	z-index: 15px;
}

#textmeta {
	position: absolute;
	top: 83px;
	right: 73px;
	z-index: 20;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	color: #565658;
}

#textmeta a {
	color: #565658;
}
	
#textmeta a:hover {
	color: #9c1e1f;
}

#textmeta li {
	list-style: none;
}

 

[para_noid]

Hallo Namensvetterin

Füge mal folgendes hinzu

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

Das Problem bei deinem Quelltext ist, dass du #metaslider das overflow gegeben hast. Damit würden die inneren Elemente von #metaslider selbst verschwinden, wenn sie größer sind als #metaslider. Du möchtest aber, dass #metaslider verschwindet, wenn es größer als das Elternelement (hier: body) ist; demzufolge muss das overflow:hidden auch auf das übergeordnete Element angewendet werden.

 

[Caro Mühlheim]

Hey danke dir!

Die Funktion im Body hat leider nicht geklappt, weil es mir dann meinen Footer abgeschnitten hat. Aber der Tipp mit dem nächstgrößeren Element war Gold wert! Ich habe einfach um die gesamte Meta noch mal ein div gebaut und dem overflow hidden gegeben.

Eine andere Frage hätte ich noch zu JavaScript. Ich habe meine mein Menü mit Hilfe von JavaScript zu einem Dropdown-Menü gemacht. Funktioniert auch soweit... wie kann ich aber dem Oberpunkt sagen, dass er (wenn die Unterpunkte ausgefahren sind) zum Image "aktiv" wechseln soll (hat bei mir eine andere Farbe) Wenn ich das Bild einbinde, funktioniert bei mir der Hover-Effekt und das Ausklappen der Unterpunkte nicht mehr?

Das ist mein Code: http://jsfiddle.net/5e2fF/4/