0

Não estou conseguindo colocar as imagens acima do carrossel, estou tentando colocar meu conteúdo restante acima do carrocel porem não está funcionando, tentei de tudo, porem ele está vindo abaixo. Segue os códigos.

Index.php

        <div id="middle">
        <div class="row-fluid" id="conteudo">


              <div class="span6" id="esquerdo"> <img width="323px" height="434px" src="imagens/logo-middle.png" id="imgLogo">
            </div>
              <div class="span6" id="direito">
                <img src="imagens/img_min_1.png" id="min01">
                <img src="imagens/img_min_2.png" id="min02">
                <img src="imagens/img_min_3.png" id="min03">
              </div>

        </div>
                                <div id="myCarousel" class="carousel slide">

                                    <!-- Wrapper for Slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 1</h2>
                    </div>
                </div>
                <div class="item">
                    <!-- Set the second background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 2</h2>
                    </div>
                </div>
                <div class="item">
                    <!-- Set the third background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 3</h2>
                    </div>
                </div>
            </div>

            </div>
        </div>

Stylo.css

#conteudo { height: 80vh; }
.carousel,
.item,
.active { height: 80vh;   z-index: -1; }
.carousel-inner { height: 100%; }
/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

2 Respostas 2

2

Você está usando o parâmetro z-index:-1 na classe .active no seu css. Isso faz com que o objeto que esteja ativo fique abaixo de tudo.

1
  • Sim, mais ele não quer ficar, todo o conteúdo esta saindo da proporção. Commented 29/06/2015 às 18:55
0

A solução para o problema foi adicionar o carrocel acima da div#middle e adicionar margin-top: -80vh; para subir o restante da div#middle, então o código ficará desta forma.

Index.php

 <div id="myCarousel" class="carousel slide">

                                            <!-- Wrapper for Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <!-- Set the first background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 1</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the second background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 2</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the third background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 3</h2>
                            </div>
                        </div>
                    </div>

                    </div>
                <div id="middle">
                <div class="row-fluid" id="conteudo">


                      <div class="span6" id="esquerdo"> <img width="323px" height="434px" src="imagens/logo-middle.png" id="imgLogo">
                    </div>
                      <div class="span6" id="direito">
                        <img src="imagens/img_min_1.png" id="min01">
                        <img src="imagens/img_min_2.png" id="min02">
                        <img src="imagens/img_min_3.png" id="min03">
                      </div>

                </div>
                </div>

e o Style.css

#middle { margin-top: -80vh; height: 80vh; }
.carousel,
.item,
.active { height: 80vh;   z-index: -1; }
.carousel-inner { height: 100%; }
/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .