HTML-Elemente unfreiwillig untereinander

  • Hallo miteinander.

    Kürzlich habe ich ein aufklappbares Menü eingeführt.
    Die ganze div-Suppe führt aus irgendeinem Grund dazu, dass sich sämtliche Elemente untereinander reihen.
    Ich hab einiges mit den Breiten, float usw... herumexperimentiert, komme aber immer wieder zum selben Ergebnis.

    Hoffe es kann mir geholfen werden,
    Danke!

    Aktuelles Resultat und Quellcode: http://blechlavine.bplaced.net/

    Mir raucht der Gulliver :smilie085:

  • Oh ich vergaß zu erwähnen dass es die Desktop-Ansicht betrifft.

    Mein Ziel sind 2 Spalten und 3 Reihen (Navigation).
    Die Flaggen sollten nebeneinander platziert werden.

    Eigentlich nichts schwieriges, aber ich bekomme den ganzen Spaß um's verrecken nicht nebeneinander

    Mir raucht der Gulliver :smilie085:

  • Hey!
    Um so eine Ansicht zu erzeugen gibt es mehrere Möglichkeiten. Eine wäre die einzelnen Menüpunkte über bspw. den Child-Selektor wie :nth-child() einzeln ansprechen und denen eine konkrete Position zuweisen und hoffen,
    dass diese Selektion dominanter als deine bisherigen CSS-Anweisungen sind. Soweit ich weiß kann man aber auch bestimmte CSS-Anweisung mit einem !important; erzwingen.
    ul li {
    color : blue !important;
    }
    Damit würden sich auch dominante CSS-Einstellungen unwirksam machen lassen. Falls du auf deiner Seite noch Videos hochladen möchtest, um etwas Marketing zu betreiben, sag Bescheid.
    Hoffe du kriegst das mit der Navi hin !

    Einmal editiert, zuletzt von Arne Drews (17. Oktober 2018 um 17:48) aus folgendem Grund: MOD: Link entfernt

  • Sicher könnte ich es so regeln, könnte die Navigation aber auch in einer Tabelle unterbringen...
    Leider erklärt mir das nicht die ungewollte Formatierung :(

    Mir raucht der Gulliver :smilie085:

  • 2 Spalten 3 reihen ? Und fahnen neben einander ?
    als so ?[INDENT]

    [TABLE='width: 500']

    [tr][td]

    Start

    [/td][td]

    Kontakt

    [/td][td][/td][td][/td][td][/td][/tr][tr][td]

    Karriere

    [/td][td]

    Referenzen

    [/td][td]

    Fahne

    [/td][td]

    Fahne

    [/td][td]

    Fahne

    [/td][/tr][tr][td]

    Über Uns

    [/td][td]

    Impressum

    [/td][td][/td][td][/td][td][/td][/tr]


    [/TABLE]


    [/INDENT]

  • So in etwa...allerdings habe ich nun doch noch die Lösung gefunden, Franzi92 hat mich auf die richtige Fährte gebracht.
    Die ein oder andere Zeile in der .css für die mobile Ansicht habe ich tatsächlich übersehen...fast schon peinlich :D
    Danke nochmal!

    Mir raucht der Gulliver :smilie085:

  • Nun ja... ungewollt kann man so nicht sagen ;)!
    Die Menüpunkte <a...> sind formatiert mit 'display: block;' ... so formatierte Elemente ordnen sich in der Regel untereinander an mach dies Formatierung weg, dann ist schon ein Problem gelöst.
    Dann ist dein div.nav-box mit 'float: left;' formatiert... etwas unglücklich, denn dann 'stapelt' sich deine Sprachauswahl rechts davon, weil 'float' eben zum Umfließen führt.
    Mach also das Float auch weg, dann sieht das schon anders aus... ok, noch nicht das, was du dir vorstellst... aber mach uns mal eine Skizze vom angestrebten Layout, dann kann man auch gezielter helfen.

    Nachtrag:
    Die Änderungen solltest du in eine @media Query packen, damit sie nur bei größeren Displays wirksam sind, es soll ja bei zB SmartPhones bestimmt in dieser 'untereinander'-Anordnung bleiben.

    if(!sleep)

    {$sheep++;}

    Einmal editiert, zuletzt von Sailor (17. Oktober 2018 um 18:50)

  • Sailor
    Das war einer der Punkte...manchmal seh ich den Wald vor lauter Baum nicht je größer die CSS-Dateien werden :rolleyes:
    Abgesehen von kleinen Macken, die ich jetzt einfach mal ignoriere, komme ich aktuell bestens voran und habe auch schon ein Ende in Sicht.
    Danke nochmal an alle Beitragenden :cool:

    Mir raucht der Gulliver :smilie085: