Вопросы Теги

Центрированная встроенная Flash-память с автоматическим изменением размера (HTML / CSS)

Я дизайнер анимационных материалов, пытаюсь включить некоторые из моих работ для клиента в веб-сайт для ее рождественского подарка. Я пытаюсь изменить размер .swf, чтобы он соответствовал размеру браузера, поскольку фиксированный размер действительно мешает моему изменению размера макета.

Каждый раз, когда я устанавливаю ширину / высоту .swf на «100%» или «авто», фильм обрезается сверху и снизу под контейнерами div. Когда я изменяю размер контейнера на 100%, я получаю длинный тонкий фильм. Я скопировал свой код ниже и был бы очень признателен за вашу помощь. Не стесняйтесь критиковать и мой код что-нибудь еще - я девственник CSS.

Большое спасибо! :) 

<!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>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>

<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style type="text/css" media="screen">

        body {
        background:url('images/home.jpg');
        background-repeat:no-repeat;
        background-size:cover;
        position:absolute;

        }

        html, body {
        height:100%;
        width:auto;
        min-width:700;
        }

        body { margin:0; padding:0; overflow:hidden; }


        .swfcontainer {
            margin-top:3%;
            width:100%;
            height:30%;
            margin-bottom:1px;
        }

        .swfcontainersmall {
            margin-left:10%;
            height:300px;
            margin-right:10%;
        }

        .flashfile {
            width:100%;
            height:100%;
            text-align:center;
            margin:2; 
            padding:0; 
            overflow:hidden;
        }

        .textcontainer {
            margin-bottom:3px;
            margin-top:0;
            margin-left:0;
            width:100%;
            margin-right:0;
        }

        .textcontainersmall {
        margin-top:1px;
        margin-bottom:1px;
        margin-left:25%;
        margin-right:25%;
        }

        #flashContent { 
        width:100%; 
        height:100%; 
        }


        #wrap { min-height: 100%;}

        #main {overflow:auto;
        padding-bottom: 150px;}  /* must be same height as the footer */

        #footer {position: relative;
        margin-top:-100px; /* negative value of footer height */
        height:100px;
        clear:both;
        border-bottom:solid 4px #333;
        } 

        /*Opera Fix*/
        body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/
        }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
    <div id="main">
        <div class="swfcontainer">
            <div class="swfcontainersmall">
                <div class="flashfile">
                    <div id="flashContent">


                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                        codebase="http://fpdownload.macromedia.com/
                        pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align=                                                                   "middle">
                        <param name="SRC" value="EatDrinkAndBeMary.swf">
                        <param name="wmode" value="transparent" />
                        <param name="SCALE" value="noborder" />
                        <param name="BGCOLOR" value= />
                        <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
                    </div>
                </div>
            </div>
        </div>


        <div class="textcontainer">
            <div class="textcontainersmall">
        <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
            </div>
        </div>
    </div>
    <div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />    
    <div>
</body>
</html>
6
задан BoltClock 25 December 2011 в 00:42
поделиться