Ergebnis 1 bis 1 von 1

Thema: Widget erstellen - welche Technik am besten? Problem mit CSS-Grid

  1. #1
    HTML Newbie
    Registriert seit
    23.03.2019
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Widget erstellen - welche Technik am besten? Problem mit CSS-Grid

    Hallo zusammen,

    ich möchte mr ein kleines Widget für meine Haussteuerung bauen.

    Grundsätzlich habe ich das auch geschafft. Allerdings habe ich glaube ich die falschen Techniken eingesetzt. Damit das alles so richtig positioniert wird in meinem Widget habe ich ein CSS Grid eingesetzt.

    Jetzt habe ich aber keine Ahnung, wie ich da die Größe am besten an verschiedene Geräte anpasse. Das Widget soll immer das gleiche bleiben, nur die große soll sich "relativ" zum Platz ändern.

    Könnt Ihr als Profis da mal drauf schauen und mir tips geben?

    HTML-Code:
    <!DOCTYPE html><style>  .inline-svg-icon {    display: inline-block;    width: 50px;    height: 50px;    margin-right: 30px;  }
      .container {    display: grid;    width: 30em;    height: 10em;    grid-template-areas: "header header header header header header" "icon1 degree-0 grad tendenz leer leer" "icon1 degree-0 nachkomma tendenz icon_temp temp" "icon1 degree-0 nachkomma tendenz icon_feucht feucht" "footer footer footer footer footer footer";    grid-template-columns: 1fr 0.1fr 0.1fr 1fr 1fr 1fr;    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;    border-radius: 10px;    background-color: #212124;    font-family: "Arial";
      }
      .container>div {    border: 1px dashed #888;  }
      .header {    grid-area: header;    color: #E78023;    font-size: 150%;    align-self: center;    margin-left: 3%  }
      .icon1 {    grid-area: icon1;    align-self: end;    margin-bottom: 0.5em;  }
      .degree-0 {    grid-area: degree-0;    font-size: 500%;    text-align: left;    color: white;    align-self: end;
    
      }
      .grad {    grid-area: grad;    font-size: 200%;    align-self: end;    vertical-align: sub;    color: #667068;
    
      }
      .tendenz {    grid-area: tendenz;    text-align: center;    align-self: end;
    
      }
      .leer {    grid-area: leer;  }
      .nachkomma {    grid-area: nachkomma;    font-size: 120%;    align-self: end;    vertical-align: sub;    color: #667068;    margin-bottom: 0.5em;
    
      }
      .icon_temp {    grid-area: icon_temp;    align-self: end;
      }
      .temp {    grid-area: temp;    color: white;
      }
      .icon_feucht {    grid-area: icon_feucht;    align-self: end;  }
      .feucht {    grid-area: feucht;    color: white;
      }
      .footer {    grid-area: footer;
      }
      svg {
    
        stroke: #E78023;    fill: #E78023;    stroke-width: 1px;  }
      .color_grey {
    
        stroke: #667068;    fill: #667068;    stroke-width: 1px;  }
      .color_green {
    
        stroke: #51F338;    fill: #51F338;    stroke-width: 2px;  }</style><html>
    <body>
      <div class="container">    <div class="header">Aussentemperatur</div>    <div class="icon1">      <svg viewBox="0 0 48 48">  <use xlink:href="http://192.168.178.116:3777/user/html/squidink.svg#thermometer-3"></use></svg>
        </div>
        <div class="degree-0">24</div>    <div class="grad">&deg;C</div>    <div class="tendenz">      <svg class="color_green" viewBox="0 0 48 48" width="40%" height="40%">        <use xlink:href="http://192.168.178.116:3777/user/html/squidink.svg#top-arrow-2"></use>      </svg>
        </div>    <div class="leer"></div>    <div class="nachkomma">,1</div>    <div class="icon_temp">      <svg class="color_grey" viewBox="0 0 48 48" width="40%" height="40%">  <use xlink:href="http://192.168.178.116:3777/user/html/squidink.svg#thermometer-3"></use>      </svg>
        </div>
        <div class="temp">temp</div>    <div class="icon_feucht">      <svg class="color_grey" viewBox="0 0 48 48" width="40%" height="40%">        <use xlink:href="http://192.168.178.116:3777/user/html/squidink.svg#drop"></use>      </svg>    </div>    <div class="feucht">feucht</div>    <div class="footer">footer</div>  </div>
    Viele Grüße
    Dominic
    Geändert von Communicate (23.03.2019 um 08:03 Uhr)

Ähnliche Themen

  1. Fixed Widget Problem
    Von Kenblu14 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 25.09.2017, 17:21
  2. Antworten: 3
    Letzter Beitrag: 02.01.2016, 15:49
  3. Welche Technik um Content darzustellen?
    Von kgreen im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 06.08.2010, 19:52
  4. Welche Bearbeitungsprogramme sind die besten?
    Von Cari147 im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 26.05.2007, 21:30
  5. Welche Tauschbörse ist eigentlich am besten ???
    Von User im Forum Computer - Internet Forum
    Antworten: 7
    Letzter Beitrag: 11.05.2007, 17:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •