[Tablet UI] Icons nebeneinander darstellen

[Gunther]

Ich möchte gerne Icons ohne Trennung von Feldern nebeneinander darstellen und die Texte jeweils darunter haben. Leider scheitere ich daran.
Könnt Ihr mir weiterhelfen?

Bild hängt an.

Mein Code schaut gerade so aus:

Code Auswählen Erweitern

        <header>Räume Favoriten</header>       


   <div class="inline">
<div data-type="button" data-color="#aa6900" data-url="raum_eg_kino.html" data-icon="fa-group" class="inline"></div>
        <div data-type="label" class="inline">Kino</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_wintergarten.html" data-icon="fa-lightbulb-o" class="inline"></div>
        <div data-type="label" class="inline">Wintergarten</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_essen.html" data-icon="fa-align-justify" class="inline"></div>
        <div data-type="label" class="inline">Essen</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_gaeste_wc.html" data-icon="fa-hand-lizard-o " class="inline"></div>
        <div data-type="label" class="inline">Gäste WC</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_bad.html" data-icon="fa-hand-lizard-o " class="inline"></div>
        <div data-type="label" class="inline">Badezimmer</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_flur.html" data-icon="fa-hand-lizard-o " class="inline"></div>
        <div data-type="label" class="inline">Flur</div>
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_kueche.html" data-icon="fa-hand-lizard-o " class="inline"></div>
        <div data-type="label" class="inline">Küche</div>       
<div data-type="button"  data-color="#aa6900" data-url="raum_eg_buero.html" data-icon="fa-hand-lizard-o " class="inline"></div>
        <div data-type="label" class="inline">Büro</div>       

   </div>

[Gunther]

Ich habe noch 2 weitere Fragen dazu:

1. Ich möchte die Schrift wie bei den anderen Buttons gerne grau darstellen
2. Wie bekomme ich die Icons etwas weiter nach oben. Gut zu sehen ist das beim Feld "Telefon". Dort kommt die Schrift recht weit unten dran. Oben wäre ja ein wenog Platz um das Feld zentrierter auszufüllen.

Mein Code zum Telefon:

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <header>Kino</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="telefon.html" data-icon="fa-phone" class="cell"></div>
        <div data-type="label" class="narrow darker">Telefon</div>
</li>

[Gerd]

Hallo Gunther
vieleicht so :

Code Auswählen Erweitern


<ul>
  <li data-row="1" data-col="1" data-sizex="5" data-sizey="1" >
   <header>Räume Favoriten</header>       
    <div class="inline">
      <div data-type="button" data-color="#aa6900" data-url="raum_eg_kino.html" data-icon="fa-group" ></div>
      <div data-type="label" >Kino</div>
    </div>
     <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_wintergarten.html" data-icon="fa-lightbulb-o" ></div>
      <div data-type="label">Wintergarten</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_essen.html" data-icon="fa-align-justify" ></div>
      <div data-type="label" >Essen</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_gaeste_wc.html" data-icon="fa-hand-lizard-o " ></div>
      <div data-type="label" >Gäste WC</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_bad.html" data-icon="fa-hand-lizard-o " ></div>
      <div data-type="label" >Badezimmer</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_flur.html" data-icon="fa-hand-lizard-o " ></div>
      <div data-type="label" >Flur</div>
    </div>
    <div class="inline">
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_kueche.html" data-icon="fa-hand-lizard-o " ></div>
      <div data-type="label" >Küche</div>   
    </div>
    <div class="inline">     
      <div data-type="button"  data-color="#aa6900" data-url="raum_eg_buero.html" data-icon="fa-hand-lizard-o " ></div>
      <div data-type="label" >Büro</div> 
    </div>
  </li>
  <li  data-row="2" data-col="1" data-sizex="1" data-sizey="1" >
    <header>Räume Favoriten2</header>
    <div data-type="button" data-color="#aa6900" data-url="raum_eg_kino.html" data-icon="fa-group" ></div>
    <div data-type="label" style="color:grey">Kino</div>
  </li>
</ul>

Gruß Gerd

[setstate]

Ich habe eine neuen Punkt dazu im FAQ aufgenommen:

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_bekommt_man_Elemente_nebeneinander_und_.C3.BCbereinander.3F

[setstate]

Label dunkler machen: class="darker"

Elemente hochschieben: class="top-narrow" oder class="top-narrow-2x"

[Gunther]

Super! Danke Euch!!!