使用在創建CSS菜單類

我有一個使用表格佈局的一個網站的頁面，我試圖將其轉換爲CSS（之前從未使用過）使用在創建CSS菜單類

導航是6種形式與除放置不同的圖像。我知道我可以給每個這些使用css的id和位置，但必須有一個不太笨拙的方式？

我在想，如果我可以創建一個類指定相對於以前的鏈接位置鏈接位置，也許手動設置的第一個？

謝謝:)

來源

2010-10-26 sarconi

你在這裏問一個非常普遍的問題 - 如何使用CSS - 這種格式無法被回答。請給出一個更具體的例子，描述該網站的結構和當前標記 – 2010-10-26 13:33:54

恭喜你用合適的分區和表示CSS來替換你的表格。你最好從頭開始標記，因爲試圖從一個事物轉換到另一個事物，尤其是從表格開始非常耗時。 – jimplode 2010-10-26 13:35:59

嘗試div.classname { float: left; width: 200px }，給容器對象中的相同或不同的寬度 - 實驗，直到你滿意

來源

2010-10-26 13:33:06 warpech

雖然jimplode不會同意我的意見，表仍然是一個有效的元素在HTML中。你甚至可以用DIV使用CSS樣式display: table（see quirksmode for browser compatibility）來模擬它們。所以除非設計是一個維護噩夢，或者有其他一些真正迫切的理由來改變佈局，否則保留它。

獲得大多數瀏覽器CSS的權利可以是一個噩夢，特別是如果你需要一些「特殊」。用相同的（自動）高度說出同一行上的幾個元素。

如果你是新來的CSS，尋找工作的實例，並開始修改。

如果你這樣做是對公共網站，讓Firefox 3中，鉻，歌劇，IE6，IE7和IE8，並與他們每個人的測試。

來源

2010-10-26 13:47:39

這是使用表格的當前佈局的圖像。這很簡單，但我可以在css上找到關於多列的所有信息。我想我只需要一個？也許兩個div？ – sarconi 2010-10-26 14:37:37

下面是使用表中的當前的佈局的圖像。這很簡單，但我可以在css上找到關於多列的所有信息。我想我只需要一個？也許兩個div？

img208.imageshack.us/img208/7038/layoutsz.png

來源

2010-10-26 14:47:45 sarconi

您可以編輯您的問題以添加其他信息。（您不必爲此寫回答。） – 2010-10-26 15:00:17

純粹主義者會說，表應只用於表格數據。你的網站不是表格數據，而是佈局，所以在這裏使用表格是一種破解。如果它能夠正常工作，它就是一個非常好的黑客技術，但它最終可能不是最乾淨的解決方案。

我的務實的部分（這比我的標準納粹大很多）說，有可能是使用CSS一個更簡潔的方法。這可以消除需要用不必要的表格來消除你的來源。你真的有兩個部門，每個部門的段落都包含圖片，鏈接和文字。如果你的HTML不必包含任何內容，那將是理想的。

如果使用CSS好，你可以得到正是結果：

http://www.aharrisbooks.net/demo/sample.html

使用 '查看源文件'，查看HTML和CSS代碼。

的幾個注意事項：

我用了「字段集」元素（這是應該的形式使用，但它還有在這裏工作）
我猜對顏色
修改CSS以獲得您正在尋找的效果
我（顯然）只使用一個圖標，但相同的效果將適用於整個頁面
只需要一個div（即使這不是必需的，但它中心內容看起來不錯在頁

我喜歡這個設計是如何幹淨的HTML保持。

祝您好運，如果您有任何問題，請放下一行。

PS更多的樂趣，下面的CSS3語法添加到字段集

box-shadow: 5px 5px 5px #333; 
    border-radius: 10px; 

    -moz-box-shadow: 5px 5px 5px #333; 
    -moz-border-radius: 10px; 

    -webkit-box-shadow: 5px 5px 5px #333; 
    -webkit-border-radius: 10px;

這些屬性添加圓角和陰影了很不錯的效果。它在IE中不起作用，但最近的其他瀏覽器（Safari，Chrome，Firefox和大多數移動瀏覽器）將會看到非常好的效果。耶爲CSS3！

來源

2010-10-26 15:48:31

+1簡單的解決方案，無需工作表。 – 2010-10-27 12:00:37

使用在創建CSS菜單類

回答

相關問題