Beispiel :: Beispiel :: Beispiel :: Beispiel :: Beispiel :: Beispiel :: Beispiel ::
Es geht auch mit CCML:
Übertragen auf css-basierende Layouts könnte der Code in der page.ccml wie folgt aufgebaut werden:
Man erstellt eine Anweisung für die Bedingung: Bild soll rechts oder links dargestellt werden:
Das Ergebnis dieser Lösung ist auf der nächsten Seite zu sehen.
Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.
<cc:*> Start Abfrage Bild vorhanden oder nicht</cc:*>
<cc:if cond="¶.sidepicture.uid"> <cc:picture uid="¶.sidepicture.uid" suffix="_120" width="120" height="260" obj="parapic" bordercolor="#cccccc">
<cc:if cond="&_side_picture_position = 'left'">
<div class="sidepictureleft"> <!-- Start Marginalbild links-->
<cc:else>
<div class="sidepictureright"> <!-- Start Marginalbild rechts--></cc:if>
... hier die Anweisungen für Grafiken
</div> <!-- ENDE Positionierung Marginalbild-->
</cc:if> <cc:*> Ende Abfrage Bild vorhanden oder nicht</cc:*>
Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum.Hier fliesst ein Text herum. Einmal links und später dann rechts herum.
Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum.Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum. Hier fliesst ein Text herum. Einmal links und später dann rechts herum.
Hier der Code für den links floatenden Bereich in diesem Beispiel:
<div style="float:left; padding:10px;"><cc:printpicture obj="pic.logohsk" alt="Logo WebdesignConsult" title="Logo WebdesignConsult></img></div>
<p class="content">Hier fliesst ein Text herum. ......</p>
