页脚在标题后显示

时间:2012-02-12 12:54:53

标签: html css footer

我正在网站上工作。我已经制作了页眉和页脚,但页眉后面的页脚显示非常奇怪。我之间还有其他div,但我无法理解为什么它不会显示在它们之后。 请看一看。谢谢。

<title> Website</title>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/core.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/selector.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/event.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/ajax.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/fx.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iutil.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/idrag.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/accordion.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/carousel.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/fisheye.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iautocompleter.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/icassistant.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iexpander.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/imagebox.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iresizable.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/iselect.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/islider.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/islideshow.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/isortables.js"></script>
        <script type="text/javascript" src="./Carousel demo - Interface plugin for jQuery_files/ittabs.js"></script>
<style type="text/css" media="screen">
*
{       
    margin: 0;
    padding: 0;
}
img
{
    border: none;
}
body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666;
    background-color: #0C9;
}
#carousel
{
    width: 400px;
    height: 150px;
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -350px;
}
#carousel a
{
    position: absolute;
    width: 110px;
}

#ImageBoxOverlay
{
    background-color: #000;
    z-index: 1000;
}
#ImageBoxOuterContainer{
    z-index: 1000;
}
#ImageBoxCaption
{
    background-color: #F4F4EC;
}
#ImageBoxContainer
{
    width: 250px;
    height: 250px;
    background-color: #F4F4EC;
}
#ImageBoxCaptionText
{
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 13px;
    color: #000;
}
#ImageBoxCaptionImages
{
    margin: 0;
}
#ImageBoxNextImage
{
    background-image: url(images/imagebox/spacer.gif);
    background-color: transparent;
}
#ImageBoxPrevImage
{
    background-image: url(images/imagebox/spacer.gif);
    background-color: transparent;
}
#ImageBoxNextImage:hover
{
    background-image: url(images/imagebox/next_image.jpg);
    background-repeat:  no-repeat;
    background-position: right top;
}
#ImageBoxPrevImage:hover
{
    background-image: url(images/imagebox/prev_image.jpg);
    background-repeat:  no-repeat;
    background-position: left bottom;
}
#header
{
    width:auto;
    height:40px;
    background-color:#09F;
}
#footer
{
    width:auto;
    height:40px;
    background-color:#09F;
    clear: both;
}
</style>
<script id="__isTpiViewExists"></script><link rel="stylesheet" type="text/css" href="chrome-extension://pacgpkgadgmibnhpdidcnfafllnmeomc/css/about.css"></head><style type="text/css" id="CWToolbarStyle">html { padding-top: 0px !important;}</style><link rel="stylesheet" type="text/css" href="data:text/css,">
<!-- I have edited html { padding-top: 34px !important; to html { padding-top: 0px !important;} on the previous line -->

<body>
<div id="header">

</div>
<div id="carousel" style="top: 134px !important; " class="SkipMeIAmAlradyAbsolutePushed">
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw1.jpg" title="Moon eclipse" rel="imagebox" style="top: 25.970793906497065px; left: 18.546546530145918px; width: 86px; height: 48px; z-index: 60; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw1.jpg" width="100%"></a>
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw2.jpg" title="Rain drops" rel="imagebox" style="top: 6.851401944245097px; left: 123.75034466446243px; width: 57px; height: 32px; z-index: 12; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw2.jpg" width="100%"></a>
    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw3.jpg" title="Church" rel="imagebox" style="top: 2.8806080377480257px; left: 415.2037981343167px; width: 51px; height: 28px; z-index: 2; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw3.jpg" width="100%"></a>
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights1.jpg" title="City lights" rel="imagebox" style="top: 17.52920609350293px; left: 601.9534534698541px; width: 73px; height: 41px; z-index: 39; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights1.jpg" width="100%"></a>
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights2.jpg" title="Flash lights" rel="imagebox" style="top: 36.6485980557549px; left: 496.74965533553757px; width: 102px; height: 57px; z-index: 87; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights2.jpg" width="100%"></a>
    <a href="http://interface.eyecon.ro/demos/images/imagebox/lights3.jpg" title="Laser lights" rel="imagebox" style="top: 41.119391962251996px; left: 205.29620186568388px; width: 108px; height: 60px; z-index: 97; "><img src="./Carousel demo - Interface plugin for jQuery_files/th_lights3.jpg" width="100%"></a>
<div style="position: absolute; z-index: 1; top: 0px; left: 0px; "><canvas style="position: absolute; top: 72px; left: 18px; width: 86px; height: 24px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 37px; left: 123px; width: 57px; height: 16px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 29px; left: 415px; width: 51px; height: 14px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 57px; left: 601px; width: 73px; height: 20px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 92px; left: 496px; width: 102px; height: 28px; " height="31" width="110"></canvas><canvas style="position: absolute; top: 100px; left: 205px; width: 108px; height: 30px; " height="31" width="110"></canvas></div></div>
<script type="text/javascript">
    window.onload = 
        function()
        {
            $('#carousel').Carousel(
                {
                    itemWidth: 110,
                    itemHeight: 62,
                    itemMinWidth: 50,
                    items: 'a',
                    reflections: .5,
                    rotationSpeed: 1.8
                }
            );
            $.ImageBox.init(
                {
                    loaderSRC: 'images/imagebox/loading.gif',
                    closeHTML: '<img src="images/imagebox/close.jpg" />'
                }
            );
        };
</script>
        <script language="JavaScript" type="text/javascript">var client_id = 1;</script>
        <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
        <noscript>
</noscript>
<div id="ImageBoxOverlay" style="position: absolute; display: none; top: 0px; left: 0px; opacity: 0; "> </div><div id="ImageBoxOuterContainer" style="display: none; position: absolute; overflow-x: hidden; overflow-y: hidden; top: 0px; left: 0px; text-align: center; background-color: transparent; "><div id="ImageBoxContainer" style="display: none; position: relative; overflow-x: hidden; overflow-y: hidden; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; top: 0px; left: 0px; z-index: 2; "><img src="./Carousel demo - Interface plugin for jQuery_files/loading.gif" id="ImageBoxLoader" style="position: absolute; "><a id="ImageBoxPrevImage" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; display: none; overflow-x: hidden; overflow-y: hidden; text-decoration: none; "> </a><a id="ImageBoxNextImage" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; overflow-x: hidden; overflow-y: hidden; text-decoration: none; "> </a></div><div id="ImageBoxCaption" style="position: relative; text-align: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; z-index: 1; "><div id="ImageBoxCaptionText" style="padding-left: 10px; "> </div><div id="ImageBoxCaptionImages" style="padding-left: 10px; padding-bottom: 10px; "> </div><a id="ImageBoxClose" href="http://interface.eyecon.ro/demos/carousel.html#" style="position: absolute; right: 10px; top: 0px; "><img src="./Carousel demo - Interface plugin for jQuery_files/close.jpg"></a></div></div><div id="mainContainer_CTID"><div class="fixedDiv SkipThisFixedPosition UrlGadgetsDiv" style="position: fixed; left: 0px; top: 34px !important; z-index: 2147483640; ">
</div>
    <div class="fixedDiv SkipThisFixedPosition GeneralGadgetsDiv" style="position: fixed; left: 0px; top: 34px !important; z-index: 2147483640; width: 100%; ">
    </div>
</div>

<div id="footer">
</div>

</body>
</html>

2 个答案:

答案 0 :(得分:2)

你的div都没有指定高度。你只需要指定一个高度,它就会非常愉快。

答案 1 :(得分:1)

指定#div的高度,但不要使用百分比!这不适用于每个浏览器和%方式不同......