kann man mit css den inhalt eines div containers zwischen dem inhalten eines anderen div containers darstellen

  • Also ich habe folgendes Problem:

    Ich habe auf meiner Webseite links eine Übersichtsleiste und rechts dann einen haufen Text. Im HTML sieht das dann ungefähr so aus:


    <div id="main">

    <div id="list">

    <a>TITEL</a>

    <a>INFO</a>

    <a>WEITERFÜHRENDES</a>

    </div>

    <div id="content">

    EINEN HAUFEN TEXT

    </div>

    </div>


    Im CSS habe ich dann "main" als row dargestellt und "list" als column sodass es halt so angeordnet ist wie ich beschrieben habe - links eine Liste TITEL, INFO und WEITERFÜHRENDES und rechts EINEN HAUFEN TEXT. Jetzt möchte ich aber, dass unter bestimmten Umständen (also wenn der Bildschirm zu klein ist) der Text zwischen den Punkten der Liste angezeigt wird... Also etwa so


    TITEL

    INFO

    EINEN HAUFEN TEXT

    WEITERFÜHRENDES


    Alles also in einer Liste, gleich angeordnet so als wäre es im selben div container.

    Mir geht es jetzt nur darum ob ich mit CSS das vorhandene HTML so darstellen kann wie beschrieben, also ohne die Struktur des HTML zu ändern. Kann ich erst 2 Inhalte eines div-Containers darstellen, dann einen anderen Container und dann den Rest des ersten Containers und wenn ja, wie geht das am einfachsten?


    Vielen Dank im Voraus

  • Ja, wenn das dein Wunsch ist, kannst Du das mit Gridlayout realisieren. Mit grid-column und grid-row kannst Du angeben, in welcher Zelle des Grid ein Element angezeigt wird, siehe hier:

    A Complete Guide to CSS Grid | CSS-Tricks
    Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
    css-tricks.com

    Lies das in der rechten Spalte über die Grid-Items.


    Oder alternativ kannst Du den Elementen jeweils eine grid-area zuweisen und dann mit grid-template-areas angeben in welchen Zellen des Grid sie angezeigt werden sollen.


    Und wenn Du damit nicht zum Ziel kommst, dann melde dich wieder.

Jetzt mitmachen!

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