+1 Daumen
206 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"> &nbsp; ...   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

Kannst du das bitte als https://jsfiddle.net aufsetzen, damit man ein funktionierendes Beispiel hat, woran man Änderungen durchführen kann.

Hier dein bisheriger Code:


Ich würde alles mit float:right nach rechts verschieben:



PS: Und ja, da ist ein Bug mit dem Editor bezüglich & bnsp; → https://github.com/samclarke/SCEditor/issues/723 - Wenn du den Editor neu lädst, wandelt er es in ein Leerzeichen um :/

Das jsfiddle kriege ich gerade nicht hin. Gibt es irgendwie einen Command, um den Abstand von den einzelnen Abschnitten zueinander zu bestimmen? Jetzt sind alle bis auf der längere Text (s. o.) auf der rechten Seite, der Text klebt aber noch links am Rand. Den würde ich jetzt gerne so verschieben, dass er mittig (wie in Bild 2) ist. Ich denke, dass ich das mit margin-left gut machen kann...

Richtig. margin-left:10px; sollte klappen.

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;

}


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 sofort und kostenfrei

x
Made by a lovely community