CSS邊距/填充/定位問題

Question

    body  {
     background-color: white;
     color: #000000;
     font-family:"arial",arial;
     margin:auto;
     }



(header logo EWITA)    #header {
      position:relative;
      left:-150px;
      background-color:transparent;
      text-align:center;
      margin-top:50px;
      padding:0;}



(HR LINE)    hr.main {

      position:relative;
      top:-5px;
      background-color:#353535;
      height:10px;
      width:100%;
      margin:0;
      padding:0;
      z-index: -1;

      }

       #menubar {
     position:relative;
     background-image: URL('./pictures/menu.png');
     background-repeat:no-repeat;
     left:730px;
     top:-40px;
     height:25px;
     width:300px;
     background-color:transparent;
     color:#ffffff;
     padding:5 0 0 20;
    }


(menu bar)    table,tr,td {
      border-spacing:0;
      border-collapse:collapse;
      padding:0 10 0 10;
    }





(page after head)     #wrapper {

       margin:auto;
       min-height:500px;
       background-image: URL('./pictures/background.png');
       background-repeat: repeat-xy;
       z-index:-2;
       }



    #content {
      margin:auto;
      width:700px;
      background-color:#ffffff;
      margin-top: 40px;
      border:1px solid;
      padding: 50 30 50 30;

這是我的CSS，我正在為客戶編寫頁面，由於某些相對位置，這使我遇到了背景問題，因為您在此處看到HR行后的白線。

謝謝大家的回應。

Answer 1

編輯：

想知道如何更新此答案，因為有很多要討論的話題，所以最好是自下而上。 這將使您進入這樣的布局：

• 第一階段演示。

調整窗口大小等時，菜單和徽標應保留在原位。

---

現在看一下您的代碼。 更好，但是您仍然遇到一些麻煩：

1. 邊框仍設置在圖像上。 無效的標記。
2. repeat-xy仍在背景上使用。 無效的屬性值。
3. #content仍具有填充，沒有單位。 無效的屬性值。
4. <br>標記仍用於在文本中創建段落。
5. #content之后還有一個額外的} 。 使CSS文件無效。

數字4 應該固定 ，但現在不那么重要。

正如我們已經討論過的1-3一樣，很難理解為什么要保留它們。 無效的標記和樣式會使結果不可靠。

它可以在一個瀏覽器中看起來不錯，在一個瀏覽器的一個版本中，在另一個瀏覽器中看起來很爛，而在第三個瀏覽器中完全崩潰。 您會在代碼和結果之間得到錯誤的信息 。 當您將其修復為有效時，或者其他意外情況可能會發生變化 ，您必須做更多的工作才能對其進行清理。 總體而言，規則第一。 無論從怎樣做的角度看標記和樣式有多么錯誤 ， 都必須將無效的標記和樣式排除在外。

為了驗證您的工作，並按照自己的經驗進行驗證，請始終做到。 做一些小改變：驗證。 做一些小改變：驗證。 等等。 采用：

• 對於HTML
• 對於CSS

---

標記

現在的標記不是最容易樣式化或以動態方式表現良好的標記。 hr並不是最容易使用的瀏覽器，並且在不同的瀏覽器之間會有所不同。 不要使用菜單的樣式或表。 最好保留它們的用途：顯示表格數據。 對於菜單，您可以問自己： 什么是菜單 ； 好吧，這是一個清單。 最終用戶瀏覽站點的選項列表。 網上有很多使用列表作為菜單的示例。 在網上搜索CSS列表菜單等。您可以創建外觀漂亮，僅跨瀏覽器的可靠CSS（無JavaScript依賴）菜單。

---

但是，讓我們從基本標記開始 ：通常，將整個頁面包裝在包裝器中會很好。 然后在其中添加子項。 要放置元素（如主菜單，徽標等），最好為每個元素使用一個包裝，然后按浮點數，邊距等對其進行定位。

通常使用邊距和填充。

頁面布局

頭師
分頻器 Div

內容


DIV
頁腳 Div

頭
左浮動Div左浮動

LOGO 菜單

樣式+標記

為了使自己更輕松，請使用臨時邊框和背景色查看各種元素如何浮動。 還可以使用瀏覽器的內置工具來顯示各種內容，例如邊距等。這是無價的。

僅記住，如果您使用邊框，並且打算在成品上將其移除，它們會占用空間。

舉個例子，您可能會有這樣的事情：

• 強彩色的第一次嘗試。

HTML：

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
            </a>
        </div>
        <div id="menubar">MENU</div>
    </div>
</div>

CSS：

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
    background : orange;
}
#wrap {
    position   : relative;
    background : pink;
    width      : 100%;
    height     : 100%;
}
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}
#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
#menubar {
    position   : relative;
    background : #fff;
    width      : 300px;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px;
}

注意：我通過以下方式對所有元素使用邊距和填充進行硬重置：

* {
    margin : 0;
    padding; 0;
}

然后在使用標簽和元素時設置邊距和填充。 通常，這是比其他方法容易得多的方法。 請記住，諸如身體之類的東西也有填充物等，通常會導致不希望的間距。

這樣，您還可以擺脫底部的水平滾動條。

通過在徽標和菜單欄之類的東西上使用float，元素可以很好地對齊。

---

接下來，我們可以添加除法器 。 在這里，我們可以使用div並為頂部和底部設置邊框。 在內容上，我們使用填充來在頁眉，文本和頁腳之間留出空間。 我們還將白色邊框添加到與分隔符很好地對齊的內容頂部。

• 添加了分隔符，內容和頁腳。

HTML：

<div id="divider"></div>
<div id="main_content">
    MAIN CONTENT
</div>
<div id="footer">
    FOOTER
</div>

CSS：

#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}
#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}

---

接下來，我們可以添加內容文本並設置其樣式。 還為頁腳添加了樣式。

• 具有內容和樣式化的頁腳。

的HTML

<div class="content_text">
    <p>
        text text text ...
    </p>
</div>

CSS：

.content_text {
    margin     : 0 auto;
    width      : 700px;
    background : #fff;
    border     : 1px solid;
    padding    : 50px 30px;

}
.content_text p {
    font-size  : 16px;
}

調整窗口等的大小，然后看到它很好地浮動。

---

現在該添加菜單了。 如前所述，我們可以使用列表作為菜單。 它比表格更適合於任務。 在這方面，還請注意菜單可能包含子項，因為這樣的列表成為唯一理智的選項。

還要注意菜單上的內容：您可能不想用其他顏色設置訪問過的鏈接的樣式。 但這當然取決於您。

• 添加了菜單，並對背景顏色進行了一些重新樣式設置等。

HTML：

<ul>
    <li><a class="menu" href="smaler.php">úvodní&nbsp;stránka</a></li>
    <li><a class="menu" href="sluzby.php">služby</a></li>
    <li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>

CSS：

由於我們已經在所有元素上設置了邊距和填充為0，所以這很簡單：

#menubar ul {
    list-style : none;
}
#menubar li {
    padding    : 0 10px;
    float      : left;
}
a.menu {
    text-decoration : none;
    color      : #fff;
}
a.menu:hover,
a.menu:active {
    color      : #3cc8a8;
}

刪除幫助色等，我們已經准備好進行進一步測試和擴展的版本0.1。

• 結果。
• 結果為一頁。
• 在W3C上對結果進行驗證的標記
• 在W3C上對結果進行驗證的CSS

---

原始答案：

---

再有一個問題。 首先，標記：

XHTML

<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />

<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />

<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />

<hr class="main" /></hr>
Should be:
<hr class="main" />

---

使用段落對文本進行分組，而不是：

Text<br/><br/>Text<br/><br/>Text ...

但：

<p>Text</p><p>Text</p><p>Text... </p>

的CSS

內聯注釋無效，請使用：

/* some comment */
Not:
// some comment

您缺少大多數填充值的單位。 如果值非零，則需要一個單位，例如pt ， px等。使用：

padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;

如果不這樣做，則它沒有/（不應有）作用。

background-repeat沒有repeat-xy 。 采用：

background-repeat: repeat;
/* not */
background-repeat: repeat-xy;

或根本沒有，因為這是默認設置。

---

首先修復那些。 然后為您的事物設置一些顏色，以便更輕松地了解您想要的內容。 您可以稍后再將其更改。 使用紅色，藍色等。

例子

---

關於零寬度沒有中斷空間的錯誤，如Vim中所示：

Answer 2

嘗試添加以下CSS：

CSS：

#wrapper {

margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px; 
}

#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}

我最初完全忽略了“ padding-top” css屬性。 謝謝大家提供的信息！

請使用此CSS更新您的網站，讓我知道它是否有效！ 由於我是在自己的計算機上測試過的，因此您應該將background-url改回自定義的.png文件。