1. 首頁
  2. 問答
  3. 頁腳重疊的內容（找不到搜索引擎的解決方案..）

頁腳重疊的內容（找不到搜索引擎的解決方案..）

2013-08-30 54 views
0

所以...我爲自己創建一個新的投資組合，一切工作完全正常..除了頁腳。 我在我的投資組合中有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文件[一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; 
}

難以忍受的長篇大論！^_^

來源

2013-08-30 user2339267

+0

什麼是＃體應該用於？你的html中沒有任何id =「body」？ –

+0

你是對的丹尼爾摩根，我刪除了它..我不知道爲什麼我把它放在那裏..儘管看到我沒有＃body屬性：P（我刪除#container以及..didn't有任何使用它的屬性..） – user2339267

+0

在您的頁腳，以及有底部：0;你有沒有試過把左邊：0;以及...？ –

回答

0

我希望這可以通過在烏爾頁腳ID設置一些更高的z-index值來解決：

#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; 
}

z-index：9999;

來源

2013-08-30 14:24:19 ram

+0

我試着像你說的添加一個z-index，什麼也沒有發生:( – user2339267

相關問題

 相關問題