Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Bootstrap stopka na dole strony 2 kolumny
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Lejto
6.12.2014, 21:18:51
Mam problem ze stopką na dole strony. Wszystko wygląda ok jak oglądamy stronę na ekranie laptopa lub większego monitora. Problem jest dla mniejszych rozdzielczości kiedy kolumny schodzą pod siebie, nie wiem w czym jest błąd. W pliku foortererror pokazuje jak stopka nachodzi na stronę, a w pliku footernormal jest poprawny wynik.


Kod:




[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="pl">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="css/style.css" type="text/css">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  8.  
  9.     <!-- Optional theme -->
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
  11.  
  12.     <!-- Latest compiled and minified JavaScript -->
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  14.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  15.     <script src="jquery.backstretch.js"></script>
  16. </head>
  17. <body>
  18. <script>
  19.     $.backstretch("img/bg.jpg");
  20. </script>
  21. <style>
  22.     h1 {
  23.         text-align: center;
  24.         font-family: "AvanteGarde";
  25.         font-size: 70px;
  26.     }
  27.     header p{
  28.         font-family: "AvanteGarde";
  29.         text-align: center;
  30.         font-size: 20px;
  31.     }
  32.     @font-face{
  33.         font-family:"AvanteGarde";
  34.         src: url('font/font2.ttf');
  35.     }
  36.     .col-centered{
  37.  
  38.         text-align: center;
  39.         margin: 0 auto;
  40.     }
  41.     .footer {
  42.         position: absolute;
  43.         bottom: 0;
  44.         width: 100%;
  45.         /* Set the fixed height of the footer here */
  46.         height: 60px;
  47.         text-align: center;
  48.         font-family:"AvanteGarde";
  49.     }
  50.     .ng{
  51.         color: #3a8c03;
  52.         font-family: "AvanteGarde";
  53.         font-size: 40px;
  54.         margin-top: 0;
  55.     }
  56.     html {
  57.         height: 100%;
  58.         width: 100%;
  59.         min-width: 100%;
  60.         min-height: 100%;
  61.         position: relative;
  62.      }
  63.  
  64.     body {
  65.         height: 100%;
  66.         width: 100%;
  67.         padding: 0;
  68.         margin: 0;
  69.         margin-bottom: 60px;
  70.     }
  71.  
  72.     .container-fluid{
  73.         height:60%;
  74.         display:table;
  75.         width: 100%;
  76.         padding: 0;
  77.     }
  78.  
  79.     .row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
  80.  
  81.     .centering {
  82.         float:none;
  83.         margin:0 auto;
  84.     }
  85.     header{
  86.         margin-bottom: 2%;
  87.     }
  88.  
  89. </style>
  90. <header>
  91.     <h1><label style="color: #3a8c03"> F.P.H.U </label> <label style="color: #254c0b"> Darmont</label></h1>
  92.     <p style="color: #3a8c03">KOMINKI - OCZYSZCZALNIE - DORADZTWO - SERWIS</p>
  93. </header>
  94.  
  95. <div class="container-fluid" style="width: 900px; margin: auto;">
  96.     <div class="row-fluid">
  97.  
  98.             <div class="col-sm-6 col-centered">
  99.                 <img src="img/oczyszczalnie.png"   class="img-responsive center-block">
  100.                 <p class="ng">oczyszczalnie</p>
  101.             </div>
  102.  
  103.             <div class="col-sm-6 col-centered" style="padding-left: 120px">
  104.                 <img src="img/kominki.png" class="img-responsive center-block">
  105.                 <p class="ng">kominki</p>
  106.             </div>
  107.  
  108.     </div>
  109. </div>
  110. <footer class="footer">
  111.     <p>Skontaktuj sie z nami i zapytaj o produkty</p>
  112.     <p>nr. tel: 924 456 256  e-mail: aaa@sga.com</p>
  113. </footer>
  114. </body>
  115. </html>
[HTML] pobierz, plaintext

janek5
12.12.2014, 21:47:10
Usuń pozycjonowanie absolutne dla .footer, jest zbędne.

BTW po co ustawiasz na sztywno szerokość, trochę bez sensu rozwiązanie korzystając z grid?
tomek200
30.12.2014, 19:27:49 
[HTML] pobierz, plaintext 
  1.  .footer {
  2. position: absolute;
  3. bottom: 0;
  4. width: 1000px;
  5. /* Set the fixed height of the footer here */
  6. height: 60px;
  7. text-align: center;
  8. font-family:"AvanteGarde";
  9. }
[HTML] pobierz, plaintext

w linijce width zmieniasz na 1000px i powinno dzialać.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.