Schönen Abend!
Frage mich gerade, ob es in Tablet UI möglich ist, mehrere Werte in einer Textzeile darstellen zu lassen.
Ich versuche, Höchst- und Niedrigsttemperatur im Format 21°/12° anzuzeigen.
Holen tu ich mir die Werte mit einem "label"
<div class="cell" data-type="label" data-device="YahooWeather" data-get="fc1_high_c" data-unit="%B0C%0A"></div>
<div class="cell" data-type="label" data-device="YahooWeather" data-get="fc1_low_c" data-unit="%B0C%0A"></div>
Steht - eh klar - untereinander.
class="left" und class="right" hilft mir leider nicht weiter.
Ich hätte es mit einem SPAN versucht, das geht dann aber schon gar nicht. Auch ein style="float: right;" tut's nicht.
Geht das überhaupt?
Und warum müssen die Widgets immer DIVs sein?
Danke
Stefan
Class inline ist der Trick
<div class="inline" data-type="label" data-device="YahooWeather" data-get="fc1_high_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="YahooWeather" data-get="fc1_low_c" data-unit="%B0C%0A"></div>
Also, manchmal steh ich gewaltig auf der Leitung ... ;D
Danke, funktioniert einwandfrei!
Nur als Hinweis um das abzurunden... Du kannst auch mit <table> arbeiten, da kannst Du recht genau platzieren (Geschmackssache, ist mir persönlich aber lieber als <right><left> etc. Spart bei kleinen Symbolen massig Platz. Hab z.B. so die Darstellung von allen Batterie-Stati als Ampel in einer 2x2 Box gepackt - hier will ich ja nur was sehen und nichts schalten.
Du meinst, die DIVs in einer Tabelle darstellen? Geht natürlich.
Aber wenn wir schon dabei sind, schöner wäre das natürlich mit den CSS-Attributen display:table und display:table-cell ;)
Ich habe ein etwas ähnliches Problem und zwar möchte ich dasselbe zu vier aufeinanderfolgenden Tagen.
Für den ersten Tag hab ich das hingekriegt, nur leider stimmt es danach leider nicht mehr:
<div class="row">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
<div class="cell inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
<div class="cell inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
</div>
Hat da jemand eine kluge Idee?
Probiere mal mit den CSS Klassen vbox (vertikal) bzw hbox (horizontal) zu experimentieren. Dann könnte man sich das inline sparen.
<div class="row">
<div class="vbox">
<div class="" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
<div class="" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="vbox">
<div class="" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
<div class="" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="vbox">
<div class="" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
<div class="" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
</div>
</div>
Alternativ könnte man innerhalb der row noch mit der Klasse col (für column) arbeiten.
<div class="row">
<div class="col-1-3">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="col-1-3">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="col-1-3">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
</div>
</div>
Ich hab es hingekriegt - ohne CSS-Klassen und ohne col:
<div class="row">
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc2_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc3_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc4_high_c" data-unit="%B0C%0A"></div>
</div>
<div class="cell">
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_low_c" data-unit="%B0C%0A"></div>/
<div class="inline" data-type="label" data-device="MyWeather" data-get="fc5_high_c" data-unit="%B0C%0A"></div>
</div>
</div>