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
    1. <section class="col-md-3">
    2. <img src="images/background/main.jpg" width="5%">
    3. </section>
    4. <section class="col-md3">
    5. <h2>1980</h2>
    6. <p>sdfsgsdfgdf dfgdg dfgfgdger dfgdfg sdfgdfgad we werwerhlsdfg sddfgdfg sdfgghruighrei gdfg erwtuierfg reuirgdfg</p>
    7. </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


    temp24.jpg


    jetzt sieht die Struktur so aus

    Code
    1. <div class="chronikcontainer">
    2.     <div class="chronikbild"><img src="images/background/main.jpg"></div>
    3.     <div class="chronikcontainerrechts">
    4.            <div class="chronikroterbalken">
    5.            <div class="chronikcontainerinhalt">
    6.                 <div class="chronikjahreszahl">1980</div>
    7.                 <div class="chroniktext">Hier kommt dann halt der Text der rechts unter dem roten Balken steht</div>
    8.            </div>
    9.     </div>
    10. </div>

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

    ich muss doch im Container

    Code
    1. .chronikcontainer{
    2.     display: flex;
    3.     flex-direction: row;
    4. }
    5. .chronikcontainerrechts{
    6.     display: flex;
    7.     flex-direction: column;
    8. }

    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?

  • Soweit Du es gepostet hast, scheint es mir richtig zu sein. Du musst nur noch für den Container .chronikcontainerinhalt wieder die Elemente mit row, von links nach rechts anordnen.

  • 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.

  • Habe jetzt leider keine Zeit mehr, aber mein Ansatz sieht gut aus ich glaube es funktioniert ich poste dann den Code, wenn ich fertig bin.

  • 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
    1. width: 700px; 

    einfach

    Code
    1. max-width:700px; 

    gemacht und es klappt perfekt. Denn wenn man auf

    Code
    1. width:auto; 

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