Temperatursteuerung

Layout der Heizungssteuerung

by Norbert Wilms

HTML

<div id="contentwrapper" class="contentwrapper">
  <div class="ctitel">
    <div> Temperatursteuerung </div>
    <div class="ctitelt" id="titelt">Aussentemperatur 1 C</div>
  </div>
  <div id="haus" class="haus">
    <div id='raum1' class='raum'>
      <div class='d1' id='raum1-d1'>
        <div class='label' id='raum1-l1'>Raum</div>
        <div class='labelt' id='raum1-l2'>Temperatur</div>
        <div id='raum1-s0' class='labels'></div>
      </div>
      <div class='d2' id='raum1-d2'>
        Regler
      </div>
      <div class='d3' id='raum1-d3'>
        <div class='links' id='raum1-li'>
          Schalter A/M
        </div>
        <div class='rechts' id='raum1-re'>
          Knopf
        </div>
      </div>
    </div>
    <div id='raum2' class='raum'>
      <div class='d1' id='raum2-d1'>
        <div class='label' id='raum2-l1'>Wohnzimmer</div>
        <div class='labelt' id='raum2-l2'>Temperatur 21 C</div>
        <div id='raum2-s0' class='labels'></div>
      </div>
      <div class='d2' id='raum2-d2'>
        <input data-role="slider" id='raum2-s1' min='5' max='22' step='1' data-highlight='true' data-popup-enabled='true' />
      </div>
      <div class='d3' id='raum2-d3'>
        <div class='links' id='raum2-li'>
          <select data-role="flipswitch">
            <option>Auto</option>
            <option>Man.</option>
          </select>
        </div>
        <div class='rechts' id='raum2-re'>
          <input type='button' id='raum2-b1' value='Wert setzen' />
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.contentwrapper {
      margin: 0px auto;
      position: relative;
      width: 320px;
      border: 2px solid #444444;
      align: center;
    }
    
    .haus {
      position: relative;
      color: white;
    }
    
    .raum {
      position: relative;
    }
    
    .ctitel {
      height: 50px;
      color: white;
      /*		width: 394px; */
      background-color: #666666;
      border: 3px solid #a80329;
      z-index: 2;
    }
    
    .ctitelt {
      position: absolute;
      top: 28px;
      left: 0px;
      width: 294px;
      height: 25px;
      text-align: right;
      z-index: 3;
    }
    
    .label {
      height: 25px;
      width: 264px;
      background-color: #666666;
      border: 3px solid #a80329;
      text-align: left;
      z-index: 2;
    }
    
    .labelt {
      position: absolute;
      top: 3px;
      left: 0px;
      width: 264px;
      height: 25px;
      text-align: right;
      z-index: 3;
    }
    
    .labels {
      position: absolute;
      top: 3px;
      left: 270px;
      width: 30px;
      height: 25px;
      z-index: 3;
    }
    
    .rechts {
      position: absolute;
      top: 0px;
      left: 180px;
    }
    
    .links {
      position: absolute;
      top: 0px;
      left: 3px;
    }
    
    .d1 {
      position: relative;
    }
    
    .d2 {
      position: relative;
      background-color: #cccccc;
    }
    
    .d3 {
      position: relative;
      background-color: #666666;
      height: 60px;
    }
    
    .links .ui-flipswitch {
      position: absolute;
      width: 150px;
      height: 43px;
      line-height: 43px;
    }
    
    .links .ui-flipswitch-active {
      padding-left: 0px;
    }
    
    .links .ui-flipswitch .ui-flipswitch-on,
    .links .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
      width: 48px;
      height: 41px;
      text-indent: -40px;
    }
    
    .links .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
      padding-top: 0px;
      margin-left:...