Inhaltselemente visuell trennen

  • vanlent vanlent
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    30. 06. 2011, 18:22

    Hallo T3-Gemeinde,

    habe das Problem, dass ich zwischen mehreren Inhaltselementen eine Linie setzen möchte. Mit dem "Trenner" geht das, scheint mir aber sehr umständlich.
    Wenn ich jetzt jedem Inhaltselemeent eine Linie unten (oder oben) via CSS zuweise, werden auch die Inhaltselemente formatiert, die alleine auf einer Seite stehen.

    Denkbar wäre doch eine Condition, die sagt: Wenn nur 1 IE dann diese Klasse/ID an das IE-DIV und sonst eine andere Klasse/ID, die dann eben eine Linie oben oder unten bekommt.

    Hoffe ihr versteht überhaupt, was ich machen möchte?

    Grüße
    Frank


  • 1
  • Shark1982 Shark1982
    Padawan
    0 x
    49 Beiträge
    0 Hilfreiche Beiträge
    30. 06. 2011, 22:36

    Mit Conditions kommst du meines erachtens nicht weiter.

    Mein spontaner Ratschlag wäre das du dir CSS Styled Content genauer anschaust.

    Es gibt lib.stdHeader ein Register was jeweils die erste Überschrift auf einer Seite mit einer extra CSS Klasse formatiert.
    Das müsste man für deinen Fall adaptieren für den globalen Container mit der CSS Klasse csc-default welcher in neueren CSS Styled Content Versionen jedes Inhaltselement umgibt.

    1. # Create class="csc-firstHeader" attribute for <Hx> tags
    2. 3.headerClass = csc-firstHeader
    3. 3.headerClass.if.value=1
    4. 3.headerClass.if.equals.data = cObj:parentRecordNumber
    5. 3.headerClass.noTrimWrap = | class="|"|

    Ein anderer Ansatz wäre mit JS (jQuery) oder den neueren CSS Selektoren.
    Mit JS sollte es auf jeden Fall gehen.
    Etwa folgendes Beispiel wenn du jQuery benutzt

    1. if (jQuery(".csc-default").length >= 2) {
    2. jQuery(".csc-default").css({"border-bottom":"1px solid #000"});
    3.  
    4. }

  • vanlent vanlent
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    01. 07. 2011, 14:24

    Hallo Shark1982,

    da ich (noch) kein Jquery benutze – wollte ich aber baldigst mit anfangen – würde ich jetzt spontan Lösung 1 bevorzugen. Nur das habe ich noch nicht so ganz verstanden.

    Habe im ObjectBrowser für den die Klasse "csc-default" nur eine Position gefunden, und die mit

    1. # Create class="csc-BoxOne" class for the first Contentbox
    2. tt_content.stdWrap.innerWrap.cObject.default.15.value = csc-BoxOne
    3. tt_content.stdWrap.innerWrap.cObject.default.15.value {
    4. if.value=1
    5. if.equals.data = cObj:parentRecordNumber
    6. noTrimWrap = | class="|"|
    7. }

    versucht zu manipulieren. Es bewirkt leider nur die Umbenennung aller Inhaltselemente-Divs, von csc-default zu csc-BoxOne?

    Grüße
    Frank

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    01. 07. 2011, 15:44

    Hi,

    vielleicht geht das mit dem CSS-Pseudo-Element ":first-child"?

    csc-firstHeader formatierst Du wie gewünscht alle Headers.
    Danach überschreibst Du mit "csc-firstHeader:first-child" nur das 1. Element.

    Ungetest und ohne Gewähr - nur als Denkansatz gedacht;-)

  • vanlent vanlent
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    01. 07. 2011, 16:45

    Hallo Topshopper,

    leider hats nicht funktioniert.
    Alle Divs bekommen die Klasse (inkl. des Zusatzes)

    Meinen Vorstellung ist da eigentlich ganz simpel:

    Wenn Inhaltselement
    Pos1 => Klasse .solo zuweisen
    und alle anderen werden über .csc-default angesprochen

    Grüße
    Frank

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    01. 07. 2011, 18:28

    Hallo vanlent, wie sieht denn dein CSS aus?

    Bei mir klappt das! Das erste div ist green, die restlichen red.
    Beispielscode:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>demo - Typography</title>
    6.  
    7.  
    8. .csc-firstHeader {background-color:green; }
    9. .csc-firstHeader:first-child {background-color:red; }
    10.  
    11. }
    12. </style>
    13. </head>
    14.  
    15. <body class="page-typography">
    16. <div id="page">
    17.  
    18.  
    19.  
    20. <div class="csc-firstHeader">ertes DIV</div>
    21. <div class="csc-firstHeader">zweites DIV</div>
    22. <div class="csc-firstHeader">anderes DIV</div>
    23. <div class="csc-firstHeader">letztes DIV</div>
    24.  
    25. </div>
    26.  
    27.  
    28.  
    29. </body>
    30. </html>

    Somit könntest Du es einfach per CSS - ohne Änderung des Code - stylen. Verstehst Du, was ich meine? Klappt es jetzt?

  • vanlent vanlent
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    04. 07. 2011, 11:51

    Hallo Topshopper,

    bingo!
    Hatte in der CSS-Anweisung den Punkt vor der Klasse vergessen. Es geht.
    Danke für die genial-einfache Idee!

    Auch wenn diese Lösung funktioniert, wundere ich mich, dass es offensichtlich nicht so einfach ist, das 1. Element via TS anzusprechen, oder es ist einfach zu trivial? ;)

    Grüße

  • topshopper topshoppe...
    Sternenflotten-Admiral
    0 x
    181 Beiträge
    0 Hilfreiche Beiträge
    04. 07. 2011, 12:09

    Hallo,

    ja gerngeschehen.

    Manchmal ist man zu versteift und denkt nur in eine Richtung;-) Das passiert mir auch viel zu oft. Ein paar Stunden/Tage Pause und danach nochmals NEU das Problem angehen, wirkt manchmal Wunder.

    Kannst Du den Thread bitte als "gelöst" markeiren?

  • 1