English 中文(简体)
Nabar菜单项目重复了页上的现有内容。
原标题：Nav bar menu items overlap existing content on the page
  • 时间：2023-12-06 09:22:02
  •  标签：
  • html
  • css

我发现了一个好的垫子,并从互联网上复制。 网页Angebot.php 有一种形式,当我打开了纳夫时,菜单项目重复了该页的现有内容。 我希望,该网页上的现有内容会破坏或带上背景,因此它不会打断菜单。 我如何能够这样做? 是否有解决办法?

我不知道我是否很好地描述了这一点,但我希望你知道我指的是什么。

“nav则在封闭时”/

“Navbar

*,
body,
html {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-top: 20px;
}

select {
  width: 100%;
  height: 30px;
}

input[type="submit"] {
  margin-top: 20px;
  width: 100%;
  height: 30px;
}


/* Navigation */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover {
  font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked~.menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked~.logo {
  display: none;
}
<body>
  <nav>
    <div class="navbar">
      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
        <div class="logo">
          <h1>Navbar</h1>
        </div>
        <div class="menu-items">
          <li><a href="index.php">Home</a></li>
          <li><a href="Angebot.php">Angebot</a></li>
          <li><a href="UeberUns.php">Über uns</a></li>
          <li><a href="Kontakt.php">Kontakt</a></li>
        </div>
      </div>
    </div>
  </nav>
  <form action="process.php" method="post">
    <label for="cpu">CPU (Cores):</label>
    <select id="cpu" name="cpu">
      <option value="5">1 Core - 5 CHF</option>
      <option value="10">2 Cores - 10 CHF</option>
      <option value="18">4 Cores - 18 CHF</option>
      <option value="30">8 Cores - 30 CHF</option>
      <option value="45">16 Cores - 45 CHF</option>
    </select>

    <label for="ram">RAM (MB):</label>
    <select id="ram" name="ram">
      <option value="5">512 MB - 5 CHF</option>
      <option value="10">1024 MB - 10 CHF</option>
      <option value="20">2048 MB - 20 CHF</option>
      <option value="40">4096 MB - 40 CHF</option>
      <option value="80">8192 MB - 80 CHF</option>
      <option value="160">16384 MB - 160 CHF</option>
      <option value="320">32768 MB - 320 CHF</option>
    </select>
    <label for="ssd">SSD (GB):</label>
    <select id="ssd" name="ssd">
      <option value="5">10 GB - 5 CHF</option>
      <option value="10">20 GB - 10 CHF</option>
      <option value="20">40 GB - 20 CHF</option>
      <option value="40">80 GB - 40 CHF</option>
      <option value="120">240 GB - 120 CHF</option>
      <option value="250">500 GB - 250 CHF</option>
      <option value="500">1000 GB - 500 CHF</option>
    </select>

    <input type="submit" value="Bestellen">
  </form>
</body>
问题回答

就在菜单上打着白色的背景。

.menu-items {
  background: white;
}

*,
body,
html {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

form {
  width: 300px;
  margin: 0 auto;
}

label {
  display: block;
  margin-top: 20px;
}

select {
  width: 100%;
  height: 30px;
}

input[type="submit"] {
  margin-top: 20px;
  width: 100%;
  height: 30px;
}


/* Navigation */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover {
  font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked~.menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked~.logo {
  display: none;
}
<body>
  <nav>
    <div class="navbar">
      <div class="container nav-container">
        <input class="checkbox" type="checkbox" name="" id="" />
        <div class="hamburger-lines">
          <span class="line line1"></span>
          <span class="line line2"></span>
          <span class="line line3"></span>
        </div>
        <div class="logo">
          <h1>Navbar</h1>
        </div>
        <div class="menu-items">
          <li><a href="index.php">Home</a></li>
          <li><a href="Angebot.php">Angebot</a></li>
          <li><a href="UeberUns.php">Über uns</a></li>
          <li><a href="Kontakt.php">Kontakt</a></li>
        </div>
      </div>
    </div>
  </nav>
  <form action="process.php" method="post">
    <label for="cpu">CPU (Cores):</label>
    <select id="cpu" name="cpu">
      <option value="5">1 Core - 5 CHF</option>
      <option value="10">2 Cores - 10 CHF</option>
      <option value="18">4 Cores - 18 CHF</option>
      <option value="30">8 Cores - 30 CHF</option>
      <option value="45">16 Cores - 45 CHF</option>
    </select>

    <label for="ram">RAM (MB):</label>
    <select id="ram" name="ram">
      <option value="5">512 MB - 5 CHF</option>
      <option value="10">1024 MB - 10 CHF</option>
      <option value="20">2048 MB - 20 CHF</option>
      <option value="40">4096 MB - 40 CHF</option>
      <option value="80">8192 MB - 80 CHF</option>
      <option value="160">16384 MB - 160 CHF</option>
      <option value="320">32768 MB - 320 CHF</option>
    </select>
    <label for="ssd">SSD (GB):</label>
    <select id="ssd" name="ssd">
      <option value="5">10 GB - 5 CHF</option>
      <option value="10">20 GB - 10 CHF</option>
      <option value="20">40 GB - 20 CHF</option>
      <option value="40">80 GB - 40 CHF</option>
      <option value="120">240 GB - 120 CHF</option>
      <option value="250">500 GB - 250 CHF</option>
      <option value="500">1000 GB - 500 CHF</option>
    </select>

    <input type="submit" value="Bestellen">
  </form>
</body>
时间：2023-12-08 21:45:59

如果您的导航用菜单项目是您网页上现有内容的重叠,那么这一问题有几个共同原因。 在这方面,你可以采取一些步骤来解决问题和解决问题:

  1. www.un.org/Depts/DGACM/index_spanish.htm Check:

    • Inspect the styles applied to your navigation bar and ensure that there are no conflicting styles that might be causing the overlap. Pay attention to properties like position, margin, padding, and z-index.
    • Use browser developer tools to inspect the elements and their styles. Look for any unexpected or conflicting styles that might be causing the overlap.

  2. www.un.org/Depts/DGACM/index_spanish.htm 支票Z-Index:

    • If you have other elements on your page with a higher z-index than the navigation bar, they may overlap the menu items. Make sure the navigation bar has a sufficient z-index to ensure it appears above other elements.

  3. <>Positioning:

    • Ensure that the positioning of your navigation bar is correct. Common positioning values are static, relative, absolute, and fixed. Depending on your layout, you may need to adjust these values.

  4. www.un.org/Depts/DGACM/index_spanish.htm 不动产:

    • Check the overflow property for both the navigation bar and the content. It might be necessary to set overflow: hidden; or overflow: auto; on the container to prevent content from overflowing and overlapping.

  5. <Margins and Patter:

    • Double-check the margins and padding of both the navigation bar and the surrounding elements. In some cases, excessive margins or padding can lead to unexpected overlaps.

  6. <>反应设计:

    • If you have a responsive design, make sure that your styles are appropriately adjusted for different screen sizes. Overlapping issues may arise on smaller screens if your styles are not responsive.

  7. http://www.hchr.org。

    • If you are using JavaScript or jQuery for any interactive elements, check for any errors in the console that might be affecting the layout.

  8. www.un.org/Depts/DGACM/index_spanish.htm 露天:

    • If you re using floated elements, ensure that you are clearing the floats properly. This is often necessary to prevent layout issues.

  9. www.un.org/Depts/DGACM/index_spanish.htm 不同浏览器的检测:

    • Test your web page in different browsers to see if the issue is specific to a particular browser. Browser-specific quirks can sometimes cause layout problems.

  10. www.un.org/Depts/DGACM/index_spanish.htm Update or Reset CSS:

    • If you re using a CSS framework or library, make sure you re using the correct versions. You may also consider resetting styles using a CSS reset or normalize.css to ensure consistent styling across different browsers.

通过仔细审查这些方面,你应当能够查明并解决造成你航条菜单项目重叠的问题。

时间：2023-12-06 09:27:16


上一篇：
下一篇：


相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

时间：2009-11-13 05:37:01 回答：1 展示：1
image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

时间：2009-11-09 15:38:06 回答：5 展示：1
Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

时间：2009-11-09 14:33:21 回答：3 展示：1
Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

时间：2009-11-05 09:27:29 回答：3 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全