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:
<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>
Zweites Beispiel:
<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>
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:
/* --------------------------------------------------------------
Grid.css
* Spaltenraster mit 14 Spalten.
Based on work by:
* Nathan Borror [playgroundblues.com]
* Jeff Croft [jeffcroft.com]
* Christian Metts [mintchaos.com]
* Khoi Vinh [subtraction.com]
Spaltenbreite = 50 (linker und rechter Aussenabstand 20)
Gesamtbreite = (Spalten * 70) - 20
-------------------------------------------------------------- */
body {
text-align: center; /* IE Fix */
margin:10px 0 30px 0;
}
/* Dieser Container beinhaltet alle Spalten */
.container {
text-align: left;
position: relative;
padding: 0;
margin: 0 auto; /* Centers layout */
width: 960px; /* Total width */
background-color: #fff;
}
/* Spalten
-------------------------------------------------------------- */
.Spalte {
float: left;
margin: 0 10px;
padding: 0;
}
* html .Spalte { overflow-x: hidden; } /* IE6 fix */
/* Einer Spalte einen Rand zuweisen. */
.rand {
padding-right: 9px;
margin-right: 0;
border-right: 1px solid #ddd;
}
/* Der ersten und letzten Spalten zuweisen
(kann auch zusammen benutzt werden um keinen Abstand zu erzeugen). */
.erste { margin-left: 0; }
.letzte { margin-right: 0; }
/* Spaltenbreiten ueber wieviele Spalten. */
.spalten-1 { width: 50px; }
.spalten-2 { width: 120px; }
.spalten-3 { width: 190px; }
.spalten-4 { width: 260px; }
.spalten-5 { width: 330px; }
.spalten-6 { width: 400px; }
.spalten-7 { width: 470px; }
.spalten-8 { width: 540px; }
.spalten-9 { width: 610px; }
.spalten-10 { width: 680px; }
.spalten-11 { width: 750px; }
.spalten-12 { width: 820px; }
.spalten-13 { width: 890px; }
.spalten-14 { width: 960px; margin: 0; }
/* Klassen um einer Spalte eine/mehrere leere Spalten nach zu stellen. */
.danach-1 { padding-right: 70px; }
.danach-2 { padding-right: 140px; }
.danach-3 { padding-right: 210px; }
.danach-4 { padding-right: 280px; }
.danach-5 { padding-right: 350px; }
.danach-6 { padding-right: 420px; }
.danach-7 { padding-right: 490px; }
.danach-8 { padding-right: 560px; }
.danach-9 { padding-right: 630px; }
.danach-10 { padding-right: 700px; }
.danach-11 { padding-right: 770px; }
.danach-12 { padding-right: 840px; }
.danach-13 { padding-right: 910px; }
/* Klassen um einer Spalte eine/mehrere leere Spalten voranzustellen. */
.davor-1 { padding-left: 70px; }
.davor-2 { padding-left: 140px; }
.davor-3 { padding-left: 210px; }
.davor-4 { padding-left: 280px; }
.davor-5 { padding-left: 350px; }
.davor-6 { padding-left: 420px; }
.davor-7 { padding-left: 490px; }
.davor-8 { padding-left: 560px; }
.davor-9 { padding-left: 630px; }
.davor-10 { padding-left: 700px; }
.davor-11 { padding-left: 770px; }
.davor-12 { padding-left: 840px; }
.davor-13 { padding-left: 910px; }
/* Mit .box to erstellt man Objekte mit einem Innenabstand innerhalb einer Spalte. */
.box {
padding: 1.5em;
margin-bottom: 1.5em;
background: #f0f0f0;
}
/* Clearing floats without extra markup
Based on How To Clear Floats Without Structural Markup by PiE
[http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }
.clear:after, .container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }
/* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]:
All block elements (not hr) inside a col should have a 5px padding on each side.
(Not everyone wants this, but feel free to uncomment if you do.)
p,ul,ol,dl,h1,h2,h3,h4,h5,h6,
caption,pre,blockquote,input,textarea {
padding-left: 5px;
padding-right: 5px;
}
div, table {
margin-left: 5px;
margin-right: 5px;
padding: 0;
} */
/* Images
-------------------------------------------------------------- */
/* Grundlinie beachten (typography.css) */
img { margin: 0 0 1.5em 0; }
/* Umfluss fuer Objekte in einer Spalte vor und nach dem Objekt*/
.pull-1 { margin-left: -70px; }
.pull-2 { margin-left: -140px; }
.pull-3 { margin-left: -210px; }
.push-0 { margin: 0 0 0 1.5em; float: right; } /* Right aligns the image. */
.push-1 { margin: 0 -88px 0 1.5em; float: right; }
.push-2 { margin: 0 -158px 0 1.5em; float: right; }
.push-3 { margin: 0 -228px 0 1.5em; float: right; }