以flex为中心的网站 [英] center a website in flex

查看:203
本文介绍了以flex为中心的网站的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在flex 中创建一个网站。我面临的问题是我的网页不居中。我搜索了 google ,但还没有成功。



我试图居中 < s:Application> 在我的网页浏览器上,而不是从左手开始
我该怎么做?

解决根据我的理解: -
$ b $ 1你试图将swf嵌入到HTML中,如果你希望你的swf在HTML的中心,你必须将swf嵌入到HTML端的一个容器中。通过提供x,y,高度和宽度,将您的容器位置置于中心位置。


如果您使用HTML,您可以按照以下方式进行操作: -
其中as width =400height =300宽度和高度或保持SWF宽度=100%高度=100%
您可以用您的swf名称替换AreaChart.swf



这可以解决您的问题。

 <!DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
< head>
< title> Tittle Here< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1/>

< style type =text / cssmedia =screen>
html,body {height:100%;余量:0;填充:0; text-align:center; }
div#centered {border:0;身高:50%宽度:50%;位置:绝对;剩下的:25%顶部:25%;颜色:黑色; }
< / style>
< script type =text / javascriptsrc =swfobject.js>< / script>
< script type =text / javascript>
swfobject.registerObject(myId,8.0.0,expressInstall.swf);
< / script>
< / head>
< body>
< div id =居中>
< object id =myIdclassid =clsid:D27CDB6E-AE6D-11cf-96B8-444553540000width =400height =300>
< param name =movievalue =AreaChart.swf/>
< param name =scaleModevalue =showAll/>
< param name-qualityvalue =best/>
<! - [if!IE]> - >
< object type =application / x-shockwave-flashdata =AreaChart.swfwidth =400height =300>
<! - <![endif] - >
< div id =altContent>
< h1>您需要升级您的Flash播放器。< / h1>
< p>
< a href =http://www.adobe.com/go/getflashplayer>
< img src =http://www.adobe.com/images/shared/download_buttons/get_flash_player.gifalt =Get Adob​​e Flash player/>
< / a>
< / p>
< / div>
<! - [if!IE]> - >
< / object>
<! - <![endif] - >
< / object>
< / div>
< / body>
< / html>

其他



2)如果您试图将Flex内容置于Flex应用程序中,而不是创建一个容器,并且必须移动所有逻辑,包括可视化组件等。



例如: -

 <?xml version =1.0encoding =utf-8?> 
xmlns:s =library://ns.adobe.com/flex/spark
xmlns:mx =library://ns.adobe.com/flex/mxminWidth =955minHeight =600xmlns:local =*
width =800 height =600>
< fx:Script>
<![CDATA [
import mx.core.FlexGlobals;

private function creationComp():void
{
mainContainer.x = FlexGlobals.topLevelApplication.width / 2 - mainContainer.width / 2;
mainContainer.y = FlexGlobals.topLevelApplication.height / 2 - mainContainer.height / 2;
}
]]>
< / fx:Script>
< fx:声明>
<! - 在这里放置非可视元素(例如服务,值对象) - >
< / fx:声明>

< local:MainContainer id =mainContainerwidth =50%height =50%creationComplete =creationComp()/>

< / s:Application>

其中MainContainer.mxml将包含所有可视组件/元素。 b

这可能对您有所帮助。



可能有更好的解决方法。

I am trying to make a websites in flex. I am facing the problem that my website page is not centered. I Have searched google but haven't succeeded yet.

I am trying to center <s:Application> on my web browsers instead of starting from left hand How can i do that?

解决方案

As per my understanding: -

1) you are trying to embed swf in to HTML, if you want your swf to be at the center of HTML you have to embed swf in to one container on HTML side. Place your container position at center by providing x, y, height and width to it.

If you are using HTML you can do in this below way: - Where as width="400" height="300" as your Flex Application swf width and height or keep swf width="100%" height="100%" You can replace AreaChart.swf with your swf name.

I think this can solve your problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Tittle Here</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <style type="text/css" media="screen">
            html, body { height: 100%; margin:0; padding:0; text-align: center; }
            div#centered { border:0; height: 50%; width: 50%; position: absolute; left: 25%; top: 25%; color: black; }
        </style>        
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.registerObject("myId", "8.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="centered">    
            <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="300">
            <param name="movie" value="AreaChart.swf" />
            <param name="scaleMode" value="showAll" />
            <param name-"quality" value="best" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="AreaChart.swf" width="400" height="300">
                <!--<![endif]-->
                <div id="altContent">
                    <h1>You need to upgrade your Flash player.</h1>
                    <p>
                    <a href="http://www.adobe.com/go/getflashplayer">
                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                    </p>
                </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

else

2) If you are trying to center your Flex content inside of your Flex application than you have to create one container and inside that you have to port your all logic including visual component etc.

Ex: -

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"
               width="800" height="600" >
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;

            private function creationComp():void
            {
                mainContainer.x = FlexGlobals.topLevelApplication.width/2 - mainContainer.width/2;
                mainContainer.y = FlexGlobals.topLevelApplication.height/2 - mainContainer.height/2;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <local:MainContainer id="mainContainer" width="50%" height="50%" creationComplete="creationComp()"/>

</s:Application>

Where as MainContainer.mxml will contain for all visual component/elements.

This may help you.

There might be better solution to this.

这篇关于以flex为中心的网站的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆