網站模板不能正確安裝在一起

我正在設計一個網站，我正在研究一個簡單的導航欄。「家，畫廊，關於我們等......」網站模板不能正確安裝在一起

無論如何，當我開始編碼導航欄時，在「家，畫廊，關於我們等......」的鏈接之間存在差距假設沒有空白，並始終連接。 所以我的問題是爲什麼會發生這種情況？它的假設看起來像這樣：

---------------------------------- 
    |home|about us|gallery|contact us| 
    ----------------------------------

，而不是我得到：

----- ---------- -------- ----------- 
    |home |about us| gallery| contact us| 
    ----- ---------- -------- -----------

這就是我可以不展示真實的頁面做的最好的，所以希望這些例子就夠了。我嘗試了所有的東西，所有的按鈕都是128 x 58像素，我試圖設置表格寬度&高度很多不同的方式，我也不知道爲什麼我會得到這些差距。 我能做什麼錯？只是爲了讓事情更清晰易懂，這裏是我的導航欄的鏈接。 http://krat0s.x10.mx/

這裏是代碼： http://pastebin.com/4Dsv0ish

來源

2011-12-20 nastyn8

一些html？一些CSS？ – Samich 2011-12-20 09:42:35

代碼在哪裏？我們是否應該發佈*猜測問題可能是什麼，所以你可以告訴我們*「這不像我想要做的事情」*？ – 2011-12-20 09:53:27

是的，我可以，因爲它不是我想要做的事情，除此之外，我懷疑你甚至不知道從哪裏開始 – nastyn8 2011-12-20 10:06:29

的Html

<ul id="menu"> 
    <li>home</li> 
    <li>about us</li> 
    <li>gallery</li> 
    <li>contact us</li>  
</ul>

的CSS

#menu li { float:left; width:128px; height:58px; background:red; text-align:center; } 
#menu li:hover { background:green; cursor:pointer; }

例子：http://jsfiddle.net/DrUhA/

來源

2011-12-20 09:46:21 Samich

這完全不像我想要做的 – nastyn8 2011-12-20 09:52:41

如果你閱讀你的questino，你需要帶按鈕的buld導航欄在按鈕之間沒有任何間隙。這就是我在例子中所做的。如果我錯了，請澄清一下。 – Samich 2011-12-20 09:54:42

在這裏，這將讓它更容易站立，這是我正在工作。 http://krat0s.x10.mx/ – nastyn8 2011-12-20 09:57:48

使用你的鏈接，你在上面發佈註釋（krat0s .x10。 MX）它是由於你沒有設置cellpadding和cellspacing到0

對於你的表包含導航欄打開表標籤切換到該

<table width="55%" height="58" cellspacing="0" cellpadding="0">

那是速戰速決的事實，但我可能會建議你不要使用表格佈局，除非你要顯示錶格數據，因爲它是不好的做法，如果大多數網頁設計師令人難以接受的，在期待使用divisons <div>和列表：

<ul> 
    </li></li> 
<ul>

與Samich的建議類似，可能需要更多時間來學習如何使用這種方法進行編碼，但這是一種更好的方法。

一些鏈接爲您

W3 schools - 教你最不同的標籤和它們的用途，以及一些基本的教程。

Tizag - 我使用這更多的練習PHP，但他們有一些HTML教程。

對不起，我不能提供更多的鏈接，因爲我學習我的HTML和CSS的方式主要來自隨機教程和線索和錯誤，這是多年前。對於無表格佈局，您需要查看諸如CSS屬性等內容：floatclear和position。快速的google search帶來了一堆教程，你可以試試！

祝你好運！ :)

來源

2011-12-20 10:58:11 RobFos

非常感謝，我會採納您的建議，並且您完美地解決了我的問題。 – nastyn8 2011-12-20 17:15:57

什麼書你會建議學習HTML和CSS – nastyn8 2011-12-20 17:22:34

@ nastyn8嗨，我不能真正建議任何，因爲我沒有使用任何我自己，我已經更新了我的答案與幾個鏈接雖然，祝你好運:) – RobFos 2011-12-21 09:51:40

我只想嘗試將cellspacing="0"和cellapdding="0"添加到您的表格標記。這應該向伎倆

<table width="55%" height="58" cellspacing="0" cellpadding="0">

心連心

來源

2011-12-20 11:08:52

試試這個：

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

如果它不工作，那麼很可能它的<td>的填充：

然後做：

td { 
    padding: 0; 
}

如果不解決這個問題，然後應用這些：

table, td { 
    border-collapse: collapse; 
    border-spacing: 0; 
    padding: 0; 
}

由於Rawb92建議，避免使用表格來佈局。在你的情況下，列表更多語義正確標記在您的導航。

來源

2011-12-20 14:37:09

網站模板不能正確安裝在一起

回答

相關問題