← Desenvolvimento

Div sobre Div (z-index?)

Lida 2910 vezes

Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Malta, estava aqui a tentar construir um "slideshow" à mão, mas não estou a conseguir fazer o "efeito" de trocar de slide...

Neste momento tenho 4 divs, chamadas: banner1, banner2, banner3 e banner4

E tenho 4 links, tipo 1 2 3 4

Precisava que, ao carregar no determinado link, fosse puxado o banner respectivo para o topo.

Isto faz-se através do z-index, correcto? Mas como altero o z-index da div através de um link? Javascript?

Preciso de umas luzes. Posso enviar mais detalhes via PM, a quem realmente perceber do assunto x)

Obrigado
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Se não procuras-te no google, procura que vais encontrar vários tutorias, principiante em jQuery.
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: Pedro Lopes em 11/Jul/2012 17:31
Se não procuras-te no google, procura que vais encontrar vários tutorias, principiante em jQuery.

Tenho estado à procura já há algum tempo e até agora não consegui meter a "cena" a funcionar.

Tenho o código todo estruturado (HTML e CSS), falta-me saber que Javascript devo usar para que, ao ir clicando nos links, ele vá puxando a Div respectiva para o topo...
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1



Eu neste momento tenho isto. Precisava que ao ir carregado nas bolinhas (tipo 1 2 3 4) os banners fossem puxados para o topo/fossem colocados sobre o banner que está actualmente à vista.

Colocando a navigation com para aí um z-index de 100, era só preciso fazer com que as divs banner1, banner2, banner3, banner4 fossem acrescentando +1 no z-index conforme fosse carregado nas bolinhas...
Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Crias o slide com um UL > LI's absoluto dentro de uma estrutura de div's Relativos c/ overflow hidden.

No javascript vês o tamanho base de um LI / e moves para a esquerda (left) ou topo (top) através de posições negativas.

Algo tipo:

<div class="slideContainer">
   <div class="slider">
      <ul>
         <li><img src="" alt="" /></li>
         <li><img src="" alt="" /></li>
         <li><img src="" alt="" /></li>
         <li><img src="" alt="" /></li>
      </ul>
   </div>
   <ul>
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
   </ul>
</div>
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Não fiz dessa forma, e não percebo nada de Javascript :s

Neste momento tenho este código.

HTML:

Código: [Seleccione]
<div id="banners">

<a href="#"><div id="banner1bg"><div id="banner1"></div></div></a>
<a href="#"><div id="banner2bg"><div id="banner2"></div></div></a>
<a href="#"><div id="banner3bg"><div id="banner3"></div></div></a>
<a href="#"><div id="banner4bg"><div id="banner4"></div></div></a>

<div id="banners_navigation">
<div id="banners_navigation_buttons">
<a href="#1">●</a>
<a href="#2">●</a>
<a href="#3">●</a>
<a href="#4">●</a>
</div>
</div>

</div>
CSS:

Código: [Seleccione]
#banners { width:100%;
height:450px;
border-bottom: 15px solid #fff; }
#banners_navigation { width:150px;
height:25px;
margin: 0 auto;
margin-left: -75px;
position: absolute;
left:50%;
z-index:50; }
#banners_navigation_buttons { margin-top: 420px;
font-size:25px;
color: #999;
text-shadow: 1px 1px 5px #000; }
#banners_navigation_buttons a, #banners_navigation_buttons a:visited { color: #999; }
#banners_navigation_buttons a:hover, #banners_navigation_buttons a:active { color: #ccc; }

#banner1bg { width:100%;
background:#000;
position: absolute;
z-index: 4; }
#banner1 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner1.jpg); }

#banner2bg { width:100%;
background:#fff;
position: absolute;
z-index: 3; }
#banner2 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner2.jpg); }

#banner3bg { width:100%;
background:#000;
position: absolute;
z-index: 2; }
#banner3 { width:960px;
height:450px;
margin:0 auto;
background: url/imagens/banner1.jpg); }

#banner4bg { width:100%;
background:#fff;
position: absolute;
z-index: 1; }
#banner4 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner2.jpg); }
Banner1 e banner1bg porquê? Porque eu quero que o fundo vá mudando conforme o fundo do banner...
Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Citação de: Luís Salvador em 11/Jul/2012 18:05
Banner1 e banner1bg porquê? Porque eu quero que o fundo vá mudando conforme o fundo do banner...

Isso não influencia nada, na estrutura HTML que te dei seria só adicionares classes aos <li> do slider.

Para pores isso a funcionar bem vais necessitar de javascript /jQuery, aconselho-te a pesquisares e aprenderes mais sobre este tema ;)
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: Tiago Martins em 11/Jul/2012 18:10
Isso não influencia nada, na estrutura HTML que te dei seria só adicionares classes aos <li> do slider.

Para pores isso a funcionar bem vais necessitar de javascript /jQuery, aconselho-te a pesquisares e aprenderes mais sobre este tema ;)

Mas esse fundo tem que ocupar um width de 100%, não é apenas nos 960px do banner... Por isso é que tenho uma Div dentro de outra, uma faz o 100% de uma cor background, e a outra apenas cria uma Div ao centro com width de 960px.

Acho que não chego lá dessa forma :s

Não há forma de colocar uma Div sobre a outra conforme vá clicando nas bolinhas? lol Não precisa de fazer efeito nenhum...
Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

http://csscience.com/responsiveslidercss3/

No IE9 os efeitos morrem.

Não é compativel do IE8 / IE7
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

A cena é que eu não preciso que faça esse efeito de deslizar... só preciso que as divs vão sendo sobrepostas umas às outras...
Offline
r

ricardomoreira 
Membro
Mensagens 69 Gostos 0
Troféus totais: 19
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter Level 3 Level 2 Level 1 50 Posts 10 Posts

Podes fazer através do z-index ou colocando todas as outras divs com display: none (bem mais simples desta forma).

Quanto ao jquery, se não queres qualquer tipo de animação na transacção, é bastante simples, há várias formas de fazer, por exemplo, ao clickar na "bola" vês o seu index, escondes as divs todas e mostras a div pretendida (com o mesmo index).
Offline

Tiago Martins 
Membro
Mensagens 932 Gostos 9
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Vê o código e adaptas... ou então podes tentar arranjar outras soluções, eu se fosse a ti usaria Javascript / jQuery
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: ricardomoreira em 11/Jul/2012 18:27
Podes fazer através do z-index ou colocando todas as outras divs com display: none (bem mais simples desta forma).

Quanto ao jquery, se não queres qualquer tipo de animação na transacção, é bastante simples, há várias formas de fazer, por exemplo, ao clickar na "bola" vês o seu index, escondes as divs todas e mostras a div pretendida (com o mesmo index).

Acho que é por aí. Consegues-me dar mais algumas indicações?  :)

Obrigado a todos os que estão a tentar ajudar ; )
Offline

Luís Salvador 
Membro
Mensagens 2068 Gostos 37
Feedback +4

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Ok, acho que consegui! Utilizei estes códigos:

Script:

Código: [Seleccione]
<script>
function mostra(theId){
var theArray= new Array('banner1bg', 'banner2bg', 'banner3bg', 'banner4bg');
w=document.getElementById(theId)
if(w.style.display=="block"){w.style.display='none';}else{

 
 
           for(i=0; i<theArray.length; i++){
                        if(theArray[i] == theId){
                                w.style.display='block';
                        }else{
                                document.getElementById(theArray[i]).style.display='none';
                        }
          }
          }
         
}
</script>
HTML:

Código: [Seleccione]
<div id="banners">

<a href="#"><div id="banner1bg"><div id="banner1"></div></div></a>
<a href="#"><div id="banner2bg"><div id="banner2"></div></div></a>
<a href="#"><div id="banner3bg"><div id="banner3"></div></div></a>
<a href="#"><div id="banner4bg"><div id="banner4"></div></div></a>

<div id="banners_navigation">
<div id="banners_navigation_buttons">
<a href="#1" onclick="mostra('banner1bg');">●</a>
<a href="#2" onclick="mostra('banner2bg');">●</a>
<a href="#3" onclick="mostra('banner3bg');">●</a>
<a href="#4" onclick="mostra('banner4bg');">●</a>
</div>
</div>

</div>
CSS:

Código: [Seleccione]
#banners { width:100%;
height:450px;
border-bottom: 15px solid #fff; }
#banners_navigation { width:150px;
height:25px;
margin: 0 auto;
position:absolute;
z-index:5;
left:50%;
margin-left:-75px; }
#banners_navigation_buttons { margin-top: 420px;
font-size:25px;
color: #999;
text-shadow: 1px 1px 5px #000; }
#banners_navigation_buttons a, #banners_navigation_buttons a:visited { color: #999; }
#banners_navigation_buttons a:hover, #banners_navigation_buttons a:active { color: #ccc; }

#banner1bg { width:100%;
background:#000;
position:absolute;
z-index:4; }
#banner1 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner1.jpg); }

#banner2bg { width:100%;
background:#fff;
position:absolute;
z-index:3; }
#banner2 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner2.jpg); }

#banner3bg { width:100%;
background:#000;
position:absolute;
z-index:2; }
#banner3 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner1.jpg); }

#banner4bg { width:100%;
background:#fff;
position:absolute;
z-index:1; }
#banner4 { width:960px;
height:450px;
margin:0 auto;
background: url(/imagens/banner2.jpg); }

Páginas: 1

Posts relacionados

HTML + CSS

IE7 => Div vazio com imagem de BG via CSS

muiomuio

AdSense

Mascarar AdSense dentro de Div

Luís Salvador

HTML + CSS

Fixar DIV no topo mas não na horizontal

Luís Salvador