配售三個要素

我有這樣的CSS樣式和HTML的：配售三個要素

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link href="css/style.css" rel="stylesheet" type="text/css"> 
     <body> 
      <header class="header"> 
       <div id="header-wrapper"> 
        <div id="box-left"> 
         <div id="top-menu-left"></div> 
         <nav class="menu-left"> 
          <ul id="main-nav"> 
           <li><a href="http://webdesignerwall.com">Home</a> 
           </li> 
           <li><a href="http://themify.me">Themify</a> 
           </li> 
           <li><a href="http://icondock.com">IconDock</a> 
           </li> 
           <li><a href="http://ndesign-studio.com">N.Design</a> 
           </li> 
          </ul> 
         </nav> 
        </div> 
        <div class="logo"></div> 
        <div id="box-right"> 
         <div id="top-menu-right"></div> 
         <nav class="menu-right"> 
          <ul id="main-nav"> 
           <li><a href="http://webdesignerwall.com">Home</a> 
           </li> 
           <li><a href="http://themify.me">Themify</a> 
           </li> 
           <li><a href="http://icondock.com">IconDock</a> 
           </li> 
           <li><a href="http://ndesign-studio.com">N.Design</a> 
           </li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </header> 
      <div id="content-wrapper"> 
       <div id="content" class="clearfix"> 
         <h2 align="center">Sielsko Anielsko</h2> 
W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum」, czyli „O granicy dobra i zła」, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...」 pochodzi właśnie z sekcji 1.10.32.</div> 
      </div> 
     </body> 
</html>

* { 
    padding: 0; 
    margin: 0; 
} 

.header { 
    height: 200px; 
    width: 100%; 
    background-color: #261501; 
} 

.clearfix { 
    clear: both; 
} 

#header-wrapper { 
    height: 200px; 
    width: 100%; 
} 

#box-left { 
    height: 100%; 
    width: 42%; 
    float: left; 
} 

#top-menu-left { 
    height: 155px; 
    width: 450px; 
} 

#box-right { 
    height: 100%; 
    width: 42%; 
    float: left; 
} 

#top-menu-right { 
    height: 155px; 
    width: 450px; 
} 

.logo { 
    height: 250px; 
/* width: 300px;*/ 
    width: 16%; 
    float: left; 
    background:#ffffff url('../images/logo.png') no-repeat center center; 
    -webkit-border-radius: 0px 0px 10px 10px; 
    border-radius: 0px 0px 10px 10px; 
    -webkit-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4); 
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4); 
} 

#site-logo { 
} 

/* navigation */ 

.menu-left { 
    height: 45px; 
    width: 100%; 
    background: #fff; 
    z-index: -1; 
} 

.menu-right { 
    height: 45px; 
    width: 100%; 
    background: #fff; 
    z-index: -1; 
} 

#main-nav ul { 
margin: 0px; 
padding: 0px; 
} 

#main-nav li { 
list-style-type: none; 
display: inline; 
margin: 0 5px 0 5px; 
} 

#main-nav li a { 
color: #000; 
text-decoration: none; 
} 

#main-nav li a.active, #main-nav a:hover { 
text-decoration: underline; 
color: #D9CD60; 
}

的問題是，在右鍵菜單稍微重疊的核心要素，其中的標誌，利潤或z指數中的任何改變沒有達到預期的效果或在某個地方犯了一個錯誤，我找不到原因。

的jsfiddle：jsfidle

我發現張貼我的問題後修復，但我不知道這是正確的方式。現在菜單位置的另一個小問題是我需要將左右菜單靠近徽標。該的jsfiddle看起來不錯，但本地副本菜單上走下來

//最後編輯

在包裝和內容方面

頁腳定位當我設置頁腳留在底部它正在由內容隱藏，我想設置頁腳堅持到頁面底部

編輯

固定內容的位置，但現在頁腳高於

#content { 
    padding-top: 380px; 
} 

#tresc { 
    text-align: center; 
    padding: 10px; 
    width: 1180px; 
    background: #fff; 
    -webkit-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4); 
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    margin: 0 auto; 
}

固定頁腳問題

//編輯

有別人的想法如何使這些菜單，以適應移動設備？

來源

2013-10-09 guzior

發佈你的標記以及 – martincarlin87

我們還需要HTML代碼，甚至更好的將是一個jsfiddle的例子。 –

我無法注意到小提琴中的問題。一切都很美好。你能更精確嗎？ – matewka

如果你想菜單和標誌之間管理空間執行以下操作：

從所有三個要素刪除float:left。
將display: inline-block添加到所有三個元素。
確保父元素（#header-wrapper）具有text-align: center

然後通過改變.logo你可以從菜單分開吧margin財產。

但是有一個小問題display: inline-block。它會在徽標和菜單之間產生小的差距，在您的情況下會導致右側的菜單打破新的界限。爲了解決這個問題，確保有這三個要素的開始和結束標記之間沒有的空格，像這樣：

(...) 
</div><div class="logo">

，而不是這個

(...) 
    </div><!-- here is a newline and a tab which both are white-spaces --> 
    <div class="logo">

編輯的：

根據您上次關於頁腳的更新，
您設置.wrapper高度爲100%其中意味着它需要窗口的所有高度。那麼你的.bg div的高度設置爲500px。因此，如果瀏覽器窗口小於500px加200px的頁眉，頁腳得到吃包裝。我無法準確解釋爲什麼會發生這種情況，但要解決這個問題，您只需將腳註放入包裝中即可。
這裏是固定小提琴：http://jsfiddle.net/s3snc/8/。

此外，爲避免進一步的問題，您應該將頭部放在包裝中。如果包裝是爲了height: 100%（與body, html { height: 100% }結合），它必須是立即和只有身體的孩子。

來源

2013-10-09 11:06:36 matewka

嘗試過，但我留在當前的解決方案，你可以看看實際jsfiddle頁腳位置？ – guzior

你的小提琴沒有腳註。你可以更新它來向我展示你是如何接受它的？ – matewka

更正鏈接到jsfiddle – guzior

配售三個要素

回答

相關問題