如何解決固定垂直和水平導航的頁面

我將Jpeg鏈接到此請求以更好地說明我的問題（https://drive.google.com/file/d/0B7gjrjsUBWeTTDA1S1JpeFAwWFE/view?usp=sharing）。我在CSS和HTML方面相當新穎，我想推動自己（我爲了娛樂而做的一些事情）。我正在使用Skeleton Boilerplate製作類似於GMAIL收件箱的儀表板。如何解決固定垂直和水平導航的頁面

我將擁有一個我已經制作的主標題（菜單）。我現在想弄明白的是如何處理垂直導航和第二個標題？

我是否將垂直導航列表作爲列表？垂直導航右側的第二個標題如何排列？我想我只是在尋找策略。對不起，關於這是一個noob問題。任何輸入都會有幫助。

來源

2015-08-30 teddyr00se

的幾點思考：

jsFiddle Demo

對於谷歌友好的搜索引擎優化，封裝內<nav></nav>標籤導航，並使用錨標籤的菜單項，無論是內部列表結構與否：

<ul><li><a html="#">Menu Item</a></li></ul>

使用DIV將頁面分成塊。將每個謹慎的部分（塊？部分？）放入DIV中。或者，使用Twitter的bootstrap（做同樣的事情）。

事情是這樣的：

<body> 
<div id="wrap"> 
    <div id="header"> 
    </div><!-- #header --> 
    <nav id="sideNav"> 
     <ul> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
      <li>Menu Item</li> 
     </ul> 
    </nav><!-- #sideNav --> 
    <div id="subhead"> 
    </div><!-- #subhead --> 
    <div id="container"> 
     <article> 
     </article> 
    </div><!-- #container --> 
</div><!-- #wrap> 
</body>

爲了使並排的導航菜單<li>項目方面，你可以使用：

ul li {display:inline;}

樣式導航到左側，與子頭和內容的權利，像下面的東西會讓你開始：

#wrap {width:100%;} 
#header {width:100%;height:80px;} 
#sideNav {float:left;width:15%;min-height:500px;} 
#subHead {margin-left:15%;width:85%;height:80px;} 
#container {margin-left:15%;width:85%;min-height:500px;}

當使用float時，理解float:left（或右）將從頁面流中移除DIV是很重要的。這就是subHead和container位於sideNav旁邊的方式。但是，當使用浮動的時候，下面的DIV可能會在浮動的div上面。 *（請參閱部分在下面鏈接全約，花車大崩潰）*因此，你必須知道在父級別「清除浮動」：