Ich möchte, dass meine Links zentriert sind und der Button immer noch funktioniert

Dies ist der HTML-Code in PHP, ich habe versucht, die Klassen zu ändern und einmal li und ul hinzuzufügen, aber das macht den Code nicht funktionieren. Ich habe das Java Script im HTML für jetzt hinzugefügt, weil ich wollte, dass es funktioniert. Es funktioniert, aber nachdem ich etwas auf die topnav Klasse ändern ist es nicht mehr funktioniert:Ich möchte, dass meine Links zentriert sind und der Button immer noch funktioniert

<div class="container"> 
      <h3></h3> 

<div class="topnav" id="myTopnav"> 

    <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a> 
      <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a> 
      <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a> 
      <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a> 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
</div> 

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script>   

</div>

Und das ist die CSS für die reaktions navbar. Die Medien-Anfragen Ich glaube, das Problem ist, aber ich bin mir nicht sicher:

.topnav { 
    overflow: hidden; 
    background-color: #ce8c4e; 
    border-bottom: #63451e 1px solid; 

} 

.topnav a { 
    float: left; 

    color: black; 

    padding: 10px 12px; 
    text-decoration: none; 
    font-size: 14px; 


} 

.topnav a:hover { 
    background-color: #ddd; 
    color: black; 
} 

.topnav .icon { 
    display: none; 

} 

@media screen and (max-width: 600px) { 
    .topnav a:not(:first-child) {display: none;} 
    .topnav a.icon { 
    float: right; 
    display: block; 
    } 
} 

@media screen and (max-width: 600px) { 
    .topnav.responsive {position: relative;} 
    .topnav.responsive .icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    .topnav.responsive a { 
    float: none; 
    display: block; 
    text-align: left; 

    } 

}

Ich habe versucht, den Schwimmer zu ändern und einige Klassen zu den Akronymen hinzufügen, aber hat nicht funktioniert, wie ich wollte.

Quelle

2017-11-05 Bogdan

Wie wäre es this-

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     .topnav { 
      overflow: hidden; 
      background-color: #ce8c4e; 
      border-bottom: #63451e 1px solid; 

     } 

     .topnav a { 
      float: left; 

      color: black; 

      padding: 10px 12px; 
      text-decoration: none; 
      font-size: 14px; 


     } 

     .topnav a:hover { 
      background-color: #ddd; 
      color: black; 
     } 

     .topnav .icon { 
      display: none; 

     } 

     .topnav-container { 
      width: fit-content; 
      margin: 0 auto; 
     } 

     @media screen and (max-width: 600px) { 
      .topnav a:not(:first-child) {display: none;} 
      .topnav a.icon { 
      float: right; 
      display: block; 
      } 
     } 

     @media screen and (max-width: 600px) { 
      .topnav.responsive {position: relative;} 
      .topnav.responsive .icon { 
      position: absolute; 
      right: 0; 
      top: 0; 
      } 
      .topnav.responsive a { 
      float: none; 
      display: block; 
      text-align: left; 

      } 

      .topnav-container { 
      width: auto; 
      } 
     } 
    </style> 
</head> 
<body> 

    <div class="container"> 
     <h3></h3> 

     <div class="topnav" id="myTopnav"> 
      <div class="topnav-container"> 
       <?=$_SERVER['PHP_SELF']=='/index.php'?'class="current"':'';?><a href="/../../index.php">&bull; Home</a> 
         <?=$_SERVER['PHP_SELF']=='/about.php'?'class="current"':'';?><a href="/../../about.php">About</a> 
         <?=$_SERVER['PHP_SELF']=='/gallerylist.php'?'class="current"':'';?><a href="/../../gallerylist.php">Gallery</a> 
         <?=$_SERVER['PHP_SELF']=='/contact.php'?'class="current"':'';?><a href="/../../contact.php">Contact &bull;</a> 
       <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
      </div> 
     </div> 

     <script> 
     function myFunction() { 
      var x = document.getElementById("myTopnav"); 
      if (x.className === "topnav") { 
       x.className += " responsive"; 
      } else { 
       x.className = "topnav"; 
      } 
     } 
     </script>   

    </div> 

</body> 
</html>

Quelle

2017-11-05 23:17:54

Ich möchte, dass meine Links zentriert sind und der Button immer noch funktioniert

Antwort

Verwandte Themen