zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Widget bauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.03.2019, 22:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard Widget bauen

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:
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 (24.03.2019 um 08:48 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.03.2019, 09:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.004
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du gibst deinem Bereich eine feste Höhe und eine feste Größe, wie soll sich das Widget dann anpassen?

Auch hast du viel zu viele Gridelemente verwendet. Ein leeres (class="leer") Gridelement brauchst du nie, man kann Grids auch über mehrere Columns verteilen.
Auch teilst du das icon und den Text auf zwei Bereiche auf, das ist auch total unnötig. Nachkommazahl gehört auch nicht von der eigentlichen Zahl getrennt. Aber nachdem das nur ein Widget ist und keinerlei ernsthaften HTML-Ansprüchen genügen muss kannst du das natürlich auch so lassen. Für dein ursprüngliches Problem reicht es bestimmt wenn du deine fixe Höhe und fixe Breite entfernst.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wetter widget dnr247 CSS 5 07.11.2014 12:42
flyout? widget? dr_colossos Javascript & Ajax 2 21.03.2012 10:18
CSS-Code wird in Widget angezeigt Logix (X)HTML 3 02.09.2011 22:01
Wie kann ich eine "zweizeilige" Navigation bauen? bogazci CSS 1 19.10.2010 12:53
XHTML webseite bauen aber wie? bin ein noob was XHTML angeht. Mysteryxxx (X)HTML 6 11.11.2006 23:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:12 Uhr.