CSS頁腳錯誤的位置

當我嘗試製作頁腳時，我不能將它放在位置（3）上，而是轉到位置（2）。我的主要部分的位置是absolute，它不能改變，因爲我得到了jQuery腳本（Fadeout/Fadein）。我想在底部有頁腳，但我不希望它是position:static，我希望我的主要部分能夠在放入更多文本時調整大小。CSS頁腳錯誤的位置

enter image description here

我在CSS頁腳 - 內

html 
{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px none; 
    outline: 0px none; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: none repeat scroll 0% 0% transparent; 
    min-height:101%; 
} 
body 
{ 
    background-image: url('/images/tlo.png'); 
    background-repeat:repeat; 
    font-family: Tahoma,Verdana,Arial; 
    margin: 0px; 
    font-size: 100%; 
    vertical-align: baseline; 
} 
h1, .leg 
{ 
    font-size:12px; 
    color: orange; 
    text-align:center; 
} 
h2 
{ 
    font-size:12px; 
    color: orange; 
    text-align:left; 
} 
p  
{ 
    color: white; 
    margin-top: .5em; 
    font-size: .75em; 
    padding-left:1%; 
    padding-right:1%;  
} 
.right 
{ 
    color: white; 
    margin-top: .5em; 
    font-size: .75em; 
    padding-left:5%; 
    text-align:right; 
    font-style:oblique; 
} 
#top 
{ 
    padding-top:60px; 
    padding-bottom:20px; 
    position:relative; 
    height:auto; 
    width:1024px; 
    overflow:hidden; 
    margin: 0px auto; 
    vertical-align:baseline; 
} 
nav 
{ 
    border-width: thin; 
    border:1px solid gray; 
    background-image: url('/images/tweed.png'); 
} 
header 
{ 
    background-image: url('/images/tlo.png'); 
} 
section 
{ 
    position:relative; 
    display:block; 
    height:auto; 
    bottom:10%; 
    text-align:center; 
    width:1024px; 
    vertical-align:baseline; 
    margin: 0px auto; 
    padding:10px; 
} 
#div1,#div2,#div3,#div4,#div5 
{ 
    position:absolute; 
    padding:30px; 
    top:0px; 
    left:0px; 
    width:1024px; 
    background-image: url('/images/podklad.png'); 
    vertical-align:middle; 
    border-width: thin; 
    border:1px solid gray; 
} 
#menu 
{ 
    position:relative; 
    text-align: center; 
    height:120px; 
    width:100%; 
    vertical-align:baseline; 
    margin: 0px auto; 
    border:0px; 
    font-size:0px; 
    background-image:url('/images/podklad.png'); 
    background-repeat:repeat; 
} 
footer 
{ 
    position:relative; 
    left:0px; 
    bottom:0px; 
    height:100px; 
    width:1024px; 
    background-image:url('/images/podklad.png'); 
    background-repeat:repeat; 
    vertical-align: middle; 
} 
ul.lista 
{ 
    text-align:center; 
    list-style-type:none; 
    margin:0; 
} 
ul#jezyki 
{ 
    list-style: circle; 
    color: white; 
    margin-top: .5em; 
    font-size: .75em; 
    text-align:center; 
} 
li.lista 
{ 
    display:inline; 
    margin: 0px auto; 
} 
.linki 
{ 
    font-size:14px; 
    color:white; 
    font-weight:bold; 
} 

<?php 
session_start();  
?> 

<!doctype html> 
<head> 
<title>Damian Pruszynski Webdesign</title> 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
<link href='http://fonts.googleapis.com/css?family=Habibi' rel='stylesheet' type='text/css'> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="sliding_effect.js"></script> 
<script type="text/javascript" src="mojefunkcje.js"></script> 

<meta name="keywords" content="Damian Pruszynski, webdesign, bialystok webdesign, strony www, programowanie bialystok, pisanie stron www, pisanie stron www bialystok, robienie stron www bialystok, robienie stron" /> 
     <meta name="description" content="Damian Pruszynski - strona domowa, programowanie i webdesign. Programowanie stron www - HTML5 CSS3 jQuery. Skrypty PHP5 Javascript. Bannery oraz grafiki promujące. Łatwo tanio i przyjemnie."/> 
     <meta name="author" content="Damian Pruszyński"/> 
     <meta name="robots" content="index,follow" /> 
     <meta charset="UTF-8"/> 
</head> 
<body> 
<div id="container"> 
<header> 
<a href="//plus.google.com/115218512345333970807?prsrc=3" rel="publisher" target="_top"></a> 
<a href="https://plus.google.com/114098387423288903496?rel=author"></a> 
<div id="toppodklad"></div> 
<div id="top"> 
<img src="/images/logotop.png" alt="logo glowne" /> 
</div> 

</header> 

<nav> 
<div id="menu"> 
<ul class="lista"> 

<li class="lista"><a id="pokaz1" href="#" ><img src="/images/pasek_01.png" alt=" " /></a></li> 
<li class="lista"><a id="pokaz2" href="#" ><img src="/images/pasek_02.png" alt=" " /></a></li> 
<li class="lista"><a id="pokaz3" href="#" ><img src="/images/pasek_03.png" alt=" " /></a></li> 
<li class="lista"><a id="pokaz4" href="#" ><img src="/images/pasek_04.png" alt=" " /></a></li> 
<li class="lista"><a id="pokaz5" href="#" ><img src="/images/pasek_05.png" alt=" " /></a></li> 
</ul> 

</div> 
</nav> 
<br> 
<br> 
<section> 
<div id="div1" style="z-index:5" > 
<?php 
     include("newsy.php"); 
?> 
</div> 

<div id="div2" style="z-index:4" > 
<h1>O autorze</h1> 
     <p>Witam Cię na mojej stronie. W tym dziale dowiesz sie trochę o autorze ;). Nazwyam sie Damian Pruszynski mam 22lata. Skonczylem technikum informatyczne ZSRCKP w Białymstoku. Aktualnie studiuję informatyke na Uniwersytecie w Białymstoku (III rok). Interesuję się wszelakim programowaniem, lecz najbardziej programowaniem stron www.Już w technikum napisałem i zajmowałem się stroną samorządu szkolnego.Jestem chętny do nauki i rozwijania swojej wiedzy w zakresie programowania.Chetnie podejmę sie pracy w agencji programistyczno-reklamowej. Potrafie wykonać różne bannery/grafiki oraz same strony www.<br><br></p> 
     <h1>Znane przez zemnie jezyki, frameworki, aplikacje do programowania:</h1> 
     <div id="divjezyki"> 
     <ul id="jezyki"> 
     <li>Java</li> 
     <li>C++</li> 
     <li>C#</li> 
     <li>Matlab</li> 
     <li>HTML5</li> 
     <li>CSS3</li> 
     <li>PHP5</li> 
     <li>jQuery</li> 
     <li>JavaScript</li> 
     </ul> 

     <p>Chetnie podejmie sie zaprojektowaniu strony www lub pracy jako webdesigner. Mozliwosc kontaktu macie Panstwo w menu kontakt. Znajduje sie tam formularz kontaktowy a także numer telefonu.</p> 
     </div></div> 
<div id="div3" style="z-index:3" > 
<div id="kontener1"> 


     <div id="tekst1"> 
     <h1>Strona GameSpot</h1> 
     <br> 
     <p> Prosta strona poswiecona grom komputerowym. Wykonana jest przy użyciu html, php a także css. Layout o ciemnych czarno czerwonych kolorach sprawia że strona jest bardzo czytelna. Ponadto wysokiej rozdzielczosci grafika uatrakcyjnia wyglad strony. Na stronie zastosowano pobierajace dane z baz danych skrypty do późniejszego wyświetlenia informacji na stronie. Strona zawiera także prosty skrypt logowania dla administratorow. Zapraszamy do oglądania i oceniania.</p> 

     <h1><a class="linki" href="http://activerankings.vxm.pl/index.php">Link do strony.</a></h1> 
     </div> 
     </div> 
     <br> 
     <div id="kontener2"> 


     <div id="tekst2"> 
     <h1>Strona kola naukowego</h1> 
     <br> 
     <p>Strona poświęcona jest kołu naukowemu. Wykonana jest przy użyciu html, php a także css. Obrazek strony może wskazywać innego autora lecz była to strona tworzona na zamówienie i przypisanie nowego autora było konieczne. Background o jasnych kolorach sprawia że strona jest bardzo czytelna. Ponadto wysokiej rozdzielczosci grafika uatrakcyjnia wyglad strony. Na stronie zastosowano pobierajace dane z baz danych skrypty do późniejszego wyświetlenia informacji na stronie. Strona zawiera także prosty skrypt logowania dla administratorow. Zapraszam do oglądania.</p> 

     <h1><a class="linki" href="http://dariusznoob.vxm.pl/index.php">Link do strony.</a></h1> 
     </div> 
     </div> 

     <div id="kontener3"> 


     <div id="tekst3"> 
     <br> 
     <h1>Moje stare portfolio</h1> 
     <br> 
     <p>Projekt mojego starego potfolio. Strona miała problemy z wyswietlaniem na rozdzielczosciach ponizej 1280x960. Dlatego byłem zmuszony do jej zmienienia. Mam nadzieję ze aktualna bardziej sie wam podoba. W nowym projekcie musiałem porzucić menu w jQuery ponieważ nie pasowało do nowego layoutu.</p> 

     <h1><a class="linki" href="http://starydpwebmastering.vxm.pl/index.php">Link do strony.</a></h1> 
     </div> 
     </div> 
     </div> 
<div id="div4" style="z-index:2" > 
<fieldset class="leg"> 
     <legend>Formularz kontaktowy</legend> 

     <?php include('mail.php'); ?> 
     </fieldset> 

     <fieldset> 
     <legend class="leg" >Dane kontaktowe</legend> 
     <p>Telefon: 793403039</p> 
     <p>Adres email: [email protected]</p> 
     </fieldset></div> 
<div id="div5" style="z-index:1" > 
<h1>System Logowania Administratora</h1> 
     <br> 



     <?php 

     if (isset($_SESSION['login'])) 
     { 
     include("zalogowany.php"); 

     } 
     else 
     { 
     include("logowanie.php"); 
     } 
     ?> 

     <br> 
</div> 

</section> 

<br> 
<br> 
<br> 
<br> 


</div> 

</body> 

</html>

編輯頁腳我的主要部分在CSS（DIV1-DIV5）：HTML包括在內，但它不是設置浮動。

來源

2013-07-19 user2339120

從你的形象似乎是你有一個浮動的主容器元素，導致頁腳跳之一它可能就像添加明確一樣簡單：你可以發佈你的html嗎？ – JanR

如何：

footer 
{ 
position:fixed; 
left:0px; 
bottom:0px; 
height:100px; 
width:1024px; 
background-image:url('/images/podklad.png'); 
background-repeat:repeat; 
vertical-align: middle; 
}

來源

2013-07-19 02:13:09

我不希望它是位置固定導致頁腳重疊我的主要部分，它很難閱讀。 – user2339120

你的問題是由浮動引起的，可以用clear-fix

糾正試試這個工作的最後一個div前軀

#divid:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

工作前頁腳：

.footer:before { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

或者在一個新的div與標記前軀添加像<div class="clear"></div> 和CSS

.clear { 
display:block; 
float:none; 
clear:both; 
height:0px; 
width:100%; 
margin:0; 
padding:0; 
border:0; 
}

來源

2013-07-19 02:21:07 James

CSS頁腳錯誤的位置

回答

相關問題