帶有源代碼的CSS佈局有序內容

開始懷疑我是否缺少明顯的東西，但我一直在尋找幾天，仍然無法找到明確的答案。帶有源代碼的CSS佈局有序內容

我正在尋找的是一個源訂購內容CSS佈局的雙列頁面（菜單右）與標題和粘腳，並最好沒有討厭的黑客。優選的源順序：
{}內容
{} rightmenu
{}頁腳
{}頭

就像我說我不是在試圖建立這樣爲自己獲得太遠，也沒有我在任何地方都能找到合適的例子。有什麼建議麼？

感謝

來源

2011-03-21 NickC

爲什麼要在源代碼中添加最後一個標題？請不要說SEO。 – thirtydot 2011-03-21 15:07:20

儘管我覺得這是毫無意義的：如果您繪製一張圖片來顯示不同的元素應該去哪裏，我會創建一個看起來相同的佈局。 – thirtydot 2011-03-21 16:40:00

雖然我不相信將網站徽標或h1放在底部是一個好主意，但我認爲可能有合理的理由將某些標頭放在底部，例如，較大的下拉菜單通常在底部可用性更好對於用戶不只是SE的;） – clairesuzy 2011-03-21 16:58:22

如果我明白你的問題吧，這應該是你的答案：

http://www.positioniseverything.net/ordered-floats.html

實際上，我認爲這篇文章是解釋相當不錯的一切。

來源

2011-03-21 15:02:37

感謝Dennis，有趣的文章。這答案左/右列，儘管我已經用float：left;/float：right;困難的一點似乎是得到一個源頭排序標題正確地浮在頂部 – NickC 2011-03-21 15:53:12

我認爲clear-attribute在這個角度是非常有趣的。查看float屬性也很有趣。你應該嘗試讓多個元素漂移 - 不總是合乎邏輯的！ ;）但有兩個元素向左和右移動可能是正確的方法。否則，你可以有一個100％寬度的容器，並讓該div「包含」三列，並使其向左浮動。然後使您的頁腳具有相同的寬度並左移。 – 2011-03-21 20:24:07

如果您有任何疑問，請告訴我:-) – 2011-03-21 20:25:54

內容正確，帶有側邊欄的左邊可能是最簡單的浮動佈局，只需將內容右移一個寬度，左邊填充空間以避免包裝。頁腳通過清除下面。

至於頭文件首先在源代碼中放置一個假頭部div，假設可能有徽標或其他東西可以進去，即使您可能不希望有大量的鏈接在那裏，如果有一個大的下拉菜單去那裏或類似的東西。無論如何，我會讓「假」標題的高度足以創建您需要的空間，然後將任何實際內容放入其中，然後將您想要顯示的內容放在頂部，只放在底部的div中並絕對放置它。

這裏有一個fiddled mockup

來源

2011-03-21 16:53:42 clairesuzy

謝謝。現在有一個工作原型。將發佈作爲一個單獨的答案，因爲我無法看到如何將其添加到此。 – NickC 2011-03-21 19:57:27

這是我能想出的時刻最好的。相對位置和絕對位置的混合，但似乎工作。任何人都可以看到這個問題。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html> 
    <head> 
     <style> 
      * { 
    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    .container { 
    min-height: 100%; 
    /*height: auto !important;*/ 
    height: 100%; 
    margin: 0 auto -2em; 
    } 
    .content{ 
    float: left; 
    width: 80%; 
    } 
    .menu{ 
    margin-left: 80%; 
    } 
    .header{ 
    position: absolute; 
    top: 0px; 
    height: 3em; 
    width: 100%; 
    } 
    .clearheader{ 
    height: 3em; 
    } 
    .footer, .clearfooter { 
    height: 2em; 
    clear: both; 
    } 

    .container { 
    background: grey; 
    } 
    .header{ 
    background: cyan; 
    } 
    .clearheader{ 
    background: cyan; 
    } 
    .footer{ 
    background: blue; 
    } 
    .clearfooter { 
    background: lightblue; 
    } 

     </style> 
     <link rel="stylesheet" href="NJC layout2.css" ... /> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="clearheader"></div> 
      <div class="content">Content</div> 
      <div class="menu">menu</div> 
      <div class="clearfooter"></div> 
     </div> 
     <div class="header">header</div> 
     <div class="footer">Footer</div> 
    </body> 
</html>

來源

2011-03-21 20:00:23 NickC

帶有源代碼的CSS佈局有序內容

回答

相關問題