中心容器

-1

我想將兩個容器在網站上水平居中。因此，右側的徽標和內容區塊的菜單應居中。我嘗試了很多東西，但沒有任何效果。直到現在我與框架，但現在我想使用容器。你能幫我嗎？中心容器

非常感謝！

最好的問候，羅尼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Containertest</title> 
<style type="text/css"> 

body { margin:0; background-color: #333333;} 

.wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    position: relative; 
    /* background: url("ronny_logo.jpg"); */ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index: 0; 
} 

/* MENU */ 
#main_menu{ 
    margin:0px; 
    padding:0; 
    height: 150px; 
    /* width: 100%;  /* Breite vom Hauptmenü Container */ 
    padding: 0px 0; 
    /*overflow: hidden; Remove this*/ 
    position: fixed; 
    background-color: black; 
    z-index: 2; 
} 
#main_menu li{ 
    list-style: none; 
    float: left; 
    line-height: 30px; 
    margin-left: 10px; 
    width: 130px; 
    text-align: center; 
    margin-top: 120px; 
    position: relative; 
} 
#main_menu li a, #footer_menu li a { 
    color: #FFFFFF; 
    text-shadow: 0px 1px 1px #000; 
    display: block; 
    font-family: 'PT Sans', sans-serif; 
    text-decoration: none; 
    font-size: 12pt; 
} 
#main_menu .logo{ 
    background: none; 
    width: 445px; 
    margin: 0; 
} 
#main_menu li a:hover, #footer_menu li a:hover{ 
    text-decoration: underline; 
} 
#main_menu li .submenu{ 
    display: none; 
    margin: 0; 
    padding: 0; 
    z-index: 10; 
    position: absolute; 
    left: 0; 
    top:100%; 
} 
#main_menu li .submenu:hover{ 
    display: block; 
} 
#main_menu li a:hover + .submenu{ 
    display: block; 
} 
#main_menu li .submenu li{ 
    margin: 0; 
    padding: 0; 
} 
#main_menu li .submenu li a{ 
    font-size: 9pt; 
} 
/* COLORS */ 
.red, .red .submenu{ background-color: #ed3327; } 
.blue, .blue .submenu{ background-color: #9dbdd5; } 
.green, .green .submenu{ background-color: #6fb145; } 
.orange, .orange .submenu{ background-color: #f5832e; } 
.yellow, .yellow .submenu{ background-color: #f6ec35; } 

/* CONTENT */ 
#content{ 
    padding: 20px 0; 
    overflow: hidden; 
    margin: 0; 
    padding: 20px; 
    font-size: 9pt; 
    color: #FFFFFF; 
    background-color: #555555; 
    width: 965px; 
} 

</style> 
</head> 

<body> 
<div class="wrapper"> 
    <div class="patterned"> 
     <div class="container"> 
      <ul id="main_menu"> 
       <li class="logo"> 
        <a href="#"> 
         <img src="ronny_logo.jpg" alt="Logo"/> 
        </a> 
       </li> 
       <li class="red"> 
        <a href="#">Home</a> 
       </li> 
       <li class="green"> 
        <a href="#">Evenementen</a> 
        <ul class="submenu"> 
         <li> 
          <a href="#">Item</a> 
         </li> 
         <li> 
          <a href="#">Item</a> 
         </li> 
         <li> 
          <a href="#">Item</a> 
         </li> 
        </ul> 
       </li> 
       <li class="blue"> 
        <a href="#">Bus</a> 

       </li> 
       <li class="orange"> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="container"> 
     <div id="content"> 
      <p>fadsfdsfdas</p> 
      <p>dfsadfaf</p> 
      <p>d</p> 
      <p>d</p> 
      <p>d</p> 
      <p>d</p> 
      <p>&nbsp;</p> 
      <p>gg</p> 
      <p>&nbsp;</p> 
      <p>g</p> 
     </div> 
    </div> 
</div> 



</body> 
</html>

lookout http://i67.tinypic.com/kbegro.jpg

來源

2016-03-16 Ronny

我不知道你想要什麼，爲什麼你有兩個容器DIV。爲什麼其中一個在DIV內，但另一個不是？創建一個包裝和一個容器。在Paint/Photoshop – MortenMoulder

上畫一個你有什麼和你想要的東西的謝謝。我已經上傳了一張scetch。 – Ronny

最簡單的辦法就是給你的容器width並設置margin到0（頂底）auto（左，右）與position: relative所以瀏覽器一起可以根據父容器在此實例中找到將其放置在何處的位置.wrapper類。

.patterned .container{width: 960px; margin: 0 auto; position: relative;} 
.container{width: 960px; margin: 0 auto; position: relative;}

通過把父類的子類可以有選擇性地針對特定容器的前面，因此，如果你有兩個容器相同類別，他們可以有針對性和風格不同。

來源

2016-03-16 11:19:14 elmarko

謝謝你elmarko。我有一個額外的問題：我想在內容容器中打開（顯示）html頁面，如果我點擊頂部容器（標識+菜單）中的菜單按鈕。似乎並不簡單.... 你能再次幫助我嗎？ – Ronny

我想問一個新問題，以免它在這個問題上變得混亂，談論兩個不同的主題！ – elmarko

使用柔性特性另一種解決方案：

<style> 
    body { 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     background-color: #333333; 
    } 
    .wrapper{ 
     min-height: 100%; 
     height: auto !important; 
     height: 100%; 
     position: relative; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     z-index: 0; 

     display: flex; 
     align-items: center; 
     justify-content: center; 
    } 
    #main_menu{ 
     margin:0; 
     padding:0; 
     height: 150px; 
     padding: 0px 0; 
     position: fixed; 
     background-color: black; 
     z-index: 2; 

     width: 965px; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
    } 
    #main_menu li{ 
     list-style: none; 
     float: left; 
     line-height: 30px; 
     margin-left: 10px; 
     width: 130px; 
     text-align: center; 
     margin-top: 120px; 
     position: relative; 
    } 
    #main_menu li a, #footer_menu li a { 
     color: #FFFFFF; 
     text-shadow: 0px 1px 1px #000; 
     display: block; 
     font-family: 'PT Sans', sans-serif; 
     text-decoration: none; 
     font-size: 12pt; 
    } 
    #main_menu .logo{ 
     background: none; 
     width: 445px; 
     margin: 0; 
    } 
    #main_menu li a:hover, #footer_menu li a:hover{ 
     text-decoration: underline; 
    } 
    #main_menu li .submenu{ 
     display: none; 
     margin: 0; 
     padding: 0; 
     z-index: 10; 
     position: absolute; 
     left: 0; 
     top:100%; 
    } 
    #main_menu li .submenu:hover{ 
     display: block; 
    } 
    #main_menu li a:hover + .submenu{ 
     display: block; 
    } 
    #main_menu li .submenu li{ 
     margin: 0; 
     padding: 0; 
    } 
    #main_menu li .submenu li a{ 
     font-size: 9pt; 
    } 
    .red, .red .submenu{ background-color: #ed3327; } 
    .blue, .blue .submenu{ background-color: #9dbdd5; } 
    .green, .green .submenu{ background-color: #6fb145; } 
    .orange, .orange .submenu{ background-color: #f5832e; } 
    .yellow, .yellow .submenu{ background-color: #f6ec35; } 

    #content{ 
     overflow: hidden; 
     margin-top: 150px; 
     font-size: 9pt; 
     color: #FFFFFF; 
     background-color: #555555; 
     width: 965px; 
    } 
</style> 
<body> 
    <div class="wrapper"> 
    <ul id="main_menu"> 
     <li class="logo"> 
     <a href="#"> 
      <img src="ronny_logo.jpg" alt="Logo"/> 
     </a> 
     </li> 
     <li class="red"> 
     <a href="#">Home</a> 
     </li> 
     <li class="green"> 
     <a href="#">Evenementen</a> 
     <ul class="submenu"> 
      <li> 
      <a href="#">Item</a> 
      </li> 
      <li> 
      <a href="#">Item</a> 
      </li> 
      <li> 
      <a href="#">Item</a> 
      </li> 
     </ul> 
     </li> 
     <li class="blue"> 
     <a href="#">Bus</a> 
     </li> 
     <li class="orange"> 
     <a href="#">Contact</a> 
     </li> 
    </ul> 
    <div id="content"> 
     <p>fadsfdsfdas</p> 
     <p>dfsadfaf</p> 
     <p>d</p> 
     <p>d</p> 
     <p>d</p> 
     <p>d</p> 
     <p>&nbsp;</p> 
     <p>gg</p> 
     <p>&nbsp;</p> 
     <p>g</p> 
    </div> 
    </div> 
</body>

沒有絕對需要更多的div。

乾杯！

來源

2016-03-16 11:42:44 c00ki3s

回答

相關問題