CSS頁腳位置錯誤
[英]CSS footer wrong position
問題描述
當我嘗試制作頁腳時，無法將其放在位置（3）上，而是轉到位置（2）。 我主要部分的位置是absolute ，並且不能更改，因為我在上面放置了jQuery腳本（Fadeout / Fadein）。 我希望頁腳位於底部，但我不希望它position:static並且我希望當我在其中放置更多文本時，我的主要部分能夠調整大小。
我在CSS中的頁腳-我在CSS（div1-div5）中的主要部分
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: kontobia@gmail.com</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>
編輯：包括html，但未在float上設置。
2 個解決方案
解決方案1
1 2013-07-19 02:21:07
您的問題是由浮動引起的，可以通過明確修復進行糾正
試試這個在頁腳之前的最后一個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;
}
解決方案2
0 2013-07-19 02:13:09
怎么樣：
footer
{
position:fixed;
left:0px;
bottom:0px;
height:100px;
width:1024px;
background-image:url('/images/podklad.png');
background-repeat:repeat;
vertical-align: middle;
}
CSS-頁腳顯示在錯誤的位置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.