Box verlängert sich automatisch

  • Oh jeeee... bevor wir uns hier um 'Kleinigkeiten' kümmern, musst du als Erstes deine Seite mal Fehlerfrei machen! Der Validator hilft dir dabei!


    https://validator.w3.org/nu/?d…yposts%26thema%3Dbeichten


    Wahrscheinlich sind dann alle deine Probleme gelöst - aber sich jetzt um Boxen Sorgen zu machen, die ungleich groß sind, macht gar keinen Sinn. Das was falsch ist muss erst berichtigt werden, dann kümmern wir uns um den Rest!

  • hatte Langeweile und habe deine Seite fehlerfrei gemacht.

    Das problem ist ,um das richtig zumachen musst du einiges ändern, weil in <li> ist kein <div> erlaubt <articel> und <section> wollen ein h Element haben laut Validation und noch andere sachen.

    Deswegen sieht das nicht mehr so aus wie vorher.

    Die boxen sind größer wei sie h Elemente haben und das menü ist auch leicht anders, weil alle divs jetzt li sind.

    Aber das wahr auch nur provisorisch, weil ich kucken wollte was passiert.

    * Link entfernt , weil existiert nicht mehr *

    Die Boxen sind gleich gross, wenn ich das zu deiner css hinzufüge.

    Code
    .post-list-item,.main-flex,.flex-flex,.top-flex{
    width:60%;
    }

    Hatte jetzt keine Lust die ganze css nach den vorhandenen Einträgen zu suchen .Brauchst ja dann nur die Vorhandenen ändern.

    Der Validator hat jetzt keine Fehler mehr.

    Vieleicht solltest du dir da mal was überlegen ,wie du es besser machen könntest

    https://validator.w3.org/nu/?s…gert_sich_automatisch.php


    Edit.

    Das ist besser

    Aber musst du mal selber gucken . Ich hätte die CSS Geschichte von Anfang an anders gemacht. Aber jeder macht es anders.

    Auf jeden fall solltest du bei denk lassen gucken und da deine richtige Einstellungen machen


  • Danke dir für die Mühe. War auch dabei es zu beheben hab alle Erros bis auf 1-2 schon weg. Nur warnings sind da halt. Aber hat das schlimme Auswirkungen, wenn da kein H elemnt ist in den Sections?

  • hat das schlimme Auswirkungen, wenn da kein H elemnt ist in den Sections?

    Gute frage.Ich denke das <section> mal dafür erstellt worden ist das der Inhalt mit einer Überschrift versehen wird.

    Deswegen zeigt jeder Validator das als Warnung an weil es nicht der Norm entspricht.Da es nur eine Warnung ist ,kann es ja nicht ganz so schlimm sein wenn es fehlt.

    Behebe den Fehler doch einfach mit <div> und lasse <section> weg, dann brauchst du dir darüber keine gedanken machen.


    Aber ob h Elemente in section und article Pflicht ist sollte mal wer anders was zu sagen ,weil ich kann nur raten und versuchen das logisch zusammen zu dichten.

    Schaden wirds wohl nicht wenn es Fehlt,aber sieht immer doof aus wenn man Html5 eEemente benutzt und sie dann nicht dafür verwendet wofür sie erfunden wurden

  • Ich habe mal eine grundsätzliche Frage. Wie soll das Layout deiner Seite überhaupt sein?

    Die Boxen untereinander? ... warum nutzt du dann 'flex-direction: row;'? .. warum dann überhaupt Flexbox -macht nach meiner Einschätzung die Sache nur unnötig kompliziert. Div's einfach sequentiell untereinander zu platzieren macht HTML eigentlich von ganz alleine.

    Aber ist natürlich auch nicht falsch, wenn man es auf den komplizierten Weg macht ;)... dann aber bitte richtig!

    Versuche mal folgendes in deinem CSS - zunächst mal zum Testen einfach nur ganz unten einfügen.

    Code
    main .post-list-item {
      display: flex;
      flex-direction: column;
    }
    main #all-post .flex-flex .main-flex {
      width: 100%;
    }
    main article div div section p.text-length {
      width: 99%;
    }

    Wenn das funktioniert, dann die entsprechenden Formatierungen im Stylesheet überarbeiten.

  • Ich habe mal eine grundsätzliche Frage. Wie soll das Layout deiner Seite überhaupt sein?

    Die Boxen untereinander? ... warum nutzt du dann 'flex-direction: row;'? .. warum dann überhaupt Flexbox -macht nach meiner Einschätzung die Sache nur unnötig kompliziert. Div's einfach sequentiell untereinander zu platzieren macht HTML eigentlich von ganz alleine.

    Aber ist natürlich auch nicht falsch, wenn man es auf den komplizierten Weg macht ;)... dann aber bitte richtig!

    Versuche mal folgendes in deinem CSS - zunächst mal zum Testen einfach nur ganz unten einfügen.

    Code
    main .post-list-item {
      display: flex;
      flex-direction: column;
    }
    main #all-post .flex-flex .main-flex {
      width: 100%;
    }
    main article div div section p.text-length {
      width: 99%;
    }

    Wenn das funktioniert, dann die entsprechenden Formatierungen im Stylesheet überarbeiten.


    Als erstes wollte ich immer 3 Boxen nebeneinander. Deswegen habe ich es angewendet. Hab das jetzt voll vergessen zu ändern ^^

    Danke das du extra noch die Lösung reingeschrieben hast! (Y)

Jetzt mitmachen!

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