Ankündigung

Einklappen
Keine Ankündigung bisher.

Rooms-Menu -> Raumliste (Listview) zweispaltig

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Maxthomas2001
    antwortet
    Hallo,
    hat jemand vielleicht einen Tipp, wie man die Schaltflächen nebeneinander auch optisch wie zwei Schaltflächen erscheinen lassen kann?

    Einen Kommentar schreiben:


  • Maxthomas2001
    antwortet
    Hallo,
    ich bin nach der Anleitung von Masterjost vorgegangen. Passt soweit.
    Ich hätte allerdings gerne zwischen den Spalten einen Trenner. Oder einen kleinen Freiraum.
    Also zwei nebeneinander angrenzende Räume sollen optisch etwas getrennt werden.

    Hat jemand einen Tipp, wie man so etwas bewerkstelligen kann?

    Einen Kommentar schreiben:


  • danny
    antwortet
    letzte Zeile fehlt ein </ul>?

    <li data-role="list-divider">Spezial</li>
    <li data-icon="false">
    <a href="index.php?page=room_zentral">
    <img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
    <div class="ui-li-aside">
    </div>
    </a>
    </li>
    </ul>

    Gruß Danny

    Einen Kommentar schreiben:


  • Gue0411
    antwortet
    Hallo zusammen,
    ich habe mich auch an der zweispaltigen Darstellung versucht.
    Wenn ich das nach der letzten Anleitung einbaue, dann bekomme ich allerdings sowas hier zurück:
    smartVISU_rooms_menu.png

    mein Eintrag in der css sieht so aus:
    Code:
    .liste2fach {
        border-right: 0 none;
        border-top: 0 none;
        box-sizing: border-box;
        display: block;
        float: left;
        /*height: 70px;*/
        margin: 0;
        overflow: hidden;
        padding: 0 5px 5px 0;
        position: relative;
        width: 100%;
    }
    /* some corrections for bigger displays */
    @media all and (min-width: 900px) {
        .liste2fach {
            width: 50%;
        }
    }
    und die rooms_menu sieht so aus:
    Code:
    <ul data-role="listview" data-dividertheme="c">
        <li data-role="list-divider">Infos</li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_wetter">
                <img class="icon"' src='{{ icon0 }}weather_cloudy_light.svg'/><h3>Wetter</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_abfall">
                <img class="icon"' src='{{ icon0 }}message_garbage.svg'/><h3>Abfallkalender</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_telefon">
                <img class="icon"' src='{{ icon0 }}phone_ring.svg'/><h3>Telefonliste</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_lueftung">
                <img class="icon"' src='{{ icon0 }}vent_ventilation_level_0.svg'/><h3>Lüftung</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_waermepumpe">
                <img class="icon"' src='{{ icon0 }}sani_buffer_temp_all.svg'/><h3>Wärmepumpe</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false" class="liste2fach">
            <a href="index.php?page=infos_pv">
                <img class="icon"' src='{{ icon0 }}measure_photovoltaic_inst.svg'/><h3>PV</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        
        <li data-role="list-divider">Übersichten</li>
        <li data-icon="false">
            <a href="index.php?page=summary_rollos">
                <img class="icon"' src='{{ icon0 }}fts_shutter_40.svg'/><h3>Rollos</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        <li data-icon="false">
            <a href="index.php?page=summary_temperaturen">
                <img class="icon"' src='{{ icon0 }}temp_temperature.svg'/><h3>Temperaturen</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>
        
        <li data-role="list-divider">Spezial</li>
        <li data-icon="false">
            <a href="index.php?page=room_zentral">
                <img class="icon"' src='{{ icon0 }}control_building_s_okg_all.svg'/><h3>Zentralfunktionen</h3>
                <div class="ui-li-aside"></div>
            </a>
        </li>

    Einen Kommentar schreiben:


  • masterjost
    antwortet
    1.jpg2.jpg

    Einen Kommentar schreiben:


  • masterjost
    antwortet
    Hallo Micha,

    falls es noch benötigt wird, ich habs folgendermaßen gemacht. Grundsätzlich wie beschrieben über die CSS und dann noch folgenden Eintrag in die eigene VISU CSS

    HTML-Code:
    .tilemenu {
        border-right: 0 none;
        border-top: 0 none;
        box-sizing: border-box;
        display: block;
        float: left;
        /*height: 70px;*/
        margin: 0;
        overflow: hidden;
        padding: 0 5px 5px 0;
        position: relative;
        width: 100%;
    }
    
    /* some corrections for bigger displays */
    @media all and (min-width: 900px) {
        .tilemenu {
            width: 50%;
        }
    }
    
    .tilemenu_1z {
        border-right: 0 none;
        border-top: 0 none;
        box-sizing: border-box;
        display: block;
        float: left;
        /*height: 70px;*/
        margin: 0;
        overflow: hidden;
        padding: 0 5px 5px 0;
        position: relative;
        width: 100%;
    }
    Er stellt das Menü also 1-spaltig dar, außer du hast ein Device, das mindestens 900Pixel Breite hat, dann wirds 2-spaltig.

    Das tilemenu_1z steht bei mir für einzeilig. Bezieht sich aber nur auf das Raummenü, welches links auftaucht, wenn du einen Raum ausgewählt hast. Da das Menü recht schmal ist, wollte ich das auch 1-spaltig haben.
    Jeder Raum bekommt dann ganz oben statt
    HTML-Code:
    {% extends "rooms.html" %}
    ein
    HTML-Code:
    {% extends "rooms_1z.html" %}
    . Die rooms_1z.html ist eine Kopie der rooms.html nur, dass ich bei dieser das
    HTML-Code:
    {% include 'rooms_menu.html' %}
    durch ein
    HTML-Code:
    {% include 'rooms_menu_1z.html' %}
    ersetzt habe. Die rooms_menu_1z.html ist wiederrum eine Kopie deiner eigenen rooms_menu.html, nur dass du alle einträge von
    HTML-Code:
    class="tilemenu
    in
    HTML-Code:
    class="tilemenu_1z
    abänderst.
    Dadurch musst du zwar immer die rooms_menu UND die rooms_menu_1z aktuell halten, aber was "intelligentes" über css hab ich leider noch nicht hinbekommen und es funktioniert soweit erstmal bei mir.



    Grüße

    Zuletzt geändert von masterjost; 20.07.2018, 11:12.

    Einen Kommentar schreiben:


  • lexxmm
    antwortet
    Zitat von felix86 Beitrag anzeigen
    Hi,
    Ich hätte es gerne, dass in der Startansicht die Räume zweispaltig dargestellt werden. Wenn man dann auf einen Raum geklickt hat und die Räume links aufgelistet werden wäre es besser das einspaltige Design zu haben. Bei meinem 8" Tablet passen sonst die Raumnamen und die Temperatur nicht in das Feld.
    Hallo

    hat das jemand hinbekommen?

    Gruss, Micha

    Einen Kommentar schreiben:


  • BlackCrow
    antwortet
    Super ,vielen lieben Dank!! Wirklich klasse :-)

    Es funktioniert jetzt.

    Liebe Grüße

    Miguel

    Einen Kommentar schreiben:


  • lucipher
    antwortet
    Hallo Miguel,

    ich habe jetzt mal deinen Ausschnitt in meinen Testaufbau mit eingefügt.

    HTML-Code:
    <ul data-role="listview" data-dividertheme="c">
     <li data-role="list-divider">Obergeschoss</li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=og_beleuchtung">
       <img class="icon" src="{{ icon0 }}light_light.png" />
       <h3>Flur</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('erdgeschoss.flur.bodenlicht', ['erdgeschoss.flur.bodenlicht'], 'Bodenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.flur.treppenlicht', ['erdgeschoss.flur.treppenlicht'], 'Treppe', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.symbol('obergeschoss.flur.licht.status', ['obergeschoss.flur.licht.status'], 'Licht ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.flur.temperatur', 'obergeschoss.flur.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=og_schlafzimmer">
       <img class="icon" src="{{ icon0 }}scene_making_love.png" />
       <h3>Schlafzimmer</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('obergeschoss.schlafzimmer.licht.status', ['obergeschoss.schlafzimmer.licht.status'], 'Schlafzimmer ', icon1~'light_light.png', 1, 'or') }}&nbsp;
        {{ basic.symbol('obergeschoss.ankleide.licht.status', ['obergeschoss.ankleide.licht.status'], 'Ankleide  ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
        {{ basic.symbol('obergeschoss.schlafzimmer.fenster', ['obergeschoss.schlafzimmer.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.schlafzimmer.temperatur', 'obergeschoss.schlafzimmer.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
    
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=kinderzimmer2">
       <img class="icon" src="{{ icon0 }}scene_childs_room.png" />
       <h3>Testraum</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('obergeschoss.kindsued.licht.status', ['obergeschoss.kindsued.licht.status'], 'Deckenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;
        {{ basic.symbol('obergeschoss.kindsued.fenster', ['obergeschoss.kindsued.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
        {{ basic.float('obergeschoss.kindsued.temperatur', 'obergeschoss.kindsued.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
     &nbsp;
    </ul>
    
    <ul data-role="listview" data-dividertheme="c">
     <li data-role="list-divider">Erdgeschoss</li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=wohnen">
       <img class="icon" src="{{ icon0 }}scene_livingroom.png" />
       <h3>Wohnbereich</h3>
    
       <div class="ui-li-aside">
        {{ basic.symbol('erdgeschoss.wohnzimmer.licht.status', ['erdgeschoss.wohnzimmer.licht.status'], 'Wohnzimmer  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.esstisch', ['erdgeschoss.wohnzimmer.esstisch'], 'Esstisch  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.ambiente.status', ['erdgeschoss.wohnzimmer.ambiente.status'], 'Ambiente  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.wohnzimmer.giebel.status', ['erdgeschoss.wohnzimmer.giebel.status'], 'Giebel  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;<br>
        {{ basic.symbol('erdgeschoss.wohnzimmer.terrassentuer', ['erdgeschoss.wohnzimmer.terrassentuer'], 'Terrasse Wohnzimmer geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;
        {{ basic.symbol('erdgeschoss.essbereich.fenster', ['erdgeschoss.essbereich.fenster'], 'Terrasse Esstisch geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;<br>
        {{ basic.float('erdgeschoss.wohnzimmer.temperatur', 'erdgeschoss.wohnzimmer.temperatur', 'temp') }} &nbsp;
       </div>
      </a>
     </li>
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
     &nbsp;
    </ul>
    Das Ergebnis ist:
    TestVisu.PNG

    Dazu habe ich aber noch etwas eingefügt. Damit das funktioniert müssen in einer Zeile immer 2 Listenelemente vorhanden sein. Hierzu habe ich jeweils ein leeres Listenelement zu deinem HTML Code hinzugefügt.

    HTML-Code:
     <li data-icon="false" class="tilemenu">
      <div class="ui-li-aside">
       &nbsp;
      </div>
     </li>
    Hoffe das hilft weiter.

    Gruß

    Einen Kommentar schreiben:


  • BlackCrow
    antwortet
    Hi lucipher,

    danke für die Tipps. Nach einigem fummeln habe ich es jetzt geschafft und das Ergebnis kann sich sehen lassen.

    Ich habe noch eine Sache, die mich etwas verwirrt:

    Als ich das Beispiel Deines ersten Posts genommen hatte, funktionierten die Überschriften nicht (weil sie halt auch als "Block" dargestellt wurden), aber zumindest sah es sonst ordentlich aus. Auf PC, Laptop und Touchscreen sah es gleich gut aus.

    Ich habe jetzt die zweite Variante Deines letzten Posts verwendet. Es ist jetzt perfekt, allerdings zeigt er es jetzt auf dem Touchscreen wieder nur einspaltig an. Der Cache ist aus und ich habe die rooms_menu auch um einen Raum erweitert. Diese Aktualisierung zeigt er auch an, als er liest es auf jeden Fall, berücksichtigt die zwei spalten allerdings nicht mehr.

    Hat da jemand eine Idee für mich? Ich hab von CSS leider so viel Ahnung, wie ein Meerschwein vom Stabhochsprung.

    Anbei mal ein Auszug des Beginns und des Endes meiner rooms_menu (also verkürzte Fassung)

    Code:
    <ul data-role="listview" data-dividertheme="c">
    <li data-role="list-divider">Obergeschoss</li>
     <li data-icon="false" class="tilemenu">
      <a href="index.php?page=og_beleuchtung">
    <img class="icon" src="{{ icon0 }}light_light.png" />
    
    <------><------><------><h3>Flur</h3>
    
    <------><------><------><div class="ui-li-aside">
    {{ basic.symbol('erdgeschoss.flur.bodenlicht', ['erdgeschoss.flur.bodenlicht'], 'Bodenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.flur.treppenlicht', ['erdgeschoss.flur.treppenlicht'], 'Treppe', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.symbol('obergeschoss.flur.licht.status', ['obergeschoss.flur.licht.status'], 'Licht ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.flur.temperatur', 'obergeschoss.flur.temperatur', 'temp') }} &nbsp;
    </div>
    <------><------></a>
    <------></li>
    <li data-icon="false" class="tilemenu">
    <------><------><a href="index.php?page=og_schlafzimmer">
    <------><------><------><img class="icon" src="{{ icon0 }}scene_making_love.png" />
    
    <------><------><------><h3>Schlafzimmer</h3>
    
    <------><------><------><div class="ui-li-aside">
    {{ basic.symbol('obergeschoss.schlafzimmer.licht.status', ['obergeschoss.schlafzimmer.licht.status'], 'Schlafzimmer ', icon1~'light_light.png', 1, 'or') }}&nbsp;
    {{ basic.symbol('obergeschoss.ankleide.licht.status', ['obergeschoss.ankleide.licht.status'], 'Ankleide  ', icon1~'light_light.png', 1, 'or') }}&nbsp;<br>
    {{ basic.symbol('obergeschoss.schlafzimmer.fenster', ['obergeschoss.schlafzimmer.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.schlafzimmer.temperatur', 'obergeschoss.schlafzimmer.temperatur', 'temp') }} &nbsp;
    </div>
    <------><------></a>
    <------></li>
    
    <li data-icon="false" class="tilemenu">
    <------><------><a href="index.php?page=kinderzimmer2">
    <------><------><------><img class="icon" src="{{ icon0 }}scene_childs_room.png" />
    
    <------><------><------><h3>Testraum</h3>
    
    <------><------><------><div class="ui-li-aside">
    {{ basic.symbol('obergeschoss.kindsued.licht.status', ['obergeschoss.kindsued.licht.status'], 'Deckenlicht', icon1~'light_light.png', 1, 'or') }}&nbsp;
    {{ basic.symbol('obergeschoss.kindsued.fenster', ['obergeschoss.kindsued.fenster'], 'Fenster geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;<br>
    {{ basic.float('obergeschoss.kindsued.temperatur', 'obergeschoss.kindsued.temperatur', 'temp') }} &nbsp;
    </div>
    <------><------></a>
    <------></li>
    &nbsp;</ul>
    
    <ul data-role="listview" data-dividertheme="c">
    
    <li data-role="list-divider">Erdgeschoss</li>
    <li data-icon="false" class="tilemenu">
    <------><------><a href="index.php?page=wohnen">
    <------><------><------><img class="icon" src="{{ icon0 }}scene_livingroom.png" />
    
    <------><------><------><h3>Wohnbereich</h3>
    
    <------><------><------><div class="ui-li-aside">
    {{ basic.symbol('erdgeschoss.wohnzimmer.licht.status', ['erdgeschoss.wohnzimmer.licht.status'], 'Wohnzimmer  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.esstisch', ['erdgeschoss.wohnzimmer.esstisch'], 'Esstisch  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.ambiente.status', ['erdgeschoss.wohnzimmer.ambiente.status'], 'Ambiente  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.wohnzimmer.giebel.status', ['erdgeschoss.wohnzimmer.giebel.status'], 'Giebel  ', icon1~'light_light.png', 1, 'or') }}&nbsp;&nbsp;<br>
    {{ basic.symbol('erdgeschoss.wohnzimmer.terrassentuer', ['erdgeschoss.wohnzimmer.terrassentuer'], 'Terrasse Wohnzimmer geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;
    {{ basic.symbol('erdgeschoss.essbereich.fenster', ['erdgeschoss.essbereich.fenster'], 'Terrasse Esstisch geöffnet  ', icon1~'fts_window_2w_open.png', 1, 'or') }}&nbsp;&nbsp;<br>
    {{ basic.float('erdgeschoss.wohnzimmer.temperatur', 'erdgeschoss.wohnzimmer.temperatur', 'temp') }} &nbsp;
    </div>
    <------><------></a>
    <------></li>
    
    &nbsp;</ul>
    Viele Grüße

    Miguel


    Einen Kommentar schreiben:


  • lucipher
    antwortet
    Hallo,

    also ich habe zwei Lösungen für euer list-divider Problem. Vielleicht haben hier noch ein paar CSS Gurus noch weitere und elegantere Beispiele.

    In meinem geposteten Beispiel habe ich im <ul> Tag gar kein <li> Tag mit dem "list-divider" Attribut. Den "list-divider" habe ich außerhalb dieses Konstrukts erstellt und nicht mit der CSS Klasse verbunden.

    HTML-Code:
    <ul data-role="listview" data-dividertheme="c">
            <li data-role="list-divider">Erdgeschoss</li>
    </ul><br>&nbsp;
    Erst danach kommt dieser Code:
    HTML-Code:
    <ul data-role="listview" data-dividertheme="c" class="tilemenu">
    
      
        <li data-icon="false">
            <a href="index.php?page=room_children">
            <h1>Kinderzimmer</h1>
    
                <div class="ui-li-aside"> {{ basic.float('temp_children', 'ff.children.heating.temperature', '°') }} // {{ basic.float('state_children', 'ff.children.heating.state', '%') }}</div>
            </a>
        </li>
        <li data-icon="false">
            <a href="index.php?page=room_office">
            <h3>Galerie</h3>
    
                <div class="ui-li-aside">{{ basic.float('temp_office', 'ff.office.heating.temperature', '°') }} // {{ basic.float('state_office', 'ff.office.heating.state', '%') }}</div>
            </a>
        </li>
    </ul>
    Die Alternative ist, der css Klasse die Zuordnung auf das <li> element zu nehmen und als allgemein gültige Klasse zu deklarieren.

    Code:
    .tilemenu {
        border-right: 0 none;
        border-top: 0 none;
        box-sizing: border-box;
        display: block;
        float: left;
        height: 70px;
        margin: 0;
        overflow: hidden;
        padding: 0 5px 5px 0;
        position: relative;
        width: 50%;
    }
    Dann sieht der HTML Code so aus:
    HTML-Code:
    <ul data-role="listview" data-dividertheme="c" >
    
         <li data-role="list-divider">Erdgeschoss</li>
        <li data-icon="false" class="tilemenu">
            <a href="index.php?page=room_children">
            <h1>Kinderzimmer</h1>
    
                <div class="ui-li-aside"> {{ basic.float('temp_children', 'ff.children.heating.temperature', '°') }} // {{ basic.float('state_children', 'ff.children.heating.state', '%') }}</div>
            </a>
        </li>
        <li data-icon="false" class="tilemenu">
            <a href="index.php?page=room_office">
            <h3>Galerie</h3>
    
                <div class="ui-li-aside">{{ basic.float('temp_office', 'ff.office.heating.temperature', '°') }} // {{ basic.float('state_office', 'ff.office.heating.state', '%') }}</div>
            </a>
        </li>
    </ul>
    
    Hoffe das hilft.

    Gruß
    Zuletzt geändert von lucipher; 06.11.2015, 15:28.

    Einen Kommentar schreiben:


  • BlackCrow
    antwortet
    Hallo zusammen,

    hat schom jemand eine Lösung für das Problem mit der Überschrift?

    Ich stehe auch gerade etwas auf dem Schlauch.

    Liebe Grüße

    Miguel

    Einen Kommentar schreiben:


  • lucipher
    antwortet
    gnarrf

    Ich schaue heute abend mal nach und poste den HTML Code.

    Einen Kommentar schreiben:


  • gnarrf
    antwortet
    Zitat von lucipher Beitrag anzeigen
    Hi,
    also kann ich so nicht nachvollziehen.

    Kann dir als Beispiel meine Ansicht zeigen:

    Bei mir ist alles gut. Kenn deinen Aufbau ja nicht. Vielleicht auch ein Fehler des HTML Gerüsts.


    Gruß
    Sascha
    Hallo Sascha,
    kannst du bitte mal die Zeile posten, in der du die Überschrift einbindest?
    Ich versuche mich auch gerade an einer zweispaltigen Darstellung und es völlig logisch, dass wenn ich über titlemenu in der css li.width auf 50% setze und wie folgt einbinde
    Code:
    <ul data-role="listview" data-dividertheme="c" class="tilemenu">
    dass dann auch die Überschrift, bestehend aus
    Code:
    <li data-role="list-divider">Aussen</li>
    ebenfalls nur über die halbe Breite angezeigt wird ... ich steh nur gerade auf dem Schlauch, wie ich für "list-divider" eine Ausnahme von "titlemenu" definieren kann. Gruß und Dank Jan

    Einen Kommentar schreiben:


  • felix86
    antwortet
    Okay, soweit ich verstehe müsste es mit @media(min-width) klappen. Leider aber noch nicht so, wie ich es gerne hätte. Wenn ich das Browserfenster schmaler ziehe, dann werden aus zwei Spalten eine und andersherum. Wenn ich aber von der Startseite zu einer Raum Seite wechsle finde ich keine Einstellung die mein Gewünschtes verhalten produziert, obwohl die verfügbare Breite offensichtlich unterschiedlich ist. Kann mir jemand auf die Sprünge helfen?

    Edit: Geht nicht, da sich width auf die Browserfläche und nicht auf die Fläche in dem div bezieht . . . Ich forsche mal weiter, bin aber für Tipps dankbar.
    Zuletzt geändert von felix86; 02.11.2015, 11:37.

    Einen Kommentar schreiben:

Lädt...
X