找到你要的答案

Q:Image gallery overlaps php navigation

Q:图片重叠PHP导航

I have pieced together a PHP navigation for my site with following code:

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}
img {
    position: absolute;
    top: 10px;
    left: 40%;
}
ul#navi  {
  float:left;
  background:#3104B4;
  width:97.2%;                 /* geändert von 150px auf 100% */
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 100px;
  font-size: 18px;
}
ul#navi a {
 display:block;
 padding:0px;
 color:white;
 font-weight:bold;
 border-left: 1px solid red;
 text-align:center;
 font-size: 25px;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul#navi li:first-child a {
border-left: 0 none;
}
ul#navi li  {
 position:relative;            
 float:left;                    /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
 width:12.375em                  /* Hinzugefügt 150px / 16 = 9.375em */
}
 
/* Alle Ebenen ausblenden */
 
ul#navi ul  ,
ul#navi  li:hover ul ul , 
ul#navi  li:hover  ul ul ul  {
 position:absolute;
 left:-9999px;
 background:blue;
}
 
ul#navi  li:hover ul {
  background:blue;
}
 
ul#navi  li:hover ul ul {
  background:#3104B4;
}
 
ul#navi  li:hover ul ul ul {
  background:#3104B4;
}
 
ul#navi ul {
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}
 
 
/* Einzelne Ebenen einblenden */ 
ul#navi li:hover ul  {
 left:0;
 background: #3104B4;
 }
 
 
                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 position:absolute;
 left:100%;
 top:0;
 }
 
 
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {
  background:#2E64FE;
  color:white;
  border-left-width: 1px;
}
 
ul#navi a span {
 float:right;
  font-weight:normal;
  }
<img src="acid.png" alt="logo" />
<ul id="navi">
 <li><a href="index.php">Home </a></li>
 <li><a class="titel" href="sortiment.php">Unser Sortiment </a>
  <ul>
    <li><a href="sortiment_reiniger.php">Reiniger </a></li>
    <li><a href="ungeziefer.html">Ungezieferspray </a></li>
    <li><a href="arbeitsschutz.html">Arbeitsschutz </a></li>
    <li><a href="#">Thema 4 </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a>
	    <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
	   </li>
     </ul>
   </li>
  </ul> 
 </li>
 <li><a class="titel"  href="aktuelles.php">Aktuelles </a>
  <ul id="knoten_3">
    <li><a href="#">Aktionen </a></li>
    <li><a href="#">Neue Produkte </a></li>
    <li><a href="#">Sonstiges </a></li>
  </ul>
 </li>
 
 
<li><a class="titel"  href="#kat3">Kontakt </a>
 </li>
 <li><a class="titel" href="#kat4">Jobs</a></li>
 <li><a class="titel" href="#kat4">Impressum</a></li>
</ul>

And now wanted to add this image gallery (dwuser. com/education/content/creating-responsive-tiled-layout-with-pure-css/) on a subpage with the navigation.

Unfortunately the image gallery overlaps with the navigation or doesn't show at all. I tried clear:both but that had no effect.
It seems to me that the positioning of the image gallery is wrong, but I don't know which elements positions I have to change and to what values? Can anyone point me to a solution?
Also how do i have HTML code start after my PHP-Navigation in general?
With text i used clear:both, but I guess positioning would make more sense?
Thank you

我已经拼凑出一个我下面的代码PHP网站导航:

* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}
img {
    position: absolute;
    top: 10px;
    left: 40%;
}
ul#navi  {
  float:left;
  background:#3104B4;
  width:97.2%;                 /* geändert von 150px auf 100% */
  border-radius: 10px;
  padding: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 100px;
  font-size: 18px;
}
ul#navi a {
 display:block;
 padding:0px;
 color:white;
 font-weight:bold;
 border-left: 1px solid red;
 text-align:center;
 font-size: 25px;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul#navi li:first-child a {
border-left: 0 none;
}
ul#navi li  {
 position:relative;            
 float:left;                    /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
 width:12.375em                  /* Hinzugefügt 150px / 16 = 9.375em */
}
 
/* Alle Ebenen ausblenden */
 
ul#navi ul  ,
ul#navi  li:hover ul ul , 
ul#navi  li:hover  ul ul ul  {
 position:absolute;
 left:-9999px;
 background:blue;
}
 
ul#navi  li:hover ul {
  background:blue;
}
 
ul#navi  li:hover ul ul {
  background:#3104B4;
}
 
ul#navi  li:hover ul ul ul {
  background:#3104B4;
}
 
ul#navi ul {
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}
 
 
/* Einzelne Ebenen einblenden */ 
ul#navi li:hover ul  {
 left:0;
 background: #3104B4;
 }
 
 
                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 position:absolute;
 left:100%;
 top:0;
 }
 
 
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {
  background:#2E64FE;
  color:white;
  border-left-width: 1px;
}
 
ul#navi a span {
 float:right;
  font-weight:normal;
  }
<img src="acid.png" alt="logo" />
<ul id="navi">
 <li><a href="index.php">Home </a></li>
 <li><a class="titel" href="sortiment.php">Unser Sortiment </a>
  <ul>
    <li><a href="sortiment_reiniger.php">Reiniger </a></li>
    <li><a href="ungeziefer.html">Ungezieferspray </a></li>
    <li><a href="arbeitsschutz.html">Arbeitsschutz </a></li>
    <li><a href="#">Thema 4 </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a>
	    <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
	   </li>
     </ul>
   </li>
  </ul> 
 </li>
 <li><a class="titel"  href="aktuelles.php">Aktuelles </a>
  <ul id="knoten_3">
    <li><a href="#">Aktionen </a></li>
    <li><a href="#">Neue Produkte </a></li>
    <li><a href="#">Sonstiges </a></li>
  </ul>
 </li>
 
 
<li><a class="titel"  href="#kat3">Kontakt </a>
 </li>
 <li><a class="titel" href="#kat4">Jobs</a></li>
 <li><a class="titel" href="#kat4">Impressum</a></li>
</ul>

现在想添加此图片画廊(dwuser。COM /教育/内容/响应创建平铺布局与CSS /)在导航页。

Unfortunately the image gallery overlaps with the navigation or doesn't show at all. I tried clear:both but that had no effect.
It seems to me that the positioning of the image gallery is wrong, but I don't know which elements positions I have to change and to what values? Can anyone point me to a solution?
Also how do i have HTML code start after my PHP-Navigation in general?
With text i used clear:both, but I guess positioning would make more sense?
Thank you

answer1: 回答1:

Try adding

ul { overflow:hidden; }

尝试添加

ul { overflow:hidden; }

php  html  css  responsive-design