header-xh-01 header-xh-02 header-xh-03 header-xh-04 header-xh-05 header-xh-06 header-xh-07 header-xh-08 header-xh-09 header-xh-10 header-xh-11 header-xh-12 header-xh-13 header-xh-14
Templates für CMSimple_XH von
KRL Software-Development
private, nicht kommerzielle Website
by Karl Richard Lembach
Letzte Bearbeitung:

flexContainer

div.flexContainer - Elemente werden innerhalb des Containers nebeneinander und gleich hoch angezeigt (bei Bildern, die in der Höhe skaliert werden können). Im Template wird dieses Format verwendet, um unter dem Content die Newsboxen anzuzeigen (siehe unten).

Beispiel:

<div id="newsboxes2" style="display: block;">
<div class="flexContainer clear">
<section class="news">Block 1 Textsection</section>
<section class="news">Block 2 Text, der in einer fortlaufenden Zeile geschrieben wird und dadurch immer mehr Breite in Anspruch nimmt und so die anderen Elemente auf ihre absolut minimale Breite drängt.</section>
<section class="news">Block 3: Text,<br>der in zwei weitere Zeilen<br>umgebrochen wird.</section>
<section class="news">4: <img src="./userfiles/images/all/nc-eu.png" alt="" width="30" height="30"></section>
<section class="news">Block 5: Text</section>
<section class="news">6:<img src="./userfiles/images/all/cc.primary.srr.gif" alt="" width="250" height="88"></section>
</div>
</div>

ergibt dann:

Block 1 Textsection
Block 2 Text, der in einer fortlaufenden Zeile geschrieben wird und dadurch immer mehr Breite in Anspruch nimmt und so die anderen Elemente auf ihre absolut minimale Breite drängt.
Block 3: Text,
der in zwei weitere Zeilen
umgebrochen wird.
4:
Block 5: Text
6:

 

Dieser Text steht nach dem Container als normaler Fließtext.

Hier ein zweiter Container mit Bildern, das höchste Bild bestimmt, wie hoch die anderen Bilder gezogen werden.

<div class="flexContainer"><img src="./userfiles/images/all/AvatarWebmaster.jpg" alt="" width="175" height="175"> <img src="./userfiles/images/all/nc-eu.png" alt="" width="64" height="175"> <img src="./userfiles/images/krl-software-develepment480x94-transparent.gif" alt="" width="340"></div>

 

 


| Seitenanfang |