imagenes - slider html5 css3 responsive
Cambio de tamaño de Flash incorporado incrustado automático(HTML/CSS) (4)
Espero que esto te pueda orientar en la dirección correcta. Pero como señala un ejemplo en línea, donde realmente podemos ver los elementos que está incrustando sería genial.
<html>
<head>
<style>
.menu li {
display: inline;
}
.menu {
float: left;
padding: 0;
border: solid;
}
img {
float: left;
width: 200px;
margin: 0 30px;
border: solid;
}
#header {
margin-left: 20%;
margin-right: 20%;
padding: 0 5%;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<ul class="menu left">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="http://www.google.com/logos/2012/steno12-hp.jpg">
<ul class="menu right">
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
</body>
</html>
Soy un diseñador de medios de movimiento que intenta incorporar parte de mi trabajo para un cliente en un sitio web para su regalo de Navidad. Estoy tratando de cambiar el tamaño de un .swf para que coincida con el tamaño del navegador, ya que el tamaño fijo realmente está jugando con mi diseño de cambio de tamaño.
Cada vez que configuro el ancho / alto de .swf como "100%" o "automático", la película se corta en la parte superior e inferior debajo de los contenedores div. Cuando cambio el tamaño del contenedor al 100%, obtengo una película larga y delgada. He copiado mi código a continuación, y realmente agradecería su ayuda. No dude en criticar cualquier otra cosa sobre mi código, también, soy un virgen de CSS.
¡Muchas gracias! :)
<!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>
Eso es simplemente un montón de código. para silenciar una pregunta de desbordamiento de pila, creo.
Si quieres un objeto flash sensible con css, deberías mirar aquí o para una versión más corta aquí
CSS:
.embed-wrapper {
width: 100%;
max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot/tom: 0;
}
.arve-embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
toma ese CSS y con este html
<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>
Podrías hacer que todo lo que está dentro del trabajo de empaquetamiento se redimensione automáticamente, así que 16: 9 para que puedas eliminar la mayor parte de tu código e implementar algo como esto
Deberías echarle un vistazo a http://fitvidsjs.com/ . Parece que es lo que necesitas.
En el archivo flash
Conjunto
Stage.scaleMode = "noScale";
archivo html
establecer el ancho del objeto 100%