将徽标，菜单和口号放在图像幻灯片放映

Question

我需要创建一个网站标题，如下所示：

1. 图片顶部的徽标和菜单; 无论图像是什么，徽标和菜单都是一样的。

2. 图片上会有标题和文字。 每个图像的标题和文字都不同。

3. 徽标应位于左侧，菜单位于右侧;

4. Logo + Menu应该只占用600px的最大宽度（包装）。 该包装应该以网站为中心。

所以我有以下online example：

＆＃13;
＆＃13;
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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

我目前遇到的问题是Logo +菜单没有居中，最大宽度为600px。但说实话，我不确定我使用的定位方法是否正确。

Answer 1

问题为nav，position为absolute，logo and menu位于slide的{​​{1}}中心，需要添加max-width:600 position:relative到.wrapper，它是nav的父元素。

  

position - absolute 该元素将从正常文档流中删除;没有   为页面布局中的元素创建空间。相反，它是   相对于其最近的祖先（如果有的话）定位;   否则，它相对于初始包含块放置。

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

因此它会relative到.wrapper并在幻灯片的中心对齐。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是您的要求，包含一些结构和css更改：

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我更改了您应该放置<?php session_start(); //Connect to database from here $link = mysql_connect('localhost', 'root', ''); if (!$link) { die('Could not connect: ' . mysql_error()); } //select the database | Change the name of database from here mysql_select_db('aasala'); //get the posted values $user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES); $pass=md5($_POST['password']); //now validating the username and password $sql="SELECT user_name, password FROM tbl_user WHERE user_name='".$user_name."'"; $result=mysql_query($sql); $row=mysql_fetch_array($result); //if username exists if(mysql_num_rows($result)>0) { //compare the password if(strcmp($row['password'],$pass)==0) { echo "yes"; //now set the session from here if needed and query the real name $_SESSION['u_name']=$user_name; } else echo "no"; } else echo "no"; //Invalid Login ?> An the secure.php is this one <?php session_start(); // if session is not set redirect the user if(empty($_SESSION['u_name'])) header("Location:index.html"); //if logout then destroy the session and redirect the user if(isset($_GET['logout'])) { session_destroy(); header("Location:index.html"); } ?> 和position: absolute的位置。还添加了一个flex显示屏，以便能够居中。希望这有帮助！

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;
}