fc_logo_w_label
FructCode
Курсы и скринкастыКомьюнитиБлогЦена и оплата
Темно
ru
ВойтиРегистрация

Границы footer прижимаются к новостным статьям сверху, в чем проблема?

0
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Kinomonstr Bootstrap </title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!--Main CSS -->
    <link href="assets/css/style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    

    <div class="container-fluid">
      <div class="row">
        
        <nav role="navigation" class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header header">

              <div class="container">
                
                <div class="row">
                  
                    <div class="col-lg-12">
                      <h1><a href="#">Bakizov Cinema</a></h1>
                      <p>Cinema is our passion</p>
                    </div>

                </div>  

              </div>

              <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toogle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>

           <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
             
            <ul class="nav nav-pills">
              <li class="activ"><a href="#">Main</a></li>
              <li><a href="#">Movies</a></li>
              <li><a href="#">Serials</a></li>
              <li><a href="#">Movie Ratings</a></li>
              <li><a href="#">Contacts</a></li>
            </ul>

           </div>
            
          </div>
        </nav>

      </div>
    </div>

    <div class="wrapper">
      
      <div class="container">
        
        <div class="row">
          
          <div class="col-lg-9 col-lg-push-3"> 


            <h2>New movies</h2>
            <hr>
            <div class="row">

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/inter.png" alt="Interstellar">
                <div class="film_label">Interstellar</div>
              </div>

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/matrix.png" alt="Matrix">
                <div class="film_label">Matrix</div>
              </div>


              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/cloud.png" alt="Cloud Atlas">
                <div class="film_label">Cloud Atlas</div>
              </div>

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/max.png" alt="Mad Max">
                <div class="film_label">Mad Max</div>
              </div>

            </div>
            
              <div class="margin-8"></div>


          </div>

           <div class="col-lg-3 col-lg-pull-9">
            
          </div>


        </div>

      </div>


      <div class="container">
        
        <div class="row">
          
          <div class="col-lg-9 col-lg-push-3"> 


            <h2>New serials</h2>
            <hr>
            <div class="row">

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/breakingbad.png" alt="breakingbad">
                <div class="film_label">Breaking Bad</div>
              </div>

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/dead.png" alt="dead">
                <div class="film_label">The Walking Dead</div>
              </div>


              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/silicon.png" alt="Silicon Valley">
                <div class="film_label">Silicon Valley</div>
              </div>

              <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
                <img src="assets/img/xfiles.png" alt="x-files">
                <div class="film_label">X-Files</div>
              </div>

            </div>
            
              <div class="margin-8"></div>

              <a href="#"><h3>How Interstellar was filmed</h3></a>
              <hr>
              <p>
              Christopher Nolan is 45 years old-one of the most successful directors of our time, whose work is equally loved by both discerning critics and ordinary viewers. The film was originally produced by Paramount. When Christopher Nolan took over as director, Warner Bros., the studio that produced his last films, secured participation in the project.
              </p>
              <a href="#" class="btn btn-warning pull-right">to read</a>

               <div class="margin-8"></div>

                <a href="#"><h3>Actor Tom Hanks shared his impressions of the festival</h3></a>
               <hr>
                <p>
             On February 16, the 67th British Academy Awards Ceremony was held in London. Leonardo DiCaprio, Brad Pitt, Angelina Jolie, Cate Blanchett, Helen Mirren, Amy Adams, Christian Bale, Alfonso Cuaron and other guests and winners of the award — in our report.
              </p>
              <a href="#" class="btn btn-warning pull-right">to read</a>

               <div class="margin-8 clear"></div>

          </div>

           <div class="col-lg-3 col-lg-pull-9">
            
          </div>


        </div>

      </div>

      <div class="clear"></div>

    </div>

    <footer>
      
      <div class="container">
        <p class="text-center"><a href="#">2017080196-Bakizov</a></p>
      </div>

    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>
.header a, a:hover {
 	color:#f0ad4e;
 	text-decoration: none;
}

.header h1{
	letter-spacing: 15px;
	font-size: 300%;
}

.header p {
	color:white !important;
	font-size: 90%;
	letter-spacing: 3px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.activate>a:hover {
	color:#fff;
	background-color: #346270;
}

.nav-pills>li>a{
	color:#fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
}

.navbar-inverse {
	padding: 1%;
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}
	.nav-pills{
		text-align: center;
	}

	.header h1 {
		letter-spacing: 5px;
		font-size: 280%;
	}

	.header {
		text-align: center;
	}

	.clear {
		clear: both;
		height: 63px;
	}

}

.wrapper {
	min-height: 100%;
}

html, body {
	height: 100%;
}


.films_block {
	text-align: center;
}

.films_block img{
	margin-bottom: 5%;
	border-radius: 5px;
	border:solid 5px #dad7d5;
	width: 100%;
}

.film_label {
	padding: 2%;
	margin-bottom: 4%;
}

.margin-8 {
	margin-top: 8%;
}

footer {
	color: 666;
	background-color: #222;
	padding: 17px 0 18px 0;
	border-top:1px solid #000;
}

footer a{
	color: #999;
}

footer a:hover {
	color:#efefef;
}
bootstrap

1 ответов

0

Привет,  у тебя где-то в css ошибка, попробуй такие стили:

.header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header h1 {
	letter-spacing: 15px;
	font-size: 300%;
}

.header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}


.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #346270;
}

.nav-pills>li>a {
	color: #fff;
}

.nav-pills>li>a:hover {
	background-color: #346270;
}


.navbar-inverse {
    padding: 1%;
}

@media (max-width: 767px) {
	.nav-pills>li {
		float: none;
	}

	.nav-pills {
		text-align: center;
	}

	.header h1 { 
	    font-size: 280%;
	    letter-spacing: 5px;
	}

	.header {
		text-align: center;
	}
} 


.clear {
	clear: both;
	height: 63px;
}

.wrapper {
	min-height: 100%;
}

html, body {
	height: 100%;
}

.films_block {
	text-align: center;
}

.films_block img {
	margin-bottom: 5%;
	border-radius: 5px;
	border: solid 5px #dad7d5;
	width: 100%;
}

.film_label {
	padding: 2%;
	margin-bottom: 4%;
}

.margin-8 {
	margin-top: 8%;
}


.panel {
	border: none;
}

.panel-body {
	background-color: #f9f9f9;
}

.panel-info>.panel-heading {
	background-color: #f0ad4e;
	color: white;
	border-color: transparent;
}

.sidebar-header {
	font-size: 120%;
	letter-spacing: 2px;
}


.form-control {
	border-radius: 0px;
}

.input-lg {
	font-size: 14px;
}

footer {
	color: #666;
	background: #222;
	padding: 17px 0 18px 0;
	border-top: 1px solid #000;
}

footer a {
	color: #999;
}

footer a:hover {
	color: #efefef;
}
Sign up or Log in to write an answer