Float funktioniert nicht

  • Hallo zusammen,


    ich bin dabei, eine Website zu stylen, die ich heute noch abgeben muss, entsprechend bin ich in Eile... Daher werde ich heute diverse Fragen stellen und ich hoffe einfach mal, dass das Forum belebt ist und mir jemand meine Fragen beantworten kann :)


    Ich habe zurzeit folgendes Problem:


    Das ist der Code in der index.html-Datei:

    Code
    <nav id="main-nav">
            <ul>
              <a href="#home"><li>Home</li></a>
              <a href="#about"><li>Über mich</li></a>
              <a href="#themes"><li>Themen</li></a>
              <a href="#contact"><li>Kontakt</li></a>
            </ul>
          </nav>

    Und das ist der Code in der css.style-Datei:


    Code
    header nav {
      float: right;
      margin: 10px 50px 0 0;
    }
    
    header nav ul li {
      float: left;
      margin-left: 36px;
    }

    So soll es aussehen:


    html-seminar.de/woltlab/attachment/2900/


    Und so sieht es aus:


    html-seminar.de/woltlab/attachment/2901/


    Kann mir wer sagen, woran das liegt?


    Mit Gruß

  • Zitat

    Kann mir wer sagen, woran das liegt?

    Ich nicht wirklich präzise, nur, dass das die Mysterien von float-Layout sind :D

    Verwende statt dessen Flexlayout, dann wird es ganz einfach:

    Code
    header nav {
      display: flex;
      justify-content: flex-end;
      margin: 10px 50px 0 0;
    }
    header nav ul {
      display: flex;
      margin-left: 36px;
    }

    (ungetestet). Näheres kannst Du z. B. hier nachlesen:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • Ich nicht wirklich präzise, nur, dass das die Mysterien von float-Layout sind :D

    Verwende statt dessen Flexlayout, dann wird es ganz einfach:

    Code
    header nav {
      display: flex;
      justify-content: flex-end;
      margin: 10px 50px 0 0;
    }
    header nav ul {
      display: flex;
      margin-left: 36px;
    }

    (ungetestet). Näheres kannst Du z. B. hier nachlesen:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    Vielen Dank für diese präzise Ausführung... Hat sich leider wenig verändert, aber trotzdem danke.


    Gruß

  • Vorneweg: ja, ich weiß, das Problem ist "gelöst" (warum Anführungszeichen, siehe unten), aber trotzdem:

    Bitte was? Tut mir leid, ich bin totaler Anfänger und verwirrt und unter Zeitdruck.

    Das waren nur kurze Stichwörter für die weitere Recherche da ich dir nur vom Handy aus kurz einen Hinweis geben wollte in welcher Richtung du suchen sollst. Was mit float gemeint war sollte klar sein, du verwendest es ja. Wenn du nicht weißt was flex ist, ist das kein Problem, die allwissende Müllhalde (aka Google) kannst du aber selbst anwerfen, oder? Wenn du nach »flex css« stößt, bekommst du einige Seiten ausgespuckt die dir verraten um was es geht.

    Kannst du das genauer erklären?

    Was ist daran nicht zu verstehen? <li> und <a> waren falsch verschachtelt und invalides HTML war noch nie eine gute Voraussetzung sinnvoll CSS einsetzen zu können - und was invalide ist verrät dir der Validator, der gehört (neben dem Seiteninspektor (->F12)) zum Grundhandwerkszeug.


    Und nein, auch Zeitdruck ist kein Grund sich nicht mit den Grundlagen zu beschäftigen? Ich weiß jetzt nicht wo du die fertige Seite abgeben musst, aber das irgendwie auf die Schnelle hinzupfuschen kann nicht sinnvoll sein. Gelernt hast du aus diesem Thread auch garantiert nichts, da du wohl nur den Kot[sic!] aus #3 verwendet hast ohne ihn wirklich zu verstehen (Code wäre das nur wenn die richtigen Einheiten (keine Pixel!) verwendet worden wären). Gelöst ist dein Problem deswegen nicht wirklich: bei der nächsten ähnlichen Aufgabe wirst du wieder da stehen und nicht weiter kommen. Ich halte es deswegen auch für überhaupt nicht zielführend den Fragestellern fertige "Lösungen" vorzusetzen - und da einige User das ständig in quasi jedem Thread machen werde ich mich aus dem Forum zurückziehen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!