08. 09. 2007, 14:59

Ahoi zusammen,

das blueprintcss-Framework bietet eine großartige Möglichkeit Inhalte auf Spaltenbasis zu layouten.

Nun möchte das auch in TYPO3 nutzen und einzelnen Inhaltselementen, je nach meinen Vorstellungen, kaskadierende CSS-Attribute geben.

Erstes Beispiel:
[HTML]<div class="Spalte spalten-2 danach-1 davor-1">
<h2>Über 2 Spalten hinweg</h2>
<p>Lorem ipsum ad qui amet dolore, vitae cetero mel ea. Facilis fastidii duo no.</p>
</div>
[/HTML]

Zweites Beispiel:
[HTML]<div class="Spalte spalten-4 ">
<h2>Über 4 Spalten hinweg</h2>
<p>Lorem ipsum ad qui amet dolore, vitae cetero quaerendum mel ea. Facilis fastidii duo no. Viris partiendo ius no, alia animal nam at.</p>
</div>
[/HTML]

Beim ersten Beispiel hat das Div eine horizontale Ausdehnung über zwei Spalten und davor und danach je eine leere Spalte als Abstandshalter. Diese Art der Spaltenanordnung beruht auf dem CSS-Framework blueprintcss (http://code.google.com/p/blueprintcss/).

Problem mit RTE-Klassen:
Ich möchte nicht alle möglichen Varianten innerhalb des RTE einfügen, dass würde den Rahmen sprengen.

Meine Frage:
Gibt es eine Möglichkeit einem Inhaltselement per Eingabefeld CSS-Klassen mit auf den Weg zu geben?

Zur Vervollständigung hier das (teilweise eingedeutschte) CSS auf Grundlage des blueprintcss-Framework:

  1. /* --------------------------------------------------------------
  2.  
  3.   Grid.css
  4.   * Spaltenraster mit 14 Spalten.
  5.  
  6.   Based on work by:
  7.   * Nathan Borror [playgroundblues.com]
  8.   * Jeff Croft [jeffcroft.com]
  9.   * Christian Metts [mintchaos.com]
  10.   * Khoi Vinh [subtraction.com]
  11.  
  12.   Spaltenbreite = 50 (linker und rechter Aussenabstand 20)
  13.   Gesamtbreite = (Spalten * 70) - 20
  14.  
  15. -------------------------------------------------------------- */
  16.  
  17. body {
  18. text-align: center; /* IE Fix */
  19. margin:10px 0 30px 0;
  20. }
  21.  
  22. /* Dieser Container beinhaltet alle Spalten */
  23. .container {
  24. text-align: left;
  25. position: relative;
  26. padding: 0;
  27. margin: 0 auto; /* Centers layout */
  28. width: 960px; /* Total width */
  29. background-color: #fff;
  30. }
  31.  
  32.  
  33. /* Spalten
  34. -------------------------------------------------------------- */
  35. .Spalte {
  36. float: left;
  37. margin: 0 10px;
  38. padding: 0;
  39. }
  40. * html .Spalte { overflow-x: hidden; } /* IE6 fix */
  41.  
  42.  
  43. /* Einer Spalte einen Rand zuweisen. */
  44. .rand {
  45. padding-right: 9px;
  46. margin-right: 0;
  47. border-right: 1px solid #ddd;
  48. }
  49.  
  50.  
  51. /* Der ersten und letzten Spalten zuweisen
  52. (kann auch zusammen benutzt werden um keinen Abstand zu erzeugen). */
  53.  
  54. .erste { margin-left: 0; }
  55. .letzte { margin-right: 0; }
  56.  
  57.  
  58. /* Spaltenbreiten ueber wieviele Spalten. */
  59. .spalten-1 { width: 50px; }
  60. .spalten-2 { width: 120px; }
  61. .spalten-3 { width: 190px; }
  62. .spalten-4 { width: 260px; }
  63. .spalten-5 { width: 330px; }
  64. .spalten-6 { width: 400px; }
  65. .spalten-7 { width: 470px; }
  66. .spalten-8 { width: 540px; }
  67. .spalten-9 { width: 610px; }
  68. .spalten-10 { width: 680px; }
  69. .spalten-11 { width: 750px; }
  70. .spalten-12 { width: 820px; }
  71. .spalten-13 { width: 890px; }
  72. .spalten-14 { width: 960px; margin: 0; }
  73.  
  74.  
  75. /* Klassen um einer Spalte eine/mehrere leere Spalten nach zu stellen. */
  76. .danach-1 { padding-right: 70px; }
  77. .danach-2 { padding-right: 140px; }
  78. .danach-3 { padding-right: 210px; }
  79. .danach-4 { padding-right: 280px; }
  80. .danach-5 { padding-right: 350px; }
  81. .danach-6 { padding-right: 420px; }
  82. .danach-7 { padding-right: 490px; }
  83. .danach-8 { padding-right: 560px; }
  84. .danach-9 { padding-right: 630px; }
  85. .danach-10 { padding-right: 700px; }
  86. .danach-11 { padding-right: 770px; }
  87. .danach-12 { padding-right: 840px; }
  88. .danach-13 { padding-right: 910px; }
  89.  
  90. /* Klassen um einer Spalte eine/mehrere leere Spalten voranzustellen. */
  91. .davor-1 { padding-left: 70px; }
  92. .davor-2 { padding-left: 140px; }
  93. .davor-3 { padding-left: 210px; }
  94. .davor-4 { padding-left: 280px; }
  95. .davor-5 { padding-left: 350px; }
  96. .davor-6 { padding-left: 420px; }
  97. .davor-7 { padding-left: 490px; }
  98. .davor-8 { padding-left: 560px; }
  99. .davor-9 { padding-left: 630px; }
  100. .davor-10 { padding-left: 700px; }
  101. .davor-11 { padding-left: 770px; }
  102. .davor-12 { padding-left: 840px; }
  103. .davor-13 { padding-left: 910px; }
  104.  
  105.  
  106. /* Mit .box to erstellt man Objekte mit einem Innenabstand innerhalb einer Spalte. */
  107. .box {
  108. padding: 1.5em;
  109. margin-bottom: 1.5em;
  110. background: #f0f0f0;
  111. }
  112.  
  113.  
  114. /* Clearing floats without extra markup
  115.   Based on How To Clear Floats Without Structural Markup by PiE
  116.   [http://www.positioniseverything.net/easyclearing.html] */
  117.  
  118. .clear { display: inline-block; }
  119. .clear:after, .container:after {
  120. content: ".";
  121. display: block;
  122. height: 0;
  123. clear: both;
  124. visibility: hidden;
  125. }
  126. * html .clear { height: 1%; }
  127. .clear { display: block; }
  128.  
  129.  
  130. /* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]:
  131.   All block elements (not hr) inside a col should have a 5px padding on each side.
  132.   (Not everyone wants this, but feel free to uncomment if you do.)
  133.  
  134. p,ul,ol,dl,h1,h2,h3,h4,h5,h6,
  135. caption,pre,blockquote,input,textarea {
  136.   padding-left: 5px;
  137.   padding-right: 5px;
  138. }
  139. div, table {
  140.   margin-left: 5px;
  141.   margin-right: 5px;
  142.   padding: 0;
  143. } */
  144.  
  145.  
  146. /* Images
  147. -------------------------------------------------------------- */
  148.  
  149. /* Grundlinie beachten (typography.css) */
  150. img { margin: 0 0 1.5em 0; }
  151.  
  152.  
  153. /* Umfluss fuer Objekte in einer Spalte vor und nach dem Objekt*/
  154. .pull-1 { margin-left: -70px; }
  155. .pull-2 { margin-left: -140px; }
  156. .pull-3 { margin-left: -210px; }
  157.  
  158. .push-0 { margin: 0 0 0 1.5em; float: right; } /* Right aligns the image. */
  159. .push-1 { margin: 0 -88px 0 1.5em; float: right; }
  160. .push-2 { margin: 0 -158px 0 1.5em; float: right; }
  161. .push-3 { margin: 0 -228px 0 1.5em; float: right; }