Avatar billede tvbrandt Nybegynder
30. januar 2004 - 11:56 Der er 12 kommentarer og
1 løsning

Centrer på side uden brug af tabeller

Jeg har en "Flashfilm" der skal centreres midt på brugerens side. Jeg har lavet følgende HTML til det:

//**********KODE START******************

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#flash {
    float:left;
    width:50%;
}
</style>

</head>

<body bgcolor="100F0D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="flash">
<object classid="" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="521" height="450">
        <param name="movie" value="Flash/intro.swf">
        <param name="quality" value="high"><param name="LOOP" value="false"><param name="SCALE" value="exactfit">
        <embed src="Flash/intro.swf" width="521" height="450" loop="false" scale="exactfit" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>
</div>
</body>
</html>


//**********KODE SLUT*******************


Jeg ønkser at lave det uden tabeller. Hvordan skal jeg skrive i stylesheetet (øverst) for at få det til at lykkes?
Avatar billede bas Forsker
30. januar 2004 - 13:51 #1
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#flash {
 
position:absolute; 
top:50px; 
left:0px;
width:100%;
text-align:center 
 
 
}
</style>

</head>

<body bgcolor="100F0D">

<!--<div  style="text-align:center;">-->

<div id="flash">



<object classid="" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="521" height="450" align="right">

        <param name="movie" value="Flash/intro.swf">
        <param name="quality" value="high">
       
        <param name="LOOP" value="false"><param name="SCALE" value="exactfit">
        <embed src="Flash/intro.swf" width="521" height="450" loop="false" scale="exactfit" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>

</object>
</div>
</body>
</html>
Avatar billede bas Forsker
30. januar 2004 - 13:52 #2
Den skal åbenbart have width=100% for at virke.

/Martin
Avatar billede bas Forsker
30. januar 2004 - 13:56 #3
Du kan faktisk godt slette

left:0px;

Du kan ændre position til relative og
ændre tallet i top:50px.

/Martin
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 14:01 #4
Tak, men dette centrerer den horisontalt men ikke vertikalt. Hvordan får man den til det?
Avatar billede stingbat Nybegynder
30. januar 2004 - 14:03 #5
body {
  text-align: center;
}
Avatar billede stingbat Nybegynder
30. januar 2004 - 14:04 #6
Hvis du også ønsker at have det vertikale, så prøv at ændre #flash, med en "height: 100%; vertical-align: middle;"
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 14:06 #7
Det virker også kun horisontalt
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 14:06 #8
OK. Jeg prøver lige det med vertical-align
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 14:08 #9
Mener du sådan her:

<style type="text/css">
#flash {
    height: 100%;
    vertical-align: middle;               
}
body {
  text-align: center;
}
</style>


</head>

<body bgcolor="100F0D" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="flash">
Avatar billede swuppe Nybegynder
30. januar 2004 - 14:42 #10
Prøv med.
#flash {
position:absolute; 
top:50%; 
left:50%;
width:521px;
height:450px;
margin-top:-225px;
margin-left:-260px;
}
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 14:57 #11
Det virker desværre heller ikke
Avatar billede tvbrandt Nybegynder
30. januar 2004 - 15:03 #12
>Swuppe
Undskyld mange gange. Jeg havde lige kopieret dit ind et forkert sted. Det virker. Kanon. Tak for hjælpen til alle. Lukker
Avatar billede swuppe Nybegynder
02. februar 2004 - 18:18 #13
Lidt forsinket, tak for points glad for at det hjalp :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester