..:: MX Studio Fóruns ::..: Div sobre Div - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade

ATENÇÃO
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Div sobre Div como definir ordem

#1 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 24 July 2006 - 01:29 PM

Seguinte, tenho um menu e uma animação que deve ficar embaixo do menu. Ambos em flash e com a propriedade transparent.

No css, tá assim:

.corpo .menu{
width:777px;
margin-top:0px;
}

.corpo .animacao{
width:777px;
margin-top:-15px;
}

A sobreposição funcionou legal, só que a animação está por cima do menu, o que devia ser o contrário! Como defino para que o menu fique sobre a animação?
0

#2 User is offline   TiTi Celestino 

  • Group: Membros
  • Posts: 5198
  • Joined: 13-February 05

Posted 24 July 2006 - 11:33 PM

Use: z-index: 0 (fica por baixo); z-index:(fica por cima)
0

#3 User is offline   rochester 

  • Group: Colunistas
  • Posts: 1080
  • Joined: 24-June 06

Posted 24 July 2006 - 11:38 PM

CODE
.corpo .menu{
width:777px;
margin-top:0px;
z-index: 1;
}

.corpo .animacao{
width:777px;
margin-top:-15px;
z-index: 0;
}


Qualquer coisa.. só berrar XD

thumbsup.gif
0

#4 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 25 July 2006 - 12:04 PM

Então vou berrar mesmo, pq ñ funcionou... A anim de baixo teima em ficar por cima do menu... Só vai p/ baixo quando tiro o wmode=transparente do menu, mas aí não adianta nada, isso tem que ter igual.

*****************************************************************
O código da página tá assim:
*****************************************************************

<body topmargin="0">
<div class="corpo">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="264"><img src="imagens/logo.gif" alt="GSIOnline" width="223" height="86" hspace="20" vspace="5"></td>
<td width="316">&nbsp;</td>
<td width="203">&nbsp;</td>
</tr>
</table>

<div class="menu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="777" height="50">
<param name="movie" value="menu.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">

<embed src="menu.swf" width="777" height="50" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>

<div class="animacao">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="777" height="180">
<param name="movie" value="flash/ainmacao.swf">
<param name="quality" value="high">

<embed src="flash/ainmacao.swf" width="777" height="180" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<!-- fim animação -->

<div class="animacao2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="576" height="157">
<param name="movie" value="flash/trio.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="flash/trio.swf" width="576" height="157" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
<!-- fim animação 2 -->

</div> <!-- fim div corpo -->

</body>

****************************************************************
E do CSS é assim:
****************************************************************

body, td, span, div, p {
margin: 0 0 0 0px;
/*font: 13px "Trebuchet MS"; color:#4B4B4B;*/
}

BODY
{
background-color:#f7f7f7;
float:right;
overflow-x:hidden;
overflow-y:auto;
}

.imagem {
background-image:url(../imagens/logo.gif);
background-repeat:no-repeat;
width:276;
height:107;
padding-left:40;
}

.bg_table {
margin-right:0px;
width:555px;
background:url(../bgs/sombra.gif);
background-repeat:no-repeat;
}

.bg_table2 {
background:url(../bgs/fundo_dir5.gif);
height:33px;
background-repeat:repeat-x;
}

.corpo{
background:url(../bgs/fundo_dir.png);
background-position:right;
background-repeat:repeat-y;
width:777px;
color:#f7f7f7;
margin-top:0px;
}

.corpo .menu{
width:777px;
margin-top:0px;
z-index:0;
}

.corpo .animacao{
width:777px;
margin-top:-15px;
z-index:1;
}

.corpo .animacao2{
width:576px;
float:left;
margin-top:-5px;
}

Mesmo colocando os z-index não funcionou, com alteração da ordem tb não...
0

#5 User is offline   Flasher 

  • Group: Membros
  • Posts: 58
  • Joined: 13-July 06

Posted 25 July 2006 - 01:07 PM

E já experimentou utilizar uma table?

Cumps [*]
0

#6 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 25 July 2006 - 01:24 PM

Como resolveria com table? Não entendi.
0

#7 User is offline   TiTi Celestino 

  • Group: Membros
  • Posts: 5198
  • Joined: 13-February 05

Posted 25 July 2006 - 02:38 PM

separe por virgula: .corpo, .menu. Agora seria melhor você inves de criar uma class, colocar um id.
0

#8 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 25 July 2006 - 04:24 PM

Nada cara...a animação de baixo teima em ficar por cima do menu! Não sei + o que fazer...

Outra coisa, mesmo trocando de posição o menu com a animação, esta também fica por cima, por isso acho que deve ser alguma coisa relacionada ao flash mesmo. Tentei colocar os dois em layers, e a animação também fica por cima...

E agora...?
0

#9 User is offline   Adriano Aguiar 

  • Group: Membros
  • Posts: 118
  • Joined: 19-May 06

Posted 25 July 2006 - 10:37 PM

Vamos ver aqui:
QUOTE(inrapa @ 24/7/2006 13:07:47)
Seguinte, tenho um menu e uma animação que deve ficar embaixo do menu. Ambos em flash e com a propriedade transparent.

A sobreposição funcionou legal, só que a animação está por cima do menu, o que devia ser o contrário! Como defino para que o menu fique sobre a animação?
View Post


inrapa, assim eu aconselho você criar somente uma animação, ja que no caso você quer sobrepor com 2 SWF, mesmo você podendo alterar a ordem das animações em CSS, que no caso nossos amigos citaram acima, que seria a marcação z-index: 1; atribuida no SWF que você quer que fique por cima, não faria muita diferença, pois são 2 SWF e qualquer um que fique por cima, cobrirá o outro, isso muitas pode ser inutil, então tenho aqui um exemplo de trabalhar com SWF de fundo e nele sobrepor uma DIV com links feitos com uma lista, bem simples:

QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css_animacao.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global_menu">
<div id="menu_link">
<ul>
<li><a href="#">link 01</a></li>
<li><a href="#">link 02</a></li>
<li><a href="#">link 03</a></li>
<li><a href="#">link 04</a></li>
<li><a href="#">link 05</a></li>
</ul>
</div>
<div id="animacao_menu">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="120" height="400" accesskey="2" tabindex="2" title="menu animacao">
    <param name="movie" value="menu.swf" />
    <param name="quality" value="high" />
<param name="wmode" value="transparent" />
    <embed src="menu.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="120" height="400"></embed>
  </object>
</div>
</div>
</body>
</html>


Aqui está o arquivo CSS:

QUOTE
#global_menu {
width: 120px;
margin: 0px;
}
#menu_link {
position: absolute;
z-index: 1;
}
#animacao_menu {
position: absolute;
margin: 0px;
}

ul {
list-style-type: none;
}
li {
padding: 6px;
}



Neste caso, aplicamos 2 parametros para visualizar em FireFox, Opera e Internet Explorer , 1º seria o <param name="wmode" value="transparent" />que serve para FF e OP, e o segundo <embed src="menu.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="120" height="400"></embed> que seria o valor interno dessa propriedade wmode="transparent" para se aplicar no IE.
Então é isso, espero que ajude e pra finalizar veja como fica o resultado final na prática:

Exemplo Prático

Espero que ajude thumbsup.gif

Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de dúvidas poste abaixo ou utilize nosso Fórum CSS/javascript/DHTML
0

#10 User is offline   Thony Conde 

  • Group: Moderadores
  • Posts: 851
  • Joined: 19-May 05

Posted 26 July 2006 - 12:18 AM

Boa Adriano
wink.gif
0

#11 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 26 July 2006 - 12:05 PM

Adriano, valeu pela dica. Só que o que ocorre é o seguinte.

A animação que tem de ficar por cima é um menu. Nesse menu, ao clicar num item, ele faz um efeito e chama a página, assim, os links não poderiam estar em html.

Acho que a melhor solução vai ser criar dois menus. Um para essa página inicial, integrado à animação, como vc disse, e outro para as "páginas de dentro" do site.

Já que com z-index e tirando ou colocando a transparência, a posição deles não altera, essa é a única solução que achei. sad.gif

Valeu pela ajuda. thumbsup.gif
0

#12 User is offline   Adriano Aguiar 

  • Group: Membros
  • Posts: 118
  • Joined: 19-May 06

Posted 26 July 2006 - 12:48 PM

inrapa, coloca o site online ou somente a página que ocorre este erro, pra galera da uma olhada como está a situação do jeito que você descreveu. Assim podemos analizar como ela fica na prática!

Até mais thumbsup.gif
Adriano Aguiar - adrianoaguiaralves@gmail.com
Dúvidas poste abaixo ou uitlize nosso Fórum CSS/JavaScript/DHTML.
0

#13 User is offline   inrapa 

  • Group: Membros
  • Posts: 13
  • Joined: 20-July 06

Posted 26 July 2006 - 04:41 PM

http://www.gsionline.com.br/novo/teste/

Aí está o menu embaixo da animação...Espero q agora possam me ajudar.
0

#14 User is offline   Adriano Aguiar 

  • Group: Membros
  • Posts: 118
  • Joined: 19-May 06

Posted 02 August 2006 - 03:09 PM

Olá inrapa, dei uma olhada no site, mas ainda não intendi pq vc faz o site em flash e coloca ele no server em frames, qual seu objetivo em relação a isso? Antes que poste algo abaixo, paço que leia estes assuntos abaixo:

QUOTE
Maujor e XHTML

1 dos problemas que pode ocorrer

Uma das Falhas Graves


Espero que leia, em breve estarei por aqui! thumbsup.gif

Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de dúvidas poste abaixo ou utilize nosso Fórum CSS/JavaScript/DHTML
0

#15 User is offline   CarolRangel 

  • Group: Membros
  • Posts: 1
  • Joined: 08-August 06

Posted 08 August 2006 - 11:02 AM

Oi inrapa tudo bem?
Eu também estava com esse problema de sobreposição dos swfs.
Eu tinha um swf transparente e queria que ele ficasse por cima de um fullbanner (swf também).
Depois de muita tentativa consegui fazer com que ficasse na frente do outro (testei no firefox e no IE).
Eu tive que colocar o parâmetro "wmode" nos dois e, claro, posicioná-los com z-index.

Dê uma olhada no css:

#site {
position:relative;
}

#flash1 {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 558px;
height: 90px;
z-index:1;
}

#flash2 {
display: block;
position: absolute;
top: 10px;
left: 200px;
width: 216px;
height: 300px;
z-index:10000;
}

htm:

<div id="site">
<div id="flash2">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="558" height="90" id="xmlmenu" style="z-index:10000;" align="left">
<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash2.swf" />
<param name="quality" value="high" /> <param name="wmode" value="transparent" />
<embed wmode=transparent src="flash2.swf" quality="high" width="558" height="90" name="xmlmenu" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</div>
<div id="flash1">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="216" height="300" id="xmlmenu" style="z-index:1;" align="left">
<param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="flash1.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<embed wmode=transparent src="flash1.swf" quality="high" width="216" height="300" name="xmlmenu" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</div>

obs: para funcionar o param wmode também tem que estar dentro do <embed>

abraço
Carol
0

#16 User is offline   doasdesign 

  • Group: Membros
  • Posts: 1
  • Joined: 24-April 07

Posted 24 April 2007 - 11:07 AM

Olá Inrapa, vc deve fazer o seguinte: use o z-index:1; para a animação q vc ker manter em cima e wmode = transparent apenas pra animação q vc ker q fique embaixo.

Abraços.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Similar Topics Collapse

  Topic Forum Started By Stats Last Post Info
New Replies Como imprimir o conteúdo total do textarea
Alguem conhece ou sabe se é possível? 		Flash & ActionScript Rodrigo_rj 
  • 0 Replies
  • 655 Views
New Replies ARTENAPELE.COM
Site sobre Body Art 		Avaliação -Douglas- 
  • 5 Replies
  • 2290 Views
New Replies Facebook discorda de Google sobre neutralidade da rede Notícias Notícias 
  • 0 Replies
  • 145 Views
New Replies China intensifica defesa dos controles sobre a internet Notícias Notícias 
  • 0 Replies
  • 194 Views
New Replies Barra horizonal de Notícias - Flash / PHP / MySQL
Como fazer aqueles tickers de notícias horizontais 		Flash & ActionScript flashDeveloper 
  • 1 Reply
  • 984 Views
New Replies Player com MP3 Radonizadas, como faço!?
Alguem pode me ajudar!? 		Flash & ActionScript R4PH43L 
  • 6 Replies
  • 1664 Views
New Replies Como bloquear teclas F1 ao F12 no Flash
Não tem input text nem botão 		Flash & ActionScript Luka13 
  • 2 Replies
  • 1760 Views
New Replies Assembléia da UE aprova regras sobre dados........
Terra Tecnologia 		Notícias TiTi Celestino 
  • 0 Replies
  • 453 Views

Publicidade

2 User(s) are reading this topic
0 membro(s), 2 visitante(s) e 0 membros anônimo(s)