Images above the carousel

Question

Images above the carousel

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I'm not able to put the images above the carousel, I'm trying to put my remaining content above the car but it's not working, I've tried everything, but it's coming down. Follow the codes.

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; }

html css twitter-bootstrap

asked by anonymous 29.06.2015 / 20:40

2 answers

Remove full color from 'selection' Queries data from the Federal Revenue website with PHP

score 1 · Answer 1

1

You are using the z-index:-1 parameter in the .active class in your css. This makes the object that is active underneath everything.

29.06.2015 / 20:52

score 0 · Answer 2

The solution to the problem was to add the carcel above div#middle and add margin-top: -80vh; to raise the remainder of div#middle , so the code will look like this.

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>

and 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; }