Flash centreren - Softwareontwikkeling

maandag 19 mei 2008 16:20

Acties:

Verwijderd

Topicstarter

Hallo,

Ik heb een flash object aangeleverd gekregen en deze moet online geplaatst worden.
Nu moet deze ook zowel horizontaal als verticaal uitgelijnd worden.
Nu heb ik met google.nl gezocht hoe dit te doen en ben op de volgende site uitgekomen:

http://www.flashfocus.nl/...hp/Centreer_Flash_met_CSS

Ik heb dit gedaan, maar het werkt niet!

index.html:

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<link rel="stylesheet" type="text/css" href="style.css" />
</HEAD>

<BODY bgcolor="#333333">

<div id="container">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
WIDTH=900 HEIGHT=700>
<PARAM NAME=movie VALUE="kdsite_size.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#333333> <EMBED src="kdsite_size.swf" quality=high bgcolor=#333333 WIDTH=900 HEIGHT=700 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>

</div>

</BODY>
</HTML>

style.css:

<style type="text/css">
#container
{
width: 900px;
height: 700px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -450px;
margin-top: -350px;
}
</style>

Kan iemand zeggen wat er fout aan is?

maandag 19 mei 2008 16:42

Acties:

l1dert

in je css:
Body {text-align: auto;}
#container {margin-left: center; margin-right: auto;}

vertikaal centreren howto:
http://www.gigadesign.be/2006/07/elementen-vertikaal-centreren/

[ Voor 50% gewijzigd door l1dert op 19-05-2008 16:56 . Reden: foutje verbeterd + aanvulling ]

maandag 19 mei 2008 16:49

Acties:

H004

Neuh, dat is t niet (margin niet eens de waarde center, alleen auto, of lengtes).

Je gebruikt <style>-tags in je css-bestand. Haal die weg, want die zijn helemaal niet nodig. Je kan gewoon meteen beginnen met #container... in dat bestand.

[ Voor 6% gewijzigd door H004 op 19-05-2008 16:57 ]

maandag 19 mei 2008 18:13

Acties:

Verwijderd

Topicstarter

H004,

Ik heb dat weggehaald, en nu centreert deze wel.
Alleen bij mij op het scherm (resolutie 1280*800) valt er een stukje weg aan de bovenkant!
Kan ik daar iets tegen doen?

maandag 19 mei 2008 19:58

Acties:

H004

1) Een groter scherm kopen

2) Google toolbars etc uitschakelen, kleinere vorige- en volgende-knoppen aanzetten, maw het aantal pixels dat nodig is voor de browser zelf verkleinen.
3) Kleinere flash-film maken, of schalen als het scherm te klein is.
4) Niet verticaal centreren, of alleen als het scherm groter is dan een aantal pixels (dmv. javascript)
5) Etc...

maandag 19 mei 2008 23:07

Acties:

Verwijderd

Topicstarter

H004,

Haha.

1. Ik heb wel een groter scherm, maar het merendeel van de bezoekers waarschijnlijk niet!
2. Toolbars heb ik niet, maar het merendeel van de bezoekers waarschijnlijk wel!
3. Flash kleiner maken is ook niet een optie. Het moet wel leesbaar blijven.
4. Dit zou een oplossing kunnen zijn. Ik weet alleen niet hoe dat werkt met z'n javascript.
Weet je dat zo wel, of waar ik een voorbeeld kan bekijken?

dinsdag 20 mei 2008 13:24

Acties:

H004

code:

function pasMarginTopAan() {
    if (hoogte van actieve scherm < 700px) {
        #container: maak margin-top: 0px;
    }
    else {
        doe niets...
    }
}
wanneer body is geladen: pasMarginTopAan();

dinsdag 20 mei 2008 13:46

Acties:

XangadiX

trepanatie is zóó kinderachtig

<center>
-- flash object
</center>

offtopic:
* XangadiX begint te rennen

[ Voor 38% gewijzigd door XangadiX op 20-05-2008 13:46 ]

Stoer; Marduq

donderdag 22 mei 2008 12:02

Acties:

Verwijderd

Waarom geen margin: auto; zoals eerder gezegt? Veel mensen gebruiken het niet omdat IE6 het niet accepteerd in HTML4, echter accepteert hij het wel als je xHTML gebruikt.

@ Rowanov:

Als ik me niet vergis wordt text-align (ook in IE) niet door alle elementen geacepteerd dus je zou het bad practice kunnen noemen.

[ Voor 30% gewijzigd door Verwijderd op 22-05-2008 16:43 ]

donderdag 22 mei 2008 15:56

Acties:

Rowanov

Kop eens wat anders...

Het werkt prima in IE6 met strict 4.01 doctype als je het met text-align: center; oplost.

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  width: 900px;
  margin: 0 auto;
  text-align: left;
}

donderdag 22 mei 2008 17:04

Acties:

Kiphaas7

Rowanov schreef op donderdag 22 mei 2008 @ 15:56:
Het werkt prima in IE6 met strict 4.01 doctype als je het met text-align: center; oplost.
Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
  text-align: center;
}
#container {
  width: 900px;
  margin: 0 auto;
  text-align: left;
}

Ik dacht dat IE6 margin:0 auto ook prima ondersteunt, IE 5.5 en lager hebben er echter wel moeite mee, en dan pas heb je je text-align:center nodig...

[ Voor 4% gewijzigd door Kiphaas7 op 22-05-2008 17:04 ]

donderdag 22 mei 2008 17:14

Acties:

Bosmonster

*zucht*

Kiphaas7 schreef op donderdag 22 mei 2008 @ 17:04:
[...]

Ik dacht dat IE6 margin:0 auto ook prima ondersteunt, IE 5.5 en lager hebben er echter wel moeite mee, en dan pas heb je je text-align:center nodig...

Inderdaad, werkt voor zover ik weet prima onder IE6 (in strict in ieder geval, iets anders test ik vandaag de dag bijna niet meer).

donderdag 22 mei 2008 17:54

Acties:

Rowanov

Kop eens wat anders...

Bosmonster schreef op donderdag 22 mei 2008 @ 17:14:
Inderdaad, werkt voor zover ik weet prima onder IE6 (in strict in ieder geval, iets anders test ik vandaag de dag bijna niet meer).

Dat dus

Verwijderd schreef op donderdag 22 mei 2008 @ 12:02:
Als ik me niet vergis wordt text-align (ook in IE) niet door alle elementen geacepteerd dus je zou het bad practice kunnen noemen.

Zolang je het op block-level elementen gebruikt is er niets aan de hand.

donderdag 22 mei 2008 18:29

Acties:

vdvleon

HTML:

<html>
  <head>
    <!-- Head code -->
    <style type="text/css">
      html, body{
        padding:0;
        margin:0;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
      <tr valign="middle">
        <td align="center">
          <div id="flashcontainer"></div>
        </td>
       </tr>
     </table>
   </body>
 </html>

Je kan natuurlijk deze css code ook bij een .css bestand toevoegen en je moet natuurlijk nog je flash in het flashcontainer laden. Ik gebruik altijd : SWFObject (javascript code)

bijv.

JavaScript:

var so = new SWFObject("url.swf", "objectid", "750", "550", "9"); // 750 = width, 550 = height, 9 = flashversion
so.addParam("quality", "high"); // High quality
so.addParam("scale", "noscale"); // No scale
so.addParam("align", "top"); // Align top
so.addParam("menu", "false"); // Geen menu
so.write("body");  // ID van de div element waar in het flash gedeelte moet

[ Voor 38% gewijzigd door vdvleon op 22-05-2008 18:37 ]