2010-11-18 13 views
0

Ich habe einen Flash-Musik-Player von Soundclick in meine Musik-Website eingebettet. Ich habe einen festen Platz, wo der Spieler platziert werden soll. Das Problem ist, dass die Spieler, die die Seite anbietet, zu groß sind. Der untere Teil des Flash-Players ist alles, was ich zeigen muss. Gibt es eine Möglichkeit, dies mit dem Überlauf zu verbergen: versteckt; Methode?Wie bestimmte Teil des Flash-Objekts mithilfe von CSS ausblenden?

Was ich bisher versucht:

ich den Code einbetten in einen div Container platziert und verwendet, um die „overflow: hidden;“ Methode, dann legen Sie eine feste Breite und Höhe fest. Es funktioniert teilweise, zeigt aber nur die obere Hälfte an. Was nutzlos ist, da sich die Playliste und die Buttons in der unteren Hälfte befinden.

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyOTAwNzA2MzY3MzkmcHQ9MTI5MDA3MTMwNTU4NyZwPTE1ODM2MSZkPSZnPTEmbz*5ZWIxNmMyMWQ5NmQ*YWJlODYy/YzdlMmM4NmM4NzMwNCZvZj*w.gif" /><div style="width:300px; height:450px; overflow:hidden;"><center><div><embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /></div><div style="width: 300px; position: relative; top: -390px;"><a href="http://www.soundclick.com/bands/default.cfm?bandID=650303"><img src="http://www.soundclick.com/images/navigation/blank1x1.gif" border="0" width="300" height="250"></a> </div></center></div> 

Antwort

2

Ich habe die Technik verwendet man oft und immer das Gefühl, ein wenig schuldig beschrieben habe.

Aber ich finde immer wieder, dass die einfachste und zuverlässigste Weg ist mein bettet einzuwickeln (gelaicht von js, iframe, was auch immer das Widget verwenden) in einem div, die ich dann auf die Breite und Höhe begrenzen. Schließlich negative Margen mit dem Objekt zu ziehen und aus den Augen.

#container { 
    width:475px; 
    height:65px; 
    overflow:none; 
} 
#container embed { 
    margin-top:-85px; 
    margin-left:-145px; 
} 

ich es finden Der einfachste Weg, um herauszufinden, wo mein Objekt ist, und es ist praktisch wie manchmal Widgets haben flüssige Breiten (100%) und ziehen Sie die Seiten uns Negativer Rand links und rechts funktioniert recht gut und Sie müssen sich nicht mit Positionierung beschäftigen, die für einige Schnittstellenentwickler knifflig sein kann.

(Ich tue dies für die Facebook LikeBox ständig - wie Sie im oben rechts earmilk.com sehen)

+1

+1 für die Aufnahme von Schuld, schüchtern Menschen weg von der Positionierung und ein Beispiel zu bieten :) – danjah

+0

Hier ist der Code zum Einbetten. – Notch

+0

OK, DIESE ARBEITEN DANKE SEHR VIEL. Ich bin immer noch ein Newbie an diesem Material. Ich wusste nicht, dass ich eine separate Klasse für die Einbettung brauchen würde. – Notch

2

Vielleicht versuchen:

#flash_object_container { 
    position:relative; 
} 
#flash_object { 
    position:absolute; 
    bottom:0; 
} 

dies das Flash-Objekt von unten nach oben in Ihrem Behälter, kombiniert mit Überlauf und expliziten Höhen machen sollte es reparieren.

Edit (wie Sie den Code zur Verfügung gestellt haben):

<div style="width:300px; height:450px; overflow:hidden; **position:relative;**"> 

und dann:

<div> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div> 

wird:

<div **style="position:absolute; top:-YOUR_PX_VALUE;"**> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div> 

<div style="width:300px; height:450px; overflow:hidden;"> 

könnte geändert werden

+0

eine bessere Lösung als meine Antwort. – edeverett

+0

tatsächlich, ich denke, dass beide Ihrer Antworten sind ebenso nützlich :) –

0

Versuchen Sie mit der Methode, die Sie versucht haben, das Blitzobjekt mit einer negativen oberen Nummer zu positionieren. (top="-50px;" oder was auch immer Sie brauchen.

Verwandte Themen