Beschriftung von symbolen

[Nic0205]

Hallo zusammen,

ich würde gerne eine Liste von Fenster-Symbolen "beschriften". Die Symbole sollen nach rechts und nicht nach unten dargestellt werden.

Mein Problem ist, dass ich um die Symbole große genug darzustellen die Class "bigger" genutzt habe - dadurch wird aber auch die Beschriftung in "bigger" dargestellt. So sieht mein Code aus:

Code Auswählen Erweitern

<li class="gridster" data-row="1" data-col="2" data-sizex="15" data-sizey="2" >
        <header>Fenster</header>
                <div class="cell right inline">
               
                <div data-type="symbol" data-device="Gaeste_WC_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"> Test1</div>
               
               
                <div data-type="symbol" data-device="Kueche_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on">Test2</div>
               

                <div data-type="symbol" data-device="WZ_vorn_Fenster" class="bigger" 
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="WZ_links_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="Waschraum_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="Bad_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="Schlafzimmer_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="Lilli_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
                <div data-type="symbol" data-device="Arbeitszimmer_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div>
               
               
             
        </div>
       
</li>

Hat jemand einen Tip für mich?

Gruß Nic

[bjoernbo]

mal schnell aus der Hüfte geschossen ....

Code Auswählen Erweitern

<div data-type="symbol" data-device="Kueche_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"><font-size="2">Test2</font></div>

[n4rrOx]

Hi,

hast du es mal so versucht?

Code Auswählen Erweitern


<li class="gridster" data-row="1" data-col="2" data-sizex="15" data-sizey="2" >
        <header>Fenster</header>
                <div class="cell right inline">
                <div data-type="symbol" data-device="Gaeste_WC_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div><br />
<div data-type="label" class="cell darker top-space">Test1</div>
        </div>                           

                <div class="cell right inline">
                <div data-type="symbol" data-device="Kueche_Fenster" class="bigger"
                data-icon="ftui-window" data-on-color="#bb3232" data-off-color="#2E822B" data-get-on="on" data-get-off="!on"></div><br />
                <div data-type="label" class="cell darker top-space">Test2</div>
        </div>
[ ... ]   
</li>


Ist ungetestet ... könnte aber evtl. funktionieren.