+1 Daumen
631 Aufrufe

Aktuell sieht es so aus:

36c36fe1369162a275cff4be2955bf81.png

Es soll so aussehen:

c5a88afb32431a17aedbbd655341d80c.jpg

Das habe ich bisher aber nur mit   geschafft: (HTML)

<ul>
<li><a href="mailto:xxxxx">   ...   Text >
<li><a href="Countdown.html"> Countdown </a></li>
....
</ul>

Und in (CSS):

ul {
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  background-color: #333;
opacity: 0.65;

}

Wie kann ich das etwas intelligenter lösen?

von

1 Antwort

+1 Daumen
 
Beste Antwort

Ich habe ausgehend von deinen Informationen den HTML-Code geordnet und korrigiert:

HTML:

<html>

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

<body>

  <div class="notice-wrap">
    <p class="notice">
      Diese Webseite befindet sich im Ausbau.
      Informieren Sie den Administrator <a href="mailto:xxxxx">per E-Mail</a> bei Unannehmlichkeiten.
    </p>
  </div>

  <div class="ul-wrap">
    <ul>
      <li><a class="active" href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="Countdown.html"> Countdown</a></li>
    </ul>
  </div>

</body>
</html>

CSS:

.ul-wrap {
text-align:right;
background: #333;
}

ul {
display:inline-block;
list-style-type: none;
padding: 0;
overflow: hidden;
background: #333;
opacity: 0.65;
}

li {
float: left;
}

li a {
display: inline-block;
color: #f1f1f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active){
background-color: #111;
}
.active {
background-color: #4CAF50;

}

https://jsfiddle.net/kai_noack/n816borj/

Die Notiz sollte nicht Teil der Navigation sein, semantisch ein Fehler.

Du kannst der Notiz einen Background geben, damit es besser aussieht.

von

Ein anderes Problem?

Stell deine Frage

Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos

x
Made by a lovely community