Napisano 22 stycznia 2014 - 18:38
Witajcie jest to moja pierwsza wizyta na tym forum a wiec Witam wszytskich forumowiczów. Próbuje zrobic strone i jakos mi to dize ale doszedłem do momentu w wtórym sie po całosci wyłozyłem próbowałem przeskoczyć i ciagle nic, a problem tento footer nie wiem jak zrobić zeby był na dole tzn jak jest mało textu na stronie to sie trzyma belki widnowsa a jaki jest wiecej tekstu to normalnie sie przesuwa w dół.
Pomoże mi ktoś z tym footerem ? Byłbym bardzo wdzieczny
WT Elite
Napisano 22 stycznia 2014 - 18:59
Dajesz jakieś diva w którym zawiera się cała strona, dajesz mu padding-top na tyle jaką wysokość ma footer i position;relative;
teraz tworzysz sobie footera i dajesz mu position;relative;bottom:0px;
webDeveloper
Napisano 22 stycznia 2014 - 19:27
Dajesz jakieś diva w którym zawiera się cała strona, dajesz mu padding-top na tyle jaką wysokość ma footer i position;relative;
teraz tworzysz sobie footera i dajesz mu position;relative;bottom:0px;
Zrobiłem tak jak radzisz ale nie działa footer jest w połowie strony i kleji sie do lewej
WT Elite
Napisano 22 stycznia 2014 - 20:13
bo musisz mu ustawić szerokość, zapewne 100%
Nie wiem jaką masz tą stronę więc całego rozwiązania nie mogę Ci podać, jedynie nakierować.
Zapomniałem, temu całemu divowi dodaj height:100%
webDeveloper
WT Elite
Napisano 22 stycznia 2014 - 20:26
Zrobiłem tak jak radzisz ale nie działa footer jest w połowie strony i kleji sie do lewej
Możesz wrzucić jakieś demo na serwer?
Napisano 22 stycznia 2014 - 21:00
OK a wiec wrzucam wszytsko na serwer http://wyslijto.pl/f...load/gluez4lapk
Tak wogóle to dziekuje za zainteresowanie 
Napisano 22 stycznia 2014 - 23:49
to proponuję dla #footer dać:
position: fixed;bottom: 0;width: 100%;
No teraz to tekst podczas przewijania w dół chowa sie za footerem a footer jest przyklejony do belki windowsa a chciałbym zeby footer był pod tekstem
tak aby w momencie dodania wiecej tekstu footer był spychany w dół
Napisano 23 stycznia 2014 - 11:54
Zmierz w JS wysokość strony i w razie potrzeby zwiększ wysokość kontenera treści tak, żeby stopka zjechała w dół.
Da się to zrobić za pomocą CSS, ale dawno temu robiłem takie rzeczy więc dokładnie nie pamiętam sposobu. W JS/JQuery zdecydownie prościej będzie.
Napisano 23 stycznia 2014 - 20:25
Zmierz w JS wysokość strony i w razie potrzeby zwiększ wysokość kontenera treści tak, żeby stopka zjechała w dół.
Da się to zrobić za pomocą CSS, ale dawno temu robiłem takie rzeczy więc dokładnie nie pamiętam sposobu. W JS/JQuery zdecydownie prościej będzie.
A czy mógłbyś powiedzieć cos wiecej jak zmierzyć wysokosci strony w JS ? jak nadmieniłem na poczatku jestem poatkujacym takze zadaje pytania które dla doswiadczonych osób moga sie wydac błache
WT Elite
Napisano 23 stycznia 2014 - 20:39
Proponuję rozwiązać to, wykorzystując jQuery, na zasadzie:
if( $(document).height() < $(window).height() ){
$("#footer").css({'position','fixed'});
}else{
$("#footer").css({'position','absolute'});
}
oprócz tego w css dla #footer:
#footer{
bottom:0;
left:0;
width:100%;
}
Zrobiłem to z głowy nie sprawdzając, więc wrzuć do swoich skryptów i sprawdź czy działa.
webDeveloper
Napisano 23 stycznia 2014 - 23:56
Proponuję rozwiązać to, wykorzystując jQuery, na zasadzie:
if( $(document).height() < $(window).height() ){ $("#footer").css({'position','fixed'}); }else{ $("#footer").css({'position','absolute'}); }oprócz tego w css dla #footer:
#footer{ bottom:0; left:0; width:100%; }Zrobiłem to z głowy nie sprawdzając, więc wrzuć do swoich skryptów i sprawdź czy działa.
Zrobiłem tak jak radzisz i footer znikł.
WT Elite
Napisano 24 stycznia 2014 - 08:58
Sorry za literówki:
if( $(document).height() < $(window).height() ){
$("#footer").css({'position':'fixed'});
}else{
$("#footer").css({'position':'absolute'});
}
i będzie działać, ale:
1. musisz dać tego dużego diva o którym pisałem na początku
2. musisz zrobić porządek w godzie html, sprawdzić czy wszystkie tagi są odpowiednio pozamykane etc.
webDeveloper
Napisano 24 stycznia 2014 - 12:28
Zrobiłem tak jak radziłeś i ciagle nie jest to dołączam mój HTML i CSS coś robię źle tylko nie wiem co Byłbym Ci bardzo wdzięczny jeśli wskazałbyś co robię nie tak ?
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Tomactiv-Wagi Serwis Sprzedaż</title>
<meta name="description" content="Add your sites description here">
<meta name="keywords" content="Add,your,site,keywords,here">
<link rel="icon" type="image/x-icon" href="images/favicon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id="top">
</div>
<div id="container">
</div>
<a href="index.html" id="logo"></a>
</div>
<div id ="waga1">
</div>
<div id="sklep">
</div>
<div class clear></div>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="999" height="246" id="animacja2" align="middle">
<param name="movie" value="../images/animacja2.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="animacja2.swf" width="999" height="246">
<param name="movie" value="../images/animacja2.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Pobierz odtwarzacz Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id = "cssmenu">
<ul>
<li><a href="index.html">Firma</a></li>
<li><a href="#">Oferta</a></li>
<li><a href="#">Serwis</a></li>
<li><a href="#">Realizacje</a></li>
<li><a href="#">Referencje</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="contener">
<div id= "content">
<p>lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor lorem ipsum camtion dolor
</p>
</div>
<div id="szybki">
</div>
<div id ="szybki-text">
Nazwisko<p>
tel. <p>
<a href="mailto:[email protected]">[email protected]</a><p>
</div>
<div id="waga">
</div>
<div id ="kasa">
</div>
</div>
<div id="footer">
<script type="text/javascript"
if( $(document).height() < $(window).height() ){
$("#footer").css({'position':'fixed'});
}else{
$("#footer").css({'position':'absolute'});
}
</script>
</div>
</body>
</html>
html {
min-height: 100%;
}
body {
background:#FFF;
color:#000;
font-family: 'tw_cen_mtregular',Arial, Helvetica, sans-serif ;
font-size: 13px;
min-height:100%;
position:relative;
}
#top{
background : url('../images/top.png') no-repeat center ;
height: 2px;
}
#container{
width: 1024px;
margin:0 auto;
}
#waga1{
background : url('../images/waga1.png') no-repeat ;
width:100px;
height:121px;
margin-top:-105px;
margin-left:710px;
}
#logo{
background : url('../images/logo.png') no-repeat ;
height: 80px;
margin-top: 40px;
margin-left:130px;
display:block;
}
#sklep{
background: url('../images/sklep.png') no-repeat;
height:32px;
margin-left:990px;
margin-top:-90px;
}
#flashContent{
margin-top:80px;
margin-left:120px;
}
#cssmenu ul {
margin: auto;
padding: 0;
list-style-type: none;
position: relative;
display: block;
height: 60px;
width:1028px;
text-transform: uppercase;
font-size: 16px;
background:url('../images/menu_tlo2.png') repeat-x;
font-family:#'tw_cen_mtregular';
text-align: center;
}
#cssmenu li {
display:inline-block;
margin-top:0;
padding: 0;
}
#cssmenu li a {
display: block;
color: #ffffff;
text-decoration: none;
padding: 12px 20px 0 20px;
height: 42px;
}
#cssmenu li a:hover {
background:url('../images/menu_tlo3.png') repeat-x top left;
}
#contener{
width:1024px;
color:#000000;
}
#content{
margin-top:-10px;
font-family:#'tw_cen_mtregular';
font-size:14px;
padding:15px 10px 30px 10px;
margin-left:500px;
height:262px;
width:645px;
}
#szybki{
background: url('../images/szybki.png') no-repeat;
height:15px;
margin-top:-270px;
margin-left:130px;
}
a { color: #059fe2 }
#szybki-text{
font-family:#'tw_cen_mtregular';
font-size:15px;
line-height: 30px;
margin-top:10px;
margin-left:145px;
}
#waga{
background: url('../images/waga2.png') no-repeat;
height:180px;
width:178px;
float:left;
margin-top:30px;
margin-left:135px;
}
#kasa{
background: url('../images/kasa.png') no-repeat;
height:153px;
width:160px;
float:left;
margin-top:-10px;
;
}
#footer{
background:url('../images/footer.png') no-repeat;
height:30px;
bottom:0;
left:0;
width:100%;
}
WT Elite
Napisano 28 stycznia 2014 - 08:57
Tak jak pisałem, zrób porządek w HTML, upewnij się że tagi są w dobrych miejscach pozamykane, że wszystkie są zamknięte, że nie ma za dużo zamknięć etc.
webDeveloper
Napisano 28 stycznia 2014 - 10:13
Tak jak pisałem, zrób porządek w HTML, upewnij się że tagi są w dobrych miejscach pozamykane, że wszystkie są zamknięte, że nie ma za dużo zamknięć etc.
Przejrzałem HTML posprawdzałem tagi niby wszystko jest ok ale ciągle coś nie gra próbowałem z JS oczywiste kod zamknąłem w znacznikach <script> no i dalej jestem w tym samym miejscu.
WT Elite
Napisano 28 stycznia 2014 - 11:01
Jak poprawiłeś błędy (bo były) to ten kod który Ci podałem wykorzystaj, ale on potrzebuje jQuery, czyli musisz podpiąć plik stąd: http://jquery.com/
i mój kod dać między:
$(document).ready(function(){
//tutaj kod
});
webDeveloper
WT Elite
Napisano 30 stycznia 2014 - 09:19
Jeżeli dalej masz problem z footerem, to można to rozwiązać za pomocą CSS, w htmlu musisz mieć strukturę typu:
<div id="wrapper"> Tutaj cała zawartość strony oprócz stopki </div> <div id="footer"> tutaj footer </div>
Teraz css dajesz typu:
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
padding: 0 0 70px;
margin: 0 auto -70px;
}
Oczywiście zakładając że footer ma wysokość max 70px
webDeveloper
| Temat | Forum | Autor | Podsumowanie | Ostatni post | |
|---|---|---|---|---|---|
Problem z wtyczką Yoast SEO 4.5 dla WordPress 4.7.3 yoast seo, wordpress, problem i 1 więcej
|
WordPress | Wojciech - OpinioLogia |
|
|
|
[Problem] Brak themes.php, plugin-install.php, update-core.php - jakieś porady? |
WordPress | kubri |
|
|
|
Problem z napisaniem strony scroll, js
|
Javascript | luke99 |
|
|
|
Problem z pobieraniem
|
Propozycje, sugestie, błędy | MalyKoxik |
|
|
|
Wystąpił błąd podczas wysyłania pliku na serwer. Proszę spróbować ponownie później. - ROZWIĄZANIE PROBLEMU (home.pl) styatystyki, home.pl
|
WordPress | zonic |
|
|
0 użytkowników, 0 gości, 0 anonimowych
Projekt zonic Kodowanie MediaInfini
Community Forum Software by IP.Board 3.4.6
Właściciel: Web-talk.pl
