1

Footer находится поверх слайдера, точнее точки слайдера сдвигаются вместе с Footer'ом. введите сюда описание изображения

СSS:

#forfooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;

}

HTML:

<body>
    <!-- Общий div для всей в -->
    <div class="maindiv" id="main_div">
        <!-- Блок хедера (шапка сайта) -->
        <div id="forheader">
            <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" />
        </div>
        <!-- Конец блока хедера -->
        <div id="forbody">
            <div class="tabs">
                <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут-->
                    <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                </ul>
            </div>  
        </div>     
        <!--СЛАЙДЕР -->
        <div id="carousel" class="carousel slide">
    <!--Индикаторы слайдов-->
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка-->
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!--Слайды-->
    <div class="carousel-inner">
        <div class="item active">

            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Первый слайд</h3>
                <p>Описание первого слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Второй слайд</h3>
                <p>Описание 2 слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Третий слайд</h3>
                <p>Описание 3 слайда</p>
            </div>
        </div>
    </div>

    <!--Стрелки переключения слайдов-->
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span> 
    </a>    
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

        <!-- Блок футера -->
        <div id="forfooter">

            <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" />
        </div>
        <!-- Конец футера -->
    </div>
    <script src="js/Script.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
</body>
1

1 ответ 1

1

У Вас footer внутри карусели.

Либо вынесите ее:

#forfooter {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;

}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
</head>
<body>
    <!-- Общий div для всей в -->
    <div class="maindiv" id="main_div">
        <!-- Блок хедера (шапка сайта) -->
        <div id="forheader">
            <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" />
        </div>
        <!-- Конец блока хедера -->
        <div id="forbody">
            <div class="tabs">
                <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут-->
                    <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                </ul>
            </div>  
        </div>     
        <!--СЛАЙДЕР -->
        <div id="carousel" class="carousel slide">
    <!--Индикаторы слайдов-->
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка-->
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!--Слайды-->
    <div class="carousel-inner">
        <div class="item active">

            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Первый слайд</h3>
                <p>Описание первого слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Второй слайд</h3>
                <p>Описание 2 слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Третий слайд</h3>
                <p>Описание 3 слайда</p>
            </div>
        </div>
    </div>

    <!--Стрелки переключения слайдов-->
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span> 
    </a>    
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

        
    </div>
      
      <!-- Блок футера -->
        <div id="forfooter">

            <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" />
        </div>
        <!-- Конец футера -->
    <script src="js/Script.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
</body>
</html>

Либо измените положение, задав bottom: -80px;:

#forfooter {
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 80px;

}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
</head>
<body>
    <!-- Общий div для всей в -->
    <div class="maindiv" id="main_div">
        <!-- Блок хедера (шапка сайта) -->
        <div id="forheader">
            <img src="http://placehold.it/900x108" width="900" height="108" alt="Хедер" title="Шапка сайта" />
        </div>
        <!-- Конец блока хедера -->
        <div id="forbody">
            <div class="tabs">
                <ul class="nav nav-pills centered" id='MenuMenu'> <!--Вместо табс можно pills, другие кнопки будут-->
                    <li><a href="#tab-1" data-toggle="tab">Вкладка меню 1</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                    <li><a href="#tab-2" data-toggle="tab">Вкладка меню 2</a></li>
                </ul>
            </div>  
        </div>     
        <!--СЛАЙДЕР -->
        <div id="carousel" class="carousel slide">
    <!--Индикаторы слайдов-->
    <ol class="carousel-indicators">
        <li class="active" data-target="#carousel" data-slide-to="0"></li> <!—внизу 3 круглишка-->
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!--Слайды-->
    <div class="carousel-inner">
        <div class="item active">

            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Первый слайд</h3>
                <p>Описание первого слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Второй слайд</h3>
                <p>Описание 2 слайда</p>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/948x265" alt="">
            <div class="carousel-caption">
                <h3>Третий слайд</h3>
                <p>Описание 3 слайда</p>
            </div>
        </div>
    </div>

    <!--Стрелки переключения слайдов-->
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span> 
    </a>    
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

        <!-- Блок футера -->
        <div id="forfooter">

            <img src="http://placehold.it/900x67" width="900" height="67" alt="Футер" title="Производители" />
        </div>
        <!-- Конец футера -->
    </div>
    <script src="js/Script.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js "></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "></script>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.