Chronologische Darstellung realisieren

  • Hallo liebes Forum,


    ich habe folgende Idee schaffe es aber nicht sie zu realisieren, ich möchte folgende Darstellung in HTML/CSS schreiben


    [Blockierte Grafik: https://s15.directupload.net/images/181207/wpo6iqgb.png]


    Ich hätte es für jedes Jahr in zwei Boxen aufgeteilt, ich habe es mit Bootstrap Grid probiert da auf dieses auf meiner Template Seite sowieso verwendet wird nur will es nicht funktionieren vorallem auch mit dem roten Strich.


    so in die Richtung dachte ich mir aber wie sieht das CSS dazu aus und habe ich das Bootstrap richtig verwendet weil die Anordnung dann auch nicht stimmt.

    Code
    <section class="col-md-3">
                                <img src="images/background/main.jpg" width="5%">
                            </section>
                            <section class="col-md3">
                                <h2>1980</h2>
                                <p>sdfsgsdfgdf dfgdg dfgfgdger dfgdfg sdfgdfgad we werwerhlsdfg sddfgdfg sdfgghruighrei gdfg erwtuierfg reuirgdfg</p>
                            </section>
  • Interessante Aufgabe! Mit Bootstrap habe ich keine Erfahrung, aber ich würde mit Flexlayout so vorgehen:

    • Zwei Spalten
    • Die roten Linien mit Divs geringer Höhe realisieren.
    • Die roten Linien mit einem negativen Margin in die gegenüberliegende Spalte hinein ragen lassen.
    • Die Jahreszahlen absolut positionieren.
  • wäre die Aufteilung so ungefähr richtig?


  • Ja, sollte passen. Bei dem roten Balken musst Du wahrscheinlich zwischen links und rechts unterscheiden, denn der linke ragt nach rechts hinein (margin-right:5em;) und der rechte nach links.

    Und das Jahr würde ich innerhalb der roten Balkens anordnen, dann kannst Du es leicht relativ dazu positionieren.

    Und in der Mitte brauchst Du wahrscheinlich noch den grauen senkrechten Balken.

  • ist doch viel komplizierter für mich als ich dachte, ich habe die Struktur jetzt nochmal anhand dieser Grafik geändert


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


    jetzt sieht die Struktur so aus

    Code
    <div class="chronikcontainer">
        <div class="chronikbild"><img src="images/background/main.jpg"></div>
        <div class="chronikcontainerrechts">
               <div class="chronikroterbalken">
               <div class="chronikcontainerinhalt">
                    <div class="chronikjahreszahl">1980</div>
                    <div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
               </div>
        </div>
    </div>

    Versuche mir jetzt das CSS dazu zu basteln aber die Anordnungen ändern sich nicht.

    ich muss doch im Container

    Code
    .chronikcontainer{
        display: flex;
        flex-direction: row;
    }
    .chronikcontainerrechts{
        display: flex;
        flex-direction: column;
    }

    angeben damit die divs "chronikbild" und "chronikcontainerrechts" von links nach rechts angeordnet werden.

    und dann in CSS in der Klasse "chronikcontainerrechts" von oben nach unten.


    oder?

  • Ich muss mich übrigens korrigieren: Bei deinem ersten Layout kann man problemlos auf die absolute Positionierung der Jahreszahlen verzichten, wenn man das betr. span innerhalb des div für die rote Linie anordnet. Weil deren Höhe gering ist erscheint die Jahreszahl dann darunter.

  • Wow ok das sieht um einiges besser aus als meins :)


    hier mal mein Code vielleicht nimmt sich jemand anderes etwas sinnvolles daraus


    CSS:

    und dann in der HTML:


    Aber ich werde diesen Code über Board werfen da mit der von Arne Drews besser gefällt.


    Ich habe noch eine Frage Arne (ich weiß nicht wie man hier Namen verlinkt) , wie könnte man das in eine sinnvolle Smartphoneansicht gestalten?

  • Hi,


    Das sollte mit wenig Aufwand machbar sein, wenn es grundlegend schonmal auf flex basiert.

    In meinem Beispiel habe ich das document zu Preview-Zwecken einfach mit einer festen Vorgabe von 700px Breite gesetzt.

    Das darf man für responsive natürlich nicht machen.


    Hier wäre besser, den Bereich auch über flex zu definieren und auf feste Angaben zu verzichten.

    Dann sollte das i.d.R. schon weitesgehend responsive sein.

  • ok habe jetzt aus

    Code
    width: 700px; 

    einfach

    Code
    max-width:700px; 

    gemacht und es klappt perfekt. Denn wenn man auf

    Code
    width:auto; 

    stellt wird es viel zu breit da der Container in dem es sich befindet 80% der Breite des Bildschirms nimmst.

Jetzt mitmachen!

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