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; }