廣場標誌，菜單和口號在圖片幻燈片放映

Question

我需要如下創建一個網站標題：

1. 標誌和菜單上的圖像的頂部; 無論圖像的標誌和菜單是相同的。

2. 圖片將有一個標題和文字。 每張圖片的標題和文字都會有所不同。

3. 徽標應該在左邊，菜單在右邊;

4. Logo +菜單應該只佔用最大600px的寬度（包裝）。 而且該包裝應該在網站上居中。

所以我有以下online example：

header { 
 
    text-align: center; 
 
} 
 

 
div.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
    text-align: left; 
 
} 
 

 
ul.menu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.menu li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
em { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    z-index: 2000; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    z-index: 2000; 
 
    right: 0; 
 
} 
 

 
.slides { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.slide img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.slide .text { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 80px; 
 
    width: 100%; 
 
}

<header> 
 

 
    <div class="wrapper"> 
 

 
    <em class="brand"> 
 
      <img src="http://via.placeholder.com/200x40"/> 
 
     </em> 
 

 
    <nav class="menu"> 
 
     <ul class="menu"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 

 
    <div class="slides"> 
 

 
    <div class="slide"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 1</h2> 
 
     <p>Text of slide 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide" style="display:none;"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 2</h2> 
 
     <p>Text of slide 2</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</header> 
 

 
<main> 
 
    Main content 
 
</main>

我目前所面對的問題是，該徽標+菜單不集中服用600px的最大寬度。但說實話，我不確定我使用的定位方法是否正確。

Answer 1

問題是nav這是position爲absolute，在slide中心max-width:600對準兩個logo and menu你需要添加position:relative到.wrapper這是nav父元素。

位置 - 絕對將元素從正常文檔流中移除;沒有 空間是爲頁面佈局中的元素創建的。相反，它是相對於其最接近定位的祖先而定位的，如果有的話;否則，它相對於初始包含塊放置。

div.wrapper { 
    margin: 0 auto; 
    max-width: 600px; 
    text-align: left; 
    position:relative;/*Add this*/ 
} 

因此，它得到的relative到.wrapper和幻燈片的中心對齊。

header { 
 
    text-align: center; 
 
} 
 

 
div.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
    text-align: left; 
 
    position: relative; 
 
} 
 

 
ul.menu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.menu li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
em { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    z-index: 2000; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    z-index: 2000; 
 
    right: 0; 
 
} 
 

 
.slides { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.slide img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.slide .text { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 80px; 
 
    width: 100%; 
 
}

<header> 
 
    <div class="wrapper"> 
 

 
    <em class="brand"> 
 
      <img src="http://via.placeholder.com/200x40"/> 
 
     </em> 
 

 
    <nav class="menu"> 
 
     <ul class="menu"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 

 
    <div class="slides"> 
 

 
    <div class="slide"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 1</h2> 
 
     <p>Text of slide 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide" style="display:none;"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 2</h2> 
 
     <p>Text of slide 2</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</header>

Answer 2

我改變了你應該放置的地方position: absolute和z-index。還添加了一個柔性顯示屏以便能夠居中。希望這可以幫助！

/* Styles go here */ 
 

 
ul.menu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.menu li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
em { 
 
    border: 1px solid red; 
 
    z-index: 2000; 
 
} 
 

 
nav { 
 
    z-index: 2000; 
 
    right: 0; 
 
} 
 

 
.slides { 
 
    width: 100%; 
 
} 
 

 
.slide img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.slide .text { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 80px; 
 
    width: 100%; 
 
} 
 

 
.wrapper { 
 
    display:flex; 
 
    width: 600px; 
 
    justify-content:center; 
 
    position:absolute; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    
 
    <header> 
 
     
 
     <div class="lobby"> 
 
     <div class="wrapper"> 
 
      <em class="brand"> 
 
      <img src="http://via.placeholder.com/200x40"/> 
 
      </em> 
 
     
 
      <nav class="menu"> 
 
      <ul class="menu"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </nav> 
 
     </div> 
 
     
 
     <div class="slides"> 
 
      
 
      <div class="slide"> 
 
      <img src="http://via.placeholder.com/400x200"/> 
 
      <div class="text"> 
 
       <h2>Slide 1</h2> 
 
       <p>Text of slide 1</p>    
 
      </div> 
 
      </div> 
 
     
 
      <div class="slide" style="display:none;"> 
 
      <img src="http://via.placeholder.com/400x200"/> 
 
      <h2>Slide 2</h2> 
 
      <p>Text of slide 2</p> 
 
      </div>   
 
     
 
     </div>  
 
     
 
     </div> 
 
     
 
    </header> 
 

 
    <main> 
 
     Main content 
 
    </main> 
 
    
 
    </body> 
 

 
</html>

Answer 3

這是您的要求，具有一定的結構和css變化：

header { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
div.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
    text-align: left; 
 
    position: absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    z-index: 9; 
 
} 
 

 
ul.menu { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul.menu li { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
em { 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    z-index: 2000; 
 
} 
 

 
nav { 
 
    position: absolute; 
 
    z-index: 2000; 
 
    right: 0; 
 
} 
 

 
.slides { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.slide img { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.slide .text { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 80px; 
 
    width: 100%; 
 
}

<header> 
 

 
    <div class="wrapper"> 
 

 
    <em class="brand"> 
 
      <img src="http://via.placeholder.com/200x40"/> 
 
     </em> 
 

 
    <nav class="menu"> 
 
     <ul class="menu"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </div> 
 

 
    <div class="slides"> 
 

 
    <div class="slide"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 1</h2> 
 
     <p>Text of slide 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="slide" style="display:none;"> 
 
     <img src="http://via.placeholder.com/400x200?text=100 percent width" /> 
 
     <div class="text"> 
 
     <h2>Slide 2</h2> 
 
     <p>Text of slide 2</p> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 

 
</header> 
 
<!-- Main content start here --> 
 
<main> 
 
    Main content 
 
</main>