Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Bootstrap stopka na dole strony 2 kolumny
Lejto
post 6.12.2014, 21:18:51
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
janek5
post 12.12.2014, 21:47:10
Post #2





Grupa: Zarejestrowani
Postów: 13
Pomógł: 1
Dołączył: 6.12.2014

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

Usuń pozycjonowanie absolutne dla .footer, jest zbędne.

BTW po co ustawiasz na sztywno szerokość, trochę bez sensu rozwiązanie korzystając z grid?
Go to the top of the page
+Quote Post
tomek200
post 30.12.2014, 19:27:49
Post #3





Grupa: Zarejestrowani
Postów: 102
Pomógł: 4
Dołączył: 28.12.2014

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

[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ć.
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 16.04.2024 - 23:21
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn