stopka na samym dole

Wszystko o HTML, XHTML, XML, CSS.
artur236
Posty: 3
Rejestracja: 05 mar 2016, 15:17:21
Reputacja: 0
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

stopka na samym dole

Postautor: artur236 » 01 kwie 2016, 10:21:35

Witam. Od około miesiaca meczę sie z tą stopką. Przejrzałem wiele stron i spróbowałem różne kombinacje z kodami ale wciaż nie potrafie sprowadzić stopki na koniec strony.

http://artur236.cba.pl/ph/start.html

html-strona glowna

CodeColon Select All Code

<!DOCTYPE HTML>
<html lang="pl-PL">
<head>
   <meta name="description" content="Philippines-I love it!"/>
   <meta name="keywords" content="Ph, foods, traditional, island, dream, culture, palms "/>
   <title>&#9829;Philippines &#9829;</title>
   <meta charset="utf-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <link rel="stylesheet" href="wyglad.css" type="text/css"/><!-- dolaczenie css do html-->
   <link rel="stylesheet" href="menulista.css" type="text/css"/><!-- dolaczenie css do html-->
   <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
   <script async src="js/jquery-1.6.4.js"></script><!-- ładowane asynchorniczne-przyespiesz twieranie strony-->
</head>
<body>

<div class="tile1"><a href="facts.html" class="tilelink"></a></div>
<div id="container">
      
         <div class="logo"> <img  height="250" width="100%" id="obrazek" src="0.jpg"  alt="tapeta" /> </div>
         <div class="logo2"><img  class="logophoto" src="0.jpg" alt="zdjecie"></div>
         <div class="pojemnik1">
            <ol id="menu">
               <li><a href="start.html">Start</a></li>
               <li><a href="#">Info</a>
            <ul>
               <li><a href="country.html">About country</a></li>
               <li><a href="culture.html">Amazing culture</a></li>
               <li><a href="foods.html">Strange foods</a></li>
               <li><a href="reasons.html" >50 Reasons</a></li>
            </ul></li>
               <li><a href="#">Gallery</a><ul>
               <li><a href="philipines.html">Philippines</a></li>
               <li><a href="city.html">Iligan</a></li>
               <li><a href="vampire.html">My Vampire</a></li>
               </ul></li>
               <li><a href="#">FAQ</a><ul>
               <li><a href="me.html">About me</a></li>
               <li><a href="ph.html"> About Ph</a></li>
               <li><a href="would.html">Iwould...</a></li>
            </ul></li>
            </ol>   
         </div>
         <div id="zobacz"><br/><center><b>Also look at:</b></center>
              <ul type="I">
               <li ><a href="http://www.poland.ph/en/" target="_blank">Consulate republic of Poland in the Philippines<br/></a></li>
               <li><a href="http://www.justonewayticket.com/2014/12/25/travel-the-philippines-2015-20-photos-that-will-make-you-pack-your-bags-and-go/"  target="_blank">20 amazing photos<br/></a></li>
               <li><a href="http://www.philippines.hvu.nl/" target="_blank">Ph-all in one<br/></a></li>
            </ul>          
          </div>
         <div id="tekstglowny" >
            <p>Are you looking for information of the Philippines?</p>
            <p>Are you thinking about traveling to this country?</p> Not?
            <p>So maybe are u looking for curiosities about this country?</p>
            <p>If your answer on the one of above question sound "YES",then you come at the right place</p></br></div>
         <div id="reklama"></div>
         <div id="komentarz"></div>
         <div id="footer" > Artur Dróżdż &copy;2016 Warszawa,Polska</div>
</div>
<script src="jquery-1.11.3.min.js"></script>   
</body>
</html>


css:

CodeColon Select All Code

body{   background-color:white;
   color:black;
   font-size: 20px;
   font-family:cursive,sans-serif;}
#container{background-color:white;
      width:100%;
      margin: auto;
position: relative;}
h4, h1{
    text-align: center;
}
.logo{   text-align: center;
     vertical-align: middle;
   padding: 0px;
   vertical-align: bottom;
   background-color: white;}
.logo2{
   
   float:none;}
.start, galeria, omnie,faq{color:black;
   text-align: center;
   padding-top:20px;
   margin-top: 15px;
   margin-left:27px;
   margin-right: 20px;
   background-color: #FFFF00;
    height: 80px;
    min-width:25%;
   float:left;}
.start:hover,.omnie:hover,.galeria:hover,.faq:hover{
   background-color: #DDDD00;
        cursor:pointer;
min-width:25%;}
#zobacz{color:black;
   clear:both;
   float:left;
   margin-top: 8%;
   margin-right:1%;
   padding-left:1%;
   padding-bottom:2%;
   width: 15%;
   height:auto;
   background-color: #9999CC;
   text-align:left;
   border-radius: 50px;
   /*obramowanie / grubosc obramowania */
   border-style:double;
   border-width: 0px;
   font-size: 20px;
   
}
#tekst{
   float:left;
   margin-top: 3%;
   margin-left: 0%;
   margin-right: 0%;
   padding:2%;
   width: 62%;
   height:auto;
   background-color: white;
   background-position: bottom;
   font-size: 25px;}
#tekstglowny{text-align: center;
   float:left;
   margin-top: 3%;
   margin-left: 0%;
   margin-right: 0%;
   padding:2%;
   width: 62%;
   height:auto;
   background-color: white;
   background-position: bottom;
   font-size: 25px;}
#reklama{
   float:right;
   margin-top:3%;
   width: 15%;
   background-image: url("0.png");
   background-repeat: no-repeat;
   background-position:center;
   height:450px;
   background-color:white;
   margin-left:2%;
   
   }
#komentarz{
   padding-top: 20px;
   font-family: serif;
   
   clear:both;}
#footer{display: block;
   margin: 0 auto;
   font-family: serif;
   font-size: 70%;
   /*margin-top:10px;*/
   border-top-style: dotted;
   border-width: 2px;
   text-align: center;
   padding-top:1%;
   position:absolute;bottom:0;
   width: 100%;
   ;
   }
/*.gallery{
   float:left;
   width:65%;
   text-align: center;
   height:auto;}*/
.foodtable{display: block;
   border-spacing: 1px 60px;
   width:100%;
   margin: 0 auto;
   text-align: center;}
.foodphotos{height:120%;
       width:100%;
       }
 .foto2{
    float:left;
   padding-top:3%;
   padding-left:3%;
      width: 30%;
      height:180px;
      }
.foto0{ display: block;
   width: 99%;
   height:300px;
   margin: 0 auto;}
.foto{ width:30%;
   height:180px;
   text-align: center;
   padding:5px;}
.thx{margin:0 auto;
display: block;
height: 400px;
background-position: bottom;
text-align: center;}
#tekstgallery{
   margin-top: 3%;
   float:left;
   width:65%;
   text-align: center;
   height:auto;}
   /*powieksza obrazek po najchaniu*/
.foto:hover {
    transform: scale(2);}
.foto2:hover {
    transform: scale(2);}
   
   
.pojemnik1{
   text-align: center;
   color:black;
   font-size: 200%;
   margin-top: 5px;
   margin-left:auto;
   margin-right: auto;
   background-color:#EAEAAE;
   height: 80px;
   width:100%; }
.sticky{
   width: 100%;
   position:fixed;   
   margin:auto;
   top: 5px;
   z-index: 100%;
}
#about{
   
   font-size: 100%;}
ol{padding:0;
   margin: 0;
   list-style-type:none;
   font-size: :100%;
   width:100%;
   height:80px;
   line-height:200%;
   display:inline-block;
   
}
/*ustalamy wyglad linkow w menu rozwijanym*/
ol a{
   color:black;
     text-decoration: none;
     display: block;
        overflow:hidden;

}
ol>li{
   float:left;
width:20%;
height: 80px;
margin-left:4%;
}
ol>li:nth-child(1){
   background-color:#A68064;
   border-radius: 10px;}
ol>li:nth-child(2){
   background-color:#A68064;
   border-radius: 10px;}
ol>li:nth-child(3){
   background-color:#A68064;
   border-radius: 10px;}
ol>li:nth-child(4) {
   background-color:#A68064;
   border-radius: 10px;}

/*zmienia sie kolor tla po najechaniu*/
ol > li:hover{background-color: #B68e6D;}
/*zmienia kolor czcionki po najechaniu*/
ol > li:hover > a
{color: white;}
/*stylizujemy wewnetrzną*/
ol > li > ul
{
   list-style-type: none;
   padding: 0;
   margin: 0;
   height: 40px;
   display: none;
}
ol > li:hover > ul
{display: block;}
ol > li > ul > li
{
   background-color:#EAEAAE;
   position: relative;
   z-index: 100;
   border-top: 1px dashed #751b1b;
   border-radius: 10px;
   border:groove;
   border-color: #B68e6D;
   font-size: 30px;
}
ol > li > ul > li:hover
{background-color: #B68e6D;}
ol > li > ul > li:hover > a
{color: white;}


/*usuwa podkreslenie i zmienia kolor odnośnika(linku) w całym pliku! */
a:link, a:visited, a:focus { text-decoration: none; color:black;}
a:hover{color:blueviolet;}



Image
Venite
Obsługa CBA
Posty: 3196
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows 1440x900

stopka na samym dole

Postautor: Venite » 01 kwie 2016, 15:04:25

artur236, są dwie drogi.
Jeśli stopka ma być zawsze i permanentnie "przyklejona" na dole strony, to ustaw jej bottom:0; i position:fixed; w CSS.

Natomiast to, co zrobiłeś teraz - może i jest ok, ale stopka stosuje się do reguł #container (który ma automatyczną wysokość). I ta stopka jest pozycjonowana absolutnie, ale WEWNĄTRZ tego div'a. Jest w nim uwięziona. ;)

Więc możesz spróbować ją z tego DIVa wyjąć. Tyle, że to będzie dość mało estetycznie wyglądało, bo stopka przewinie się razem ze stroną. Możesz też najpierw spróbować ustawić height:100%; dla #container.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
artur236
Posty: 3
Rejestracja: 05 mar 2016, 15:17:21
Reputacja: 0
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

stopka na samym dole

Postautor: artur236 » 01 kwie 2016, 15:23:15

Dziekuje za pomoc.
wybrałem sposób 1 szy , stopka poszła na sam dół, ale okna przeglądarki. Tresć strony sie przewija zasłąniając stopke. Chciałbym żeby stopka była na samym doel strony, nie zależnie od ilości tekstu na stronie.
Image
Venite
Obsługa CBA
Posty: 3196
Rejestracja: 18 lut 2011, 08:01:57
Reputacja: 43
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Windows 1440x900

stopka na samym dole

Postautor: Venite » 02 kwie 2016, 18:17:45

artur236, najprościej jest dodać background:white; dla #footer, a dla #container odpowiedni padding-bottom w pikselach. Zależy jaki dokładnie efekt chcesz uzyskać.
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
Awatar użytkownika
Piotr GRD
Posty: 1294
Rejestracja: 25 sty 2010, 11:17:07
Reputacja: 53
Lokalizacja: Szczecin
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

stopka na samym dole

Postautor: Piotr GRD » 03 kwie 2016, 17:43:17

Przede wszystkim rozdzielmy dwie kwestie:
- wysokość strony;
- wysokość okna przeglądarki.

Obecnie stopka jak najbardziej jest na samym dole strony. Tyle, że dla Ciebie - wnioskuję z powyższego zrzutu ekranu - przy używanej przez Ciebie rozdzielczości okno przeglądarki jest wyższe od strony, strona jest niższa od okna przeglądarki. Stąd też, gdy strona się kończy, na dole jest tylko pusta przestrzeń.

Zawsze możesz wprowadzić jakąś minimalną wysokość (min-height) dla swojego pojemnika z treścią, tak aby nawet zawierając jedną linijkę tekstu przesuwał stopkę poniżej siebie. Jednak wyrażając taką wartość bezwzględnie (np. w pikselach) możesz uzyskać zupełnie niepotrzebną konieczność przewijania przy małych (niskich) ekranach, małych oknach przeglądarki. Być może skuteczna okaże się minimalna wysokość określona procentowo, ale tu też trudno będzie określić idealne wartości ze względu na różną u każdego klienta rozdzielczość ekranu, zmienną wysokość reklamy itd. itp. edycja: Ostatnia myśl: Być może - nigdy nie testowałem - uda się uzyskać efekt jaki chcesz poprzez ustawienie min-height:100%; dla <body> i określenie pozycji stopki absolutnie względem <body> właśnie.


Jak dla mnie, obecnie, w moich przeglądarkach i przy mojej rozdzielczości ekranu 1024x768 wysokość strony jest większa niż wysokość ekranu. Obrazek pomniejszony dwukrotnie:
Image
Pewne elementy mogą nie wyświetlać się tak jak zaplanowałeś, pokazuję zrzut z Opery 12 (tzw. ostatniej prawdziwej Opery), często ignorowanej, jako że przestała już być rozwijana, jej twórcy przerzucili się na "Chromoperę", więc jeśli w nowszych przeglądarkach wyświetla się poprawnie, mój zrzut zignoruj, stosunkowo mało osób z tej przeglądarki korzysta, choć jeszcze się da takich znaleźć.
Monitor serwera CBA.pl (zapisz lub dodaj do ulubionych, żeby nie zapomnieć)
------------
Kilka starych, aczkolwiek ciekawych, zdaniem niektórych, zdjęć: http://grd.art.pl/
Jezioro Szmaragdowe w Szczecinie

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 3 gości