Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

danielswater

[Resolvido] problema com position no IE (pra variar)

Por , em Desenvolvimento frontend

Recommended Posts

danielswater    0

danielswater
Postado

seguinte galera, to com esse projeto aqui:

 

http://www.websiteideal.com.br/360/

 

o lance e o seguinte, o background ai e um flash e eu preciso que essa barra cinza fique por cima do flash.

eu coloco um position: absolute e no firefox fica certinho, mas no maldito IE nao

 

a unica forma de fazer a barra aparecer no ie e nao colocar nenhum position, mas ai tambem nao aparece o flash nem no ie e nem no ff

 

vejam meu css:

 


body, div, h1, h2, h3, span, p {
			font-family: Verdana,Arial,Helvetica,sans-serif;
			color: #ffffff; 
		}
		/* fullscreen */
		html {
			height:100%;

		}
		body {
			height:100%;
			margin: 0px;
			overflow:hidden; /* disable scrollbars */

		}

		body {
		  font-size: 10pt;
		  background : #000000; 
		}
		table,tr,td {
			font-size: 10pt;
			border-color : #777777;
			background : #dddddd; 
			color: #000000; 
			border-style : solid;
			border-width : 1px;
		}
		h1 {
			font-size: 18pt;
		}
		h2 {
			font-size: 14pt;
		}
		.warning { 
			font-weight: bold;
		}
		#barra{
			width:17%;				
			background-color:#CCC;

		}
		#barra a:link{
			display:block;
			padding:10%;
			color:#000;
			text-decoration:none;
		}
		#conteudo{
			width:46%;
			height:46%;
			z-index:2;
			position:absolute;
			background-color:#F00;
			margin: -23% -23%;
			top:50%;
			left:50%;
			overflow:auto;

		}
		p{
			font-size:100%;
		}

 

alguem sabe como posso resolver isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

No flash você está adicionando os parâmetros de wmode:transparent/opaque ? Trabalhando com isto no flash, e na div que fica por cima dele tendo position:absolute, e z-index positivo, deve funcionar.

 

Qualquer coisa, opte também por usar o flash com um JS recomendado: http://code.google.com/p/swfobject/

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielswater    0

danielswater
Postado

entao, na verdade esse flash ja e carregado via js

vou colocar o codigo todo aqui:

 

 


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
       <script src="jquery-1.8.1.min.js"></script>

	<script type="text/javascript" src="modernizr-1.5.min.js">
	</script>
	<script type="text/javascript" src="p2q_embed_object.js">
	</script>
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
	<script type="text/javascript">

	$(function(){

		var zIndexNumber = 1000;
$('#barra').each(function() {
	$(this).css('zIndex', zIndexNumber);
	zIndexNumber -= 10;
});


			var altura = window.innerHeight;
			var barra = document.getElementById('barra');
			barra.style.height = altura+'px';

		$('#conteudo').css('display','none');
		var altura = window.innerHeight;
			var barra = document.getElementById('barra');
			barra.style.height = altura+'px';


			$('#1').click(function(){
				$('#conteudo').fadeIn('fast');

				return false;
				});


		});
		// hide URL field on the iPhone/iPod touch
		function hideUrlBar() {
			if (((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))) {
				container = document.getElementById("container");
				if (container) {
					var cheight;
					switch(window.innerHeight) {
						case 208:cheight=268; break; // landscape
						case 336:cheight=396; break; // portrait, in call status bar
						case 356:cheight=416; break; // portrait 
						default:
							cheight=window.innerHeight;
					}
					if ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight)) {
						container.style.height=cheight + "px";
						setTimeout(function() { hideUrlBar(); }, 1000);
					}
				}
			}

			if (window.pageYOffset==0) {
				window.scrollTo(0, 1);

			}

		}
	</script>
	<style type="text/css" title="Default">
		body, div, h1, h2, h3, span, p {
			font-family: Verdana,Arial,Helvetica,sans-serif;
			color: #ffffff; 
		}
		/* fullscreen */
		html {
			height:100%;
			width:100%;

		}
		body {
			height:100%;
			margin: 0px;
			overflow:hidden; /* disable scrollbars */
			width:100%;

		}

		body {
		  font-size: 10pt;
		  background : #000000; 
		}
		table,tr,td {
			font-size: 10pt;
			border-color : #777777;
			background : #dddddd; 
			color: #000000; 
			border-style : solid;
			border-width : 1px;
		}
		h1 {
			font-size: 18pt;
		}
		h2 {
			font-size: 14pt;
		}
		.warning { 
			font-weight: bold;
		}
		#barra{
			width:17%;				
			background-color:#CCC;
		}

		#barra a:link{
			display:block;
			padding:10%;
			color:#000;
			text-decoration:none;
		}
		#conteudo{
			width:46%;
			height:46%;
			z-index:2;
			position:absolute;
			background-color:#F00;
			margin: -23% -23%;
			top:50%;
			left:50%;
			overflow:auto;

		}
		p{
			font-size:100%;
		}

	</style>	
</head>
<body onorientationchange="hideUrlBar();">
   <div id="barra">
   <a href="#" id="1">LINK 1</a>
   </div>
   <div id="conteudo">
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus   libero eget tellus varius tempus. Vestibulum odio velit, sodales eu   gravida sed, pulvinar a dui. Curabitur et magna neque. Nunc porta dui   quis odio malesuada dapibus. Duis blandit eros id velit tincidunt   consequat. Quisque pretium, lorem a sodales feugiat, velit tortor rutrum   nisi, at tincidunt erat diam et ligula. In euismod orci sit amet lectus   mattis pulvinar. Cras sit amet magna ipsum, nec ultricies augue. Duis   at diam vel eros tincidunt iaculis. </p>
     <p> Integer massa felis, luctus vitae porttitor at, ultricies pharetra   lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices   posuere cubilia Curae; Pellentesque mollis pretium tellus nec interdum.   Nam sit amet mi sed ligula interdum facilisis. Phasellus quis magna   eget lacus pretium posuere sed vel libero. Nulla interdum urna ipsum.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent   facilisis justo sed dui interdum ut adipiscing mi varius. Ut faucibus   mattis dui. Aliquam erat volutpat. Vivamus quis diam augue. Quisque   hendrerit mattis dolor in ornare. </p>
     <p> Duis hendrerit accumsan volutpat. Fusce nec tortor in mi consectetur   placerat. Class aptent taciti sociosqu ad litora torquent per conubia   nostra, per inceptos himenaeos. Nullam imperdiet blandit magna a   interdum. Morbi congue posuere ipsum, vitae tincidunt lectus tempor   tempus. Nunc et arcu est, in consectetur ante. Curabitur id lacus felis.   Nullam ultricies mi sed risus tincidunt fermentum. In hac habitasse   platea dictumst. Nam mauris ligula, sagittis porttitor varius ac, auctor   in massa. Curabitur a magna eget eros commodo placerat. Nunc et purus   eros. </p>
     <p> Duis pretium dolor eget augue commodo euismod. Ut ac mi arcu, et congue   tellus. Class aptent taciti sociosqu ad litora torquent per conubia   nostra, per inceptos himenaeos. Fusce quis orci ut odio laoreet porta.   Nunc congue eleifend dui in feugiat. Curabitur varius sodales lorem. Sed   pellentesque nibh sit amet justo blandit vitae luctus enim malesuada.   Praesent pretium leo id dui cursus non adipiscing ante vulputate. Donec   at tellus in ante ornare malesuada id et orci. Nulla facilisi. Etiam   venenatis vulputate mi, vel rutrum felis dapibus a. Vestibulum quam   risus, gravida vel tempor vitae, ultricies ut est. Donec accumsan congue   massa, non lobortis orci lacinia vitae. Aenean a justo augue.   Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere   cubilia Curae; </p>
   </div>

	<script type="text/javascript" src="pano2vr_player.js">
	</script>
	<script type="text/javascript" src="skin.js">
	</script>
	<script type="text/javascript">

	if (DetectFlashVer(9,0,0)) {
		p2q_EmbedFlash('index.swf',
			'100%', '100%',
			'bgcolor', '#f0f0f0',
			'play', 'true',
			'cache','true',
			'allowFullscreen','true',
			'autoplay','true',
			'wmode','transparent'
			); 

	} else 
	// check for CSS3 3D transformations
	if (Modernizr.csstransforms3d) {

		// create panorama container 
		document.writeln('<div id="container" style="width:100%;height:100%;"></div>');
		// create the panorama player with the container
		pano=new pano2vrPlayer("container");
		// add the skin object
		skin=new pano2vrSkin(pano);
		// load the configuration
		pano.readConfigUrl("index.xml");
		// hide the URL bar on the iPhone
		hideUrlBar();
	} else {  
		document.write('This content requires HTML5/CSS3 or Adobe Flash Player Version 9 or higher. ');
	}


	</script>

	<noscript>
		<p><b>Please enable Javascript!</b></p>
	</noscript>
</body>

</html>

 

pq o problema na verdade é o ie e nao o filme do flash, na verdade o que esta acontecendo e que a div esta jogando o filme para baixo no IE

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito