Gelöst: Ausrichtung von Anzeigen

[ekur]

EDIT:

Ich habe die Lösung gefunden: Die class centered musste als eigene Definition oberhalb stehen und dazu in der ersten Unterdefinition ein inline damit alle Definitionen mit einbezogen werden, also so:

Code Auswählen Erweitern


<div    class="centered">
<div    class="top-narrow inline">

und danach die anderen Definitionen.


Hallo,

nach dem Update auf die neueste Version hat es bei mir ein paar Anzeigen durcheinander gewirbelt aufgrund anderer Definitionen für Größen etc. Mit ein bischen Fleissarbeit habe ich alles wieder soweit ansehnlich bekommen bis auf einen Punkt, den ich nicht hinbekomme. Es geht um die Anzeige gemäß Anhang, und hier um die unterste Zeile, die ich nicht gemittelt in die Zelle bekomme. Der obere Teil (die drei ersten Zeilen)  ist als Tabelle über die classes cell-1-3 (jeweils eine Spalte für ein Symbol plus den Text dahinter) und inline definiert, die untere Zeile einfach als eine Zeile über die class inline. Ich bekomme diese Zeile jetzt nicht gemittelt, die class centered zeigt keine Wirkung.

Hier als code-Auszug einmal die rechte Spalte des oberen Teils und die Definition der unteren Zeile (beginnt ab der class top-narrow):

Code Auswählen Erweitern


<div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain06" data-unit=" %"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain12" data-unit=" %"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain18" data-unit=" %"
                class="cell inline bigger"></div>
        </div>
        <div    class="top-narrow centered">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
        </div>


Hat jemand eine Idee wie ich die Zeile mittig ausrichten kann?

ekur

[kvo1]

Hallo ekur

wäre es möglich das gesamte HTML - Beispiel zu poste, versuche gerade ähnliches und breche mir grade einen ab, will einfach nicht gelingen.

Eigentlich will ich nur 3 Spalte (Symbole mit Bezeichnung darunter) darstellen !

Danke

[ekur]

Klar, kein Problem. Das font-size Gedöns habe ich noch nicht umgestellt. Läuft bei mir mit:

Code Auswählen Erweitern


    <meta name="widget_base_width" content="93">
    <meta name="widget_base_height" content="110">
    <meta name="widget_min_cols" content="13">


Wahrscheinlich kann das auch noch einfacher gemacht werden:

Code Auswählen Erweitern


<li data-row="1" data-col="4" data-sizex="5" data-sizey="2">
    <header><div data-type="label" style="font-size:14px" class="inline">VORHERSAGE für HEUTE, den</div>
        <div    data-type="label" style="font-size:14px"
                data-device="Wetter" data-get="fc0_date" class="inline"></div></header>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell inline bigger">06.00</div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell darker inline bigger">12.00</div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-time_clock" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" class="cell inline bigger">18.00</div>
        </div>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp06" data-unit="%B0C%0A"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp12" data-unit="%B0C%0A"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_temp18" data-unit="%B0C%0A"
                class="cell inline bigger"></div>
        </div>
        <div    class="cell top-narrow-2x cell-1-3 inline">
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain06" data-unit=" %"
                class="cell inline bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain12" data-unit=" %"
                class="cell inline darker bigger"></div>
        <div    class="newline top-narrow"></div>
        <div    data-type="symbol" data-icon="oa-weather_rain" data-off-color="#aa6900"
                class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="fc0_chOfRain18" data-unit=" %"
                class="cell inline bigger"></div>
        </div>
        <div    class="centered">
        <div    class="top-narrow inline">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
        </div></div>
</li>


[Gunther]

hast Du mal versucht das centered in das inline-div reinzunehmen?:

Code Auswählen Erweitern

        <div    class="top-narrow inline centered">
        <div    data-type="label" style="font-size:14px" class="cell inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_min"
                    data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="2" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-temp_temperature_max"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-part="4" data-unit="%B0C%0A"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_humidity"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="humidity" data-unit=" %"
                class="cell bigger inline"></div>
        <div    data-type="symbol" data-icon="oa-weather_wind"
                data-off-color="#aa6900" class="cell inline"></div>
        <div    data-type="label" data-device="Wetter" data-get="wind" data-unit=" km/h"
                class="cell bigger inline"></div>
</div>

[Gunther]

oh gerade erst gesehen, dass Du schon eine Lösung hattest...