| Autor |
Nachricht |
TWEAK
Threadersteller
Dabei seit: 21.06.2006
Ort: TBB
Alter: 39
Geschlecht: 
|
Verfasst Mo 13.08.2007 12:00
Titel CSS position:reletavie |
  |
|
Hallo, ich möchte gerne eine Flashdatei in html einbinden und mittels css 2div boxen über dem Flashfilm einblenden. Soweit so gut.
Flash ist eingebunden.
Die DIV box wird auch mittels position:relative über dem Flashfilm angezeigt.
HTML CODE:
| Code: |
<div id="flash_body"><!-- Huelle des gesamten teils -->
<div id="leiste_fake">
<div id="menue_box_1"> </div>
</div>
<div id="flash_box"><!-- Flash file wird um ein px kleiner gemacht wie beabsichtigt, da die fake_leiste 1px braucht-->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="718" height="324">
<param name="movie" value="solar-art.swf">
<param name=quality value=high>
<param name="wmode" value="transparent">
<embed src="solar-art.swf" width="718" height="324" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="opaque"></embed>
</object>
</div>
</div>
|
CSS CODE:
| Code: |
body {
margin:0px;
background-color:#FFFFFF;
}
#flash_body {
margin:auto;
padding:0px;
width:718px;
height:325px;
}
#leiste_fake {
float:left;
width:718px;
height:1px;
line-height:1px;
padding:0px 0px 0px 0px;
background-color:#000000;
}
#flash_box {
float:left;
padding:0px 0px 0px 0px;
width:718px;
height:324px;
}
#menue_box_1 {
float:left;
background-image: url(../image/menue_button_oben.gif);
width:256px;
height:97px;
position:relative;
top:112px !important;
top:225px;
left:462px;
}
#menue_box_2 {
float:left;
background-image: url(../image/menue_button_unten.gif);
width:256px;
height:110px;
position:relative;
top:215px !important;
top:320px;
left:206px;
}
|
Kurze Erklärung:
Die leiste_fake is dazu da um die menue_box über dem Flash film zu positionieren. Funktioniert im Firefox wunderbar. Im Internet Explorer allerdings macht er anstatt einer 1px div, eine box die so gross wie die menue_box ist.
Kennt da jemand rat?
|
|
| |
  |
 |
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mo 13.08.2007 12:56
Titel
|
|
|
dein code kommt mir sehr umständlich vor, kannstu einfach nochmal erklären, was genau du brauchst?
ich habe verstanden:
flash film 718 x 325 px, darüber ein (?) div mit 718 x 1 px?
wozu brauchst du da ein 1px div, würdes nicht einfach ein border tun?
wie auch immer, schreib bitte einfach nochmal genau, was es am ende werden soll.
|
|
| |
|
|
|
Anzeige
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mo 13.08.2007 13:00
Titel
|
|
|
|
Versuchs mal noch mit nem font-size:0;
|
|
| |
|
|
TWEAK
Threadersteller
Dabei seit: 21.06.2006
Ort: TBB
Alter: 39
Geschlecht:
|
Verfasst Mo 13.08.2007 13:32
Titel
|
|
|
oke ich versuch es nocheinmal zu erklären 
also...
Ausgangsgedanke:
Es soll ein Flashfilm geben der, in der unteren rechten Ecke 2 Menuebuttons hat. Diese 2 Menuebuttons sollen aber kein Flash sein, sondern mit CSS darübergelegt werden. Die obere rechte Ecke, direkt über den 2 CSS Buttons soll dann also auch Flash sein. Ergo spielt der Flashfilm dann also auch unter den 2 CSS Buttons.
Versuche:
Nach einigen Versuchen bin ich dann darauf gestoßen, dass wenn ich den Flashfilm um 1px kleiner mache und eine 1px große div direkt über den Flashfilm lege, das ich dann die 2 Boxen mit position:relative an dieser 1px div ausrichten kann.
Funktioniert soweit auch im Firefox. Im Internet Explorer allerdings macht er mir anstatt eine 1px große div, eine div die so groß ist wie die box, die mit position:relative an dieser "1px" großen div ausgerichtet werden soll.
OKE vll auch ein bisschen umständlich beschrieben deswegen Versuch ich es ma mit nem Bild.
bild_ie
Bei font-size:0; macht er die div schon kleiner ist aber immernoch nicht so wie ich möchte.
Auch andere Lösungsvorschläge sind erwünscht.
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mo 13.08.2007 13:36
Titel
|
|
|
und was spricht gegen position: absolute; mit right: 0; und bottom: 0; innerhalb eines divs, dass passgenau den flashfilm umschließt?
also
| Code: |
<div class="flashkasten">
hier den flashfilmcodebla
<img class="button1" height="50" schlachmichtot />
<img class="button2" height="50" schlachmichtot />
</div>
|
| Code: |
.flashkasten {
width: 718px;
height: 325px;
position: relative;
}
.button1 {
position: absolute;
right: 0;
bottom: 0;
display: block;
}
.button2 {
position: absolute;
right: 0;
bottom: 50px;
display: block;
}
|
Zuletzt bearbeitet von fuchsbau am Mo 13.08.2007 13:51, insgesamt 3-mal bearbeitet
|
|
| |
|
|
TWEAK
Threadersteller
Dabei seit: 21.06.2006
Ort: TBB
Alter: 39
Geschlecht:
|
Verfasst Mo 13.08.2007 13:47
Titel
|
|
|
du meinst also eine div mit 718*325 um den flash film legen und dann mit postion:absolute; right:0; bottom:0; die div reinlegen?
<div id="body_flash" style="größe des flashfilms">
<flashfilm---->
<div id="menue_box" style="position:absolute; right:0; bottom:0;>CSS BOX</div>
</div>
so in etwa?
Nun wenn ich dass so machen dann ist die menue_box in der rechten unteren ecke des browserfenster positioniert :/
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mo 13.08.2007 13:49
Titel
|
|
|
dann muss das body_flash ein position: relative; bekommen und schon richtet sich das absolute der buttons nach dem body_flash.
ich hab dir ja oben auch nochmal den code zugeeditet
selfhtml:
| Zitat: | | absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit. |
Zuletzt bearbeitet von fuchsbau am Mo 13.08.2007 13:51, insgesamt 3-mal bearbeitet
|
|
| |
|
|
TWEAK
Threadersteller
Dabei seit: 21.06.2006
Ort: TBB
Alter: 39
Geschlecht:
|
Verfasst Mo 13.08.2007 13:52
Titel
|
|
|
JOW DANKE! Funktionier einwandfrei!
Bist mein HERO OF THE DAY 
btw. geiler wohnort ; )
Zuletzt bearbeitet von TWEAK am Mo 13.08.2007 13:53, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] - Position
[CSS] position
IE div backgroundimage position
[CSS] position:fixed und der IE
IE6 und position:fixed
XSLT Position()
|
|
Willkommen auf dem Portal für Mediengestalter
