html - 页脚重叠内容(无法通过搜索引擎找到解决方案..)

标签 html css footer overlapping portfolio

所以...我正在为自己创建一个新的作品集，一切正常...除了页脚。 我的投资组合有 4 页，其中 3 页很短，因此页脚不会重叠，但在我的“投资组合”页面上，页脚与内容重叠，因为他有一个固定的位置。 有什么想法吗？

<body bgcolor="#FFFFFF" background="img/bg.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="box">
    <img src="images/Portfolio-tryout_01.png" />
    <div class="links">
        <div class="home">
            <a href="Index.html"><img src="images/house_home.png" /></a>
        </div>
        <div class="portfolio">
            <a href="Portfolio.html"><img src="images/Portfolio.png" /></a>
        </div>
        <div class="about">
            <a href="Services.html"><img src="images/About.png" /></a>
        </div>
        <div class="contact">
            <a href="Contact.html"><img src="images/contact.png" /></a>
        </div>
    </div>
</div>
<div id="wrapper">
    <div id="gallery">
        <h3 style="color: white; font-family: 'Marck Script', cursive; font-size: 18px; margin-left: 25px;">Photomanipulations</h3>
        <div class="holder"><!--image 1-->
            <div class="thumb"> <a href="images/AThingCalledLove.jpg" title="title for lightbox goes here"><img src="images/thumbs/AThingCalledLove.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A Thing Called Love</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 2-->
            <div class="thumb"> <a href="images/model.jpg"><img src="images/thumbs/model.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A Model with lighting effects</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 3-->
            <div class="thumb"> <a href="images/WomanBlindfolded.jpg"><img src="images/thumbs/WomanBlindfolded.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Blindfolded Woman</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 4-->
            <div class="thumb"> <a href="images/crane-lge.jpg"><img src="images/thumbs/crane_thumb.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A large crane at work on site</h3>
            </div><!--title end-->
        </div><!--holder end-->
        <div class="holder"><!--image 5-->
            <div class="thumb"> <a href="images/leaf-lge.jpg"><img src="images/thumbs/leaf.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A leaf with water splashes</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 6-->
            <div class="thumb"> <a href="images/liberty-lge.jpg"><img src="images/thumbs/liberty.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Statue of Liberty - New York</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 7-->
            <div class="thumb"> <a href="images/lioness-lge.jpg"><img src="images/thumbs/lioness.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A yawning Lioness in Africa</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 8-->
            <div class="thumb"> <a href="images/owl-lge.jpg"><img src="images/thumbs/owl.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>A midnight Owl landing on a perch</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <h3 style="color: white; font-family: 'Marck Script', cursive; font-size: 18px; margin-left: 25px;">Sites Web </h3>
        <div class="holder"><!--image 9-->
            <div class="thumb"> <a href="images/Bibliojette.jpg"><img src="images/thumbs/Bibliojette.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Bibliojette (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 10-->
            <div class="thumb"> <a href="images/cpbbw.jpg"><img src="images/thumbs/cpbbw.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>CPBBW (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 11-->
            <div class="thumb"> <a href="images/Grunge Mania.jpg"><img src="images/thumbs/GrungeMania.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Grunge (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 12-->
            <div class="thumb"> <a href="images/Minimalism.jpg"><img src="images/thumbs/Minimalism.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Minimalism (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 13-->
            <div class="thumb"> <a href="images/OneTimeFIJ.jpg"><img src="images/thumbs/OneTimeFIJ.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>OneTimeFIJ  (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 14-->
            <div class="thumb"> <a href="images/underground.jpg"><img src="images/thumbs/underground.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Underground (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 15-->
            <div class="thumb"> <a href="images/PortfolioStartAlt.jpg"><img src="images/thumbs/PortfolioStartAlt.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Debut de portfolio (pas terminé)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 16-->
            <div class="thumb"> <a href="images/StarPizza2.jpg"><img src="images/thumbs/StarPizza2.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Star Pizza (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <h3 style="color: white; font-family: 'Marck Script', cursive; font-size: 18px; margin-left: 25px;">Autres</h3>
        <div class="holder"><!--image 17-->
            <div class="thumb"> <a href="images/PianoPoster.jpg"><img src="images/thumbs/AfficheColored.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Affiche Concert de Piano (pas terminé)</h3>
            </div><!--title end-->
        </div><!--holder end-->

        <div class="holder"><!--image 18-->
            <div class="thumb"> <a href="images/Fireguitar.jpg"><img src="images/thumbs/1.jpg" /></a>
            </div><!--end thumb-->
            <div class="title">
                <h3>Logo Fire Guitar (Projet de formation)</h3>
            </div><!--title end-->
        </div><!--holder end-->

    </div><!--gallery end-->
</div><!--wrapper end-->
<div id="footer">
    <p>Jonathan Levy|| Celtic Design Inc. © 2013.</p>
</div>

和CSS:

    img {
    border: 0;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
#container {
    min-height: 100#;
    position: relative;
}
#body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */
}

.box {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 960px;
}
.box img {
    z-index: 1;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px; /* choose any height */
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    color: white;
    font-size: 10px;
}

希望你们能够提供帮助，因为这真的让我发疯!提前致谢(如果我违反了任何规则或张贴错误，我很抱歉......Stackoverlow 上的第一条消息:D)。

编辑*:顺便说一句，我尝试删除“位置:固定”属性并将其替换为隐藏的溢出，这适用于投资组合页面，但会使页脚在我的其他页面上上升，甚至在我的主页上完全消失. :(

编辑* 2:更多 CSS 以防万一

/*Nav*/
.links {
    z-index: 2;
    width: 960px;
    height: 10px;
    }
.home {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 320px;
    left: 125px;
    }
.portfolio {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 350px;
    left: 350px;
}
.about {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 380px;
    left: 580px;
}   
.contact {
    width: 128px;
    height: 128px;
    position: absolute;
    top: 330px;
    left: 740px;
}
/*Nav End*/

编辑* 3:好的，所以我完全忘记为我的投资组合页面上传 CSS(它有 3 个 CSS 文件 [a lightbox.css/styles.css/jquery.lightbox-0.5.css 因为它是唯一的使用灯箱的页面)。

lightbox.css:
@charset "utf-8";
/* CSS Document */

#wrapper{
    margin-top: 100px;
    width: auto;
}
#wrapper #gallery {
    width:900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
}
#gallery .holder {
    width: 225px;
    height: 250px;
    background-image:url(images/polaroid.png);
    float: left;
}
.holder .thumb {
    width: 140px;
    height: 120px;
    margin-top: 29px;
    margin-left: 43px;
}
.holder .title {
    width: 140px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    overflow: hidden;
}
.title h3{
    margin: 0;
    font-family: 'Marck Script', cursive;
    font-size: 14px;
    overflow: hidden;
    color: #333;
}
.holder img {
    border: none;
}
.clearFloat {
    clear:both;
}

和 jquery.lightbox-0.5.css:

#jquery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#jquery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
#lightbox-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    width: 49%;
    height: 100%;
    zoom: 1;
    display: block;
}
#lightbox-nav-btnPrev { 
    left: 0; 
    float: left;
}
#lightbox-nav-btnNext { 
    right: 0; 
    float: right;
}
#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}
#lightbox-container-image-data {
    padding: 0 10px; 
    color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
    width: 70%; 
    float: left; 
    text-align: left; 
}   
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
    display: block; 
    clear: left; 
    padding-bottom: 1.0em;  
}           
#lightbox-secNav-btnClose {
    width: 66px; 
    float: right;
    padding-bottom: 0.7em;  
}

抱歉，这篇文章太长了! ^_^

最佳答案

尝试使用粘性页脚

请按照以下步骤操作: http://www.cssstickyfooter.com/using-sticky-footer-code.html

关于html - 页脚重叠内容(无法通过搜索引擎找到解决方案..)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18529349/

上一篇：css - 如何继承/应用 Wordpress 模板 CSS 图像处理到我的小部件

下一篇：css - 如何相对于主体固定元素但不在页面流中？

相关文章：

javascript - 如何通过 JavaScript 提交表单？

html - 将鼠标悬停在单词上时在框中显示文本

html - 元素聚焦时如何防止悬停样式

html - 将页脚推到页面底部，顶部留出空白

css - float 内容下的粘性页脚

excel - excel工作表页脚中的最后保存日期

javascript - 使用 Vue.js 的动态样式

html - 在悬停时更改 div 宽度的最佳方法

javascript - 具有表格单元格属性的 div 内的水平对齐链接

html - 尝试在页脚中将文本彼此相邻移动

©2024 IT工具网  联系我们