標題將不會出現在網頁上

我正在建立一個網站佈局，並且無論出於何種原因，標題不會出現在文檔的html版本中（文本根本不會出現）。我試圖弄清楚如何將頁面分區，以便文本可以快速且相對容易地插入（有點像構建模板）。我還試圖添加一個菜單欄和一個小頁腳。佈局應該如下所示：與內容疊加的漸變。內容佈局包含一個標題，在其正下方有一個菜單欄，其餘內容分爲兩部分（「左」和「主」），底部是一個非常小的頁腳（僅足以保存版權）。代碼如下：標題將不會出現在網頁上

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet" type="text/css"/> 
    <title>Welcome to AskMeMore.Org!</title> 
</head> 
<body> 
    <div id="background"> 
     <img src="gradient.jpg" height="50%" width="100%" /> 
    </div> 
    <div id="overlay"> 
     <div id="content"> 
      <div id="body"> 
       <div id="header">Header</div> 
       <div id="left">Hi</div> 
       <div id="main">Welcome</div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS：

#background { 
    background-repeat:repeat-x; 
    position:relative; 
    z-index:1; 
} 
#overlay { 
    position:relative; 
    top:-975px; 
    left:15%; 
    z-index:10; 
    background-color:#FFFFFF; 
    width:70%; 
} 
#content { 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:#FFFFFF; 
} 
#header { 
    background-color:#FFFFFF; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#body { 
    background-color:#FFFFFF; 
} 
#left { 
    position:absolute; 
    top:0; 
    left:0; 
    background-color:#FFFFFF; 
    width:25%; 
    padding-top: 20px; 
    padding-left: 20px; 
} 
#main { 
    position:absolute; 
    top:0; 
    right:0; 
    background-color:#FFFFFF; 
    width:71%; 
    padding-top: 20px; 
    padding-left: 20px; 
}

來源

2012-08-30 tesseract4d

爲什麼不在'body'或'#overlay'的CSS中使用'background-image'而不是創建''並嘗試將它放置在內容下？ –

您的div＃背景後立即使用的圖像。我想你想整個頁面的背景所以刪除此：

<div id="background"> 
    <img src="gradient.jpg" height="50%" width="100%" /> 
</div> 

    #background { 
    ..remove all styles 
    background-repeat:repeat-x; // not required because you never used a background

僅使用覆蓋DIV，並以此作爲一個樣式#overlay：

background: #00ff00 url('gradient.jpg') no-repeat center;

來源

2012-08-30 16:10:35 user1622689

但爲什麼不出現標題？ – tesseract4d

z-index：1;爲背景和z-index：10;爲下一個。這隱藏它，嘗試使用chromes檢查元素。你會知道bacgkround div在哪裏（如下） – user1622689

的問題是，你的左邊和主分區都設置爲top: 0，這意味着它們重疊的標題也設置爲top: 0。由於left和main具有不透明（白色）背景，因此會阻止後面的內容。

以下是我剛剛玩過一些背景色的小提琴。我已將標題設爲紅色（以便於查看它的確切位置）以及left和main透明。這裏的標題是可見的。

http://jsfiddle.net/chrisvenus/RVxqM/

如果您註釋掉設置left透明線路，然後上面的線將其設置爲綠色，你可以看到這擋住了紅頭單元格immeditely如何。

有兩種解決方案。首先，也許最好的做法是讓你的漸變成爲一個合適的CSS背景圖像，而不是一個img，它的內容已經移過它。

第二個選項可能會創建一個包含分區做絕對定位，然後更多的傳統定位它的子（即標題爲正常和左，主要浮動或什麼是適當的。

的精確解就看你自己的情況，但是這告訴你它爲什麼會錯，並希望讓你找到最適合你的解決方案。

來源

2012-08-30 16:26:05 Chris

我不知道你想達到這裏究竟是什麼，但原因標題未顯示是因爲您已將它放置在與其他元素完全相同的位置;它們將其覆蓋。

我強烈建議您閱讀一些CSS教程，其中有一些很容易遵循的教程，解釋如何完成我認爲您想要實現的內容。

快速谷歌提供：http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

來源

2012-08-30 16:28:14

設置top:-975px移動你的疊加DIV（和它的全部內容），975個像素以上的瀏覽器窗口的頂部。

來源

2012-08-30 16:36:01

標題將不會出現在網頁上

回答

相關問題