Выровняйте swf по нижней части div, даже если div меньше чем swf? - PullRequest
Новая
       4

Выровняйте swf по нижней части div, даже если div меньше чем swf?

1 голос
/ 18 января 2011

У меня была идея заключить в начало div SWF высотой 270px в высоту 29px.Этот div будет располагаться в абсолютном положении вдоль нижней части страницы, а SWF-файл в его нормальном состоянии будет занимать всего 29 пикселей в высоту.До тех пор, пока пользователь не наведет курсор на некоторые фрагменты swf, он займет высоту 270 пикселей.Я собирался включить некоторый Java-скрипт, чтобы изменить высоту div для того, когда это произойдет.Однако проблема, с которой я сталкиваюсь, заключается в том, что файл swf не будет выровнен по нижней части div.Кажется, он всегда выравнивается по верху, несмотря на то, что я вставляю <param name="salign" value="lb" />, то есть выравнивание по левому низу.Разве невозможно вписать swf в меньший div и выровнять этот swf по нижнему, а не по верху? 

<!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>egnewsTicker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffffff;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:29px; vertical-align:bottom; display:inline-block;}
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="egnewsTicker" align="bottom" vertical-align="bottom">
                <param name="movie" value="egnewsTicker.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="noscale" />
                <param name="menu" value="false" />
                <param name="devicefont" value="false" />
                <param name="salign" value="lb" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="egnewsTicker.swf" width="100%" height="100%">
                    <param name="movie" value="egnewsTicker.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="noscale" />
                    <param name="menu" value="false" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="lb" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 18 января 2011

Быстрый и грязный способ исправить это заключался бы в том, чтобы обернуть swf во второй div следующим образом: 

<div id="hoverDiv" style="position: relative;  overflow: hidden;">
<div id="wrapperDiv" style="position: absolute; bottom: 0px;">
<!-- SWF here -->
</div>
</div>

Тогда вы можете манипулировать высотой "hoverDiv" с помощью JavaScript. SWF-файл должен располагаться в верхней части «wrapperDiv», который будет находиться в нижней части «hoverDiv», а любое переполнение из «wrapperDiv» должно быть скрыто.

0 голосов
/ 18 января 2011 
<div id="wrapperDiv" style="text-align:bottom;border:1px solid black;display:inline-block">
<!-- text goes here -->
</div>
0 голосов
/ 18 января 2011

Попробуйте это в своем CSS: 

vertical-align:bottom;

Если это не сработает, добавьте это после предыдущего кода: 

display:inline-block;
...