將錶轉換爲CSS圖層

我對CSS，HTML和標記不是很好，但是在閱讀了很多CSS文章後，我不知道如何在正確的位置獲取div元素。將錶轉換爲CSS圖層

我想有在正確的地方右鍵菜單和內容。如果您對我的HTML和CSS的當前狀態有一般性評論，請隨時提供。我曾與CSS，HTML很多，但從來沒有從頭開始用div元素建立一個網站。

2011-08-05 Dennis

+1使用Boilerplate，這真是你的一個好開始！ –

謝謝大家回答！我能夠在短時間內完成它。你的回答都非常好，並且都足夠被推薦！ – Dennis

@chronoz：期待我的演示功能全面！ ;-) –

看起來像一個簡單的3格式佈局。你需要創建3個div。一個用於左側，中間和右側的內容。這三個div將被放置在一個包裝div中。

所以把你的left_menu，內容和right_menu divs，給他們一個寬度，並將它們設置爲float：left;所以他們都會被放在一起。將它們放在一個比所有三個都大的包裝div中。你完成了！

2011-08-05 13:32:00

呵呵，你不知道這個浮球有多大：左尖端幫助。我對CSS還是比較新的，所以我認爲可能有一些浮點中心，但左邊的float完全左移，但仍然是左邊的menu_wrapper！謝謝！！ – Dennis

Np。是的，float：left會將元素轉移到它可以進入容器內部的最左邊。由於這裏有另一個元素（另一列），它將排列在它旁邊，而不是重疊它。 –

檢查預覽here。

這是一個基本的設置，你有一個包含所有結構的包裝div：一個標題，三個列和一個頁腳。

包裝div的邊距設置爲自動，這將允許它在瀏覽器窗口中水平居中放置（及其所有內容）。

三列的float屬性設置爲左側，以便每個列都放在另一列的旁邊。

頁腳有一個明確的屬性設置爲這兩個，這將允許它被放置在最高浮動列之後，以避免佈局崩潰。

Div元素是塊級元素。這意味着，除了別的以外，它們佔據了所有可用的寬度空間，因此不需要爲#header和#footer div設置寬度。

編輯

爲了避免跨瀏覽器兼容和問題，最好是有一個CSS復位（一組CSS規則，這將使所有元素顯示儘可能在所有瀏覽器相同），如YUI。將其放在任何其他CSS代碼之前。

2011-08-05 13:22:51

This是一個開始學習css定位的好地方。另外，查看代碼後，您可能需要將某些元素包裝在包裝div中，以便您可以使用一個CSS規則將所有元素放在其中。

相反的：

<div id="menu-header"> 
    <h1>HEADER</h1> 
</div> 
<div id="menu-body"> 
    <p>MENU BODY</p> 
</div>

試着這麼做：

<div id="menu"> 
    <div id="menu-header"> 
     <h1>HEADER</h1> 
    </div> 
    <div id="menu-body"> 
     <p>MENU BODY</p> 
    </div> 
</div>

這樣，如果你要移動它的菜單和一切你可以寫一個CSS規則是這樣的：

#menu {float:left;margin:15px 0 0 25px;}

2011-08-05 13:24:35 k4t434sis

只是另一個！ ;-)

希望這有助於！

2011-08-05 14:14:12

啊，這很酷！我已經保存了，非常好！ – Dennis

回答