CSS页脚错误的位置

时间：2013-07-19 01:59:12

标签： css footer

当我尝试制作页脚时，我无法将其放在位置（3）而​​是转到位置（2）。我的主要部分的位置是absolute，因为我有jQuery脚本（Fadeout / Fadein），所以无法更改。我想在底部设置页脚，但我不希望它为position:static，并且我希望我的主要部分能够在我添加更多文本时调整大小。

enter image description here

我的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，但未设置为浮动。

2 个答案:

答案 0 :(得分：1)

您的问题是由浮动引起的，可以使用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;
}

答案 1 :(得分：0)

怎么样：

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