Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Bootstrap stopka na dole strony 2 kolumny
Lejto
post
Post #1





Grupa: Zarejestrowani
Postów: 1 385
Pomógł: 48
Dołączył: 23.05.2007

Ostrzeżenie: (0%)
-----

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



--------------------
Go to the top of the page
+Quote Post

Posty w temacie
- Lejto   Bootstrap stopka na dole strony 2 kolumny   6.12.2014, 21:18:51
- - janek5   Usuń pozycjonowanie absolutne dla .footer, jest zb...   12.12.2014, 21:47:10
- - tomek200   [HTML] pobierz, plaintext .footer {position: abso...   30.12.2014, 19:27:49

« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 10:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn