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.
code ansehen
<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>
