2014-12-19 90 views
0

我的內容文字正被我的導航欄重疊。我已經看過像這樣的其他問題,但我無法解決這個問題。
我認爲這可能是因爲我的「z-索引」。我需要頁面的功能保持與現在一樣,我只需要能夠看到內容文本的頂部。

我相信我已經放在這裏的代碼應該足以看到這個問題的解決方案。導航欄重疊內容文字

p, div, a 
 
{ 
 
    font-family: "Century", sans-serif; 
 
} 
 

 
ul 
 
{ 
 
\t list-style-type: none; 
 
} 
 

 
li 
 
{ 
 
\t display: inline-block; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t font-size: 15px; 
 
} 
 

 
nav 
 
{ 
 
\t text-align: center; 
 
} 
 

 
img 
 
{ 
 
\t min-height: 100%; 
 
\t min-width: 100%; 
 
} 
 

 
.content 
 
{ 
 
\t z-index: -10; 
 
\t position: fixed; 
 
\t text-align: center; 
 
\t min-height: 100%; 
 
\t min-width: 100%; 
 
} 
 

 
.textbox 
 
{ 
 
\t z-index: -5; 
 
\t position: absolute; 
 
\t margin-left: 11%; 
 
\t margin-top: 1%; 
 
\t text-align: left; 
 
\t color: #000000; 
 
} 
 

 
.rubrik 
 
{ 
 
\t font-size: 35px; 
 
\t font-weight: bold; 
 
} 
 

 
.brod 
 
{ 
 
\t font-size: 18px; 
 
} 
 

 
.header 
 
{ 
 
\t box-shadow: 0px 4px 25px #000000; 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background-color: #FFFFFF; 
 
} 
 

 
body 
 
{ 
 
\t margin: 0; 
 
} 
 

 
html 
 
{ 
 
\t overflow-y: scroll; 
 
}
<body> 
 
\t <div class="wrapper"> 
 
\t \t <div class="header"> 
 
\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li> <a href="index.php">FORSIDE</a> </li> 
 
\t \t \t \t \t <li> <a href="nyheder.php">NYHEDER</a> </li> 
 
\t \t \t \t \t <li> <a class="currentpage" href="hvem-er-vi.php">HVEM ER VI?</a> </li> 
 
\t \t \t \t \t <li> <a href="om-moellevangen.php">OM MØLLEVANGEN</a> </li> 
 
\t \t \t \t \t <li> <a href="vaerdigrundlag.php">VÆRDIGRUNDLAG</a> </li> 
 
\t \t \t \t \t <li> <a href="vedtaegter.php">VEDTÆGTER</a> </li> 
 
\t \t \t \t \t <li> <a href="galleri.php">GALLERI</a> </li> 
 
\t \t \t \t \t <li> <a href="kontakt.php">KONTAKT</a> </li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </div> 
 

 
\t \t <div class="content"> 
 
\t \t \t <img src="files/forside3.png"/> 
 
\t \t </div> \t 
 
\t \t 
 
<div class="textbox"> 
 
\t <p class="rubrik"> 
 
\t Bestyrelsen 
 
\t </p> 
 

 
\t <p class="brod"> 
 
\t Formand:</br> 
 
\t Anne, Galsted</br> 
 
\t Tlf: </br> 
 
\t Mobil: </br> 
 
\t </br> 
 
\t Næstformand:</br> 
 
\t Niels, Agerskov</br> 
 
\t Tlf: </br> 
 
\t Mobil: </br> 
 
\t </br> 
 
\t </p> 
 
</div> 
 

 
</body>

回答

0

你的源代碼在這裏沒有格式化好,但在這些情況下,我加入填充頂到容器或邊距孩子。

例如(你需要選擇比文本框更好的類名,但無論如何)

div.textbox 
{ 
    margin-top: 60px; 
} 
+0

感謝您的幫助。我還將我的課程更名爲更好的名稱。 – DrHerd