|
|||
DIV lässt sich nicht inline positionieren
Hallo,
ich bin dabei, ein HTML-Widget für eine bestimmte Anwendung (habpanel im Kontext openhab) zu entwerfen. Bin dabei aber noch ein ziemlicher html neuling. FOlgendes Problem. Der nachfolgende Code produziert folgendes Ergebnis: HTML-Code:
<div class="leftborder"></div> <div class="leftborder-label">{{ngModel.name}}</div> <div class="text-left" style="margin-top: -6px; font-size: 25px;"> <span class="value" style="inline">{{itemState(config.item)}}°C <svg style="stroke: #26bf75;inline;"> <use xlink:href="/static/squidink.svg#thermometer-3"></use> </svg> </span> Bildschirmfoto 2017-10-21 um 07.51.28.png Das Thermometer sollte eigentlich in die gleiche Zeile wie das "°C", aber egal wie, ich bekomme es einfach nicht hin - Hat jemand von Euch eine Idee? Grüße Dominic |
Sponsored Links |
Sponsored Links |
|
|||
Hi,
sorry, hier noch die css dazu: HTML-Code:
/* Use with Orange Tree theme and switch-leftborder & slider-leftborder custom widgets from https://community.openhab.org/t/overall-skin-based-on-the-orange-tree-theme-with-custom-widgets-and-styles/31307 */ /* Override some variables */ :root { --primary-color: #ff9c27; --chart-stroke: #123; --chart-fill: #61635e; --chart-tooltip: #000; --widget-box-shadow: none; --box-bg: none; } /* Don't uppercase drawer menu entries */ .drawer ul.menu li { text-transform: none !important; } /* Graph overrides */ .x-axis g.tick:nth-child(4n+4), .x-axis g.tick:nth-child(4n+2) { display: none; } .y-axis g.tick:nth-child(2n+1), .y2-axis g.tick:nth-child(2n+1) { display: none; } .chart-legend { display: none; } .chart-content { height: calc(100% + 1.5em) !important; } .dot-series .dot { display: none; } .dot-series .dot:nth-child(45n) { display: inherit !important; stroke: var(--primary-color); fill: var(--primary-color); r: 1; } .area-series { fill: var(--chart-fill) !important; stroke: var(--chart-fill) !important; } .line-series { stroke: var(--chart-fill) !important; } /* Overrides for the label widget */ .labelwidget-content { margin: auto; width: 100%; text-align: left; font-size: 17px; font-weight: bold; } /* Overrides for the dummy widget */ .dummy-content small { font-size: 0.5em; vertical-align: super; } .dummy-content { text-align: left; } .dummy .icon.backdrop { right: 0; } .dummy-content span:not(.value) { font-size: 13px; } /* Styles for the custom items */ .leftborder { float: left; margin: 8px 10px 10px 0; height: 2.5em; width: 7px; border-left: #646361 solid 2px; border-top: #646361 solid 2px; border-bottom: #646361 solid 2px; } .leftborder-label { text-align: left; font-size: 13px; margin-bottom: 8px; } .switch-leftborder .btn-primary { background-color: var(--primary-color); border-color: black; border-radius: 10px; font-size: 0.9em; font-weight: bold; color: black; } .switch-leftborder .btn-primary:active { background-color: hsl(29, 100%, 50%); color: black; } .switch-leftborder .btn-default { background-color: #c2c7c3; border-color: black; border-radius: 10px; font-size: 0.9em; font-weight: bold; color: black; } /* RZSlider overrides for the custom widget */ .slider-leftborder .rzslider { margin-top: 5px; margin-left: 0; } .slider-leftborder .rzslider .rz-pointer { width: 16px; height: 16px; top: -6px; background-color: #c2c7c3; } .slider-leftborder .rzslider .rz-pointer:after { display: none; } /* Color picker overrides for the custom widget */ .colorpicker-leftborder .colorpicker-content-flex { margin-left: 5px; } .colorpicker-leftborder .c-ckolor__picker { width: 30px; height: 30px; border-radius: 15px; border: 1px solid #61635e; } /* Styles for the blinds widget */ .blinds-leftborder .blades { display: inline-block; } .blinds-leftborder .blades .blade { display: block; width: 80px; height: 5px; margin: 3px; background-color: #61635e; } .blinds-leftborder .blades .blade.down { display: block; width: 80px; height: 5px; margin: 3px; background-color: #c2c7c3; } .blinds-leftborder .rzslider { margin-top: 5px; margin-left: 0; } .blinds-leftborder .rzslider .rz-pointer { width: 16px; height: 16px; left: -6px !important; background-color: #c2c7c3; } .blinds-leftborder .rzslider .rz-pointer:after { display: none; } .switch-leftborder.playback .btn-default { background: transparent; border-color: #61635e; color: #61635e; } .icon svg, .section .control svg { stroke-width: 2px; } .icon.on svg { stroke: #26bf75; fill: #26bf75; } |
|
|||
... hier jetzt noch die korrigierte inline-Anweisungs-fassung:
HTML-Code:
<div class="leftborder"></div> <div class="leftborder-label">{{ngModel.name}}</div> <div class="text-left" style="margin-top: -6px; font-size: 25px;"> <span class="value" style="display: inline">{{itemState(config.item)}}°C</span> <div class="icon on" style="display: inline" ><svg width="100" height="50" viewbox="0 0 200 50"><use xlink:href="/static/squidink.svg#thermometer-3"></use></svg></div> </div> Bildschirmfoto 2017-10-21 um 14.40.00.png das sieht schon besser aus, so wirklich bündig, gleichgross und inline ist das aber noch nicht Habt ihr noch tips für mich? |
|
||||
Das div-Element mit der icon-Klasse ist genauso hoch wie dein span.value, allerdings gibst du dem SVG eine Höhe die (zumindest in meinem zusammenkopierten Fiddle) nicht der des Textes entspricht. Außerdem gibst du dem SVG eine Höhe und Breite die im Verhältnis nicht zur viewbox passt.
Kennst du die Developer-Tools deines Browsers? Damit kannst du dir sehr gut ansehen wie die Ausmaße und Positionen deiner Elemente gerendert werden. |
|
|||
Hallo inta,
vielen Dank für Deine Tips - das hilft schonmal ein bisschen weiter. Um ehrlich zusein, ich verzweifle im moment an der ganzen ausrichtungs-sache. Hier mal ein Bild, wie es aussehen sollte: Bildschirmfoto 2017-10-22 um 09.37.04.png Mein Code, der leider immer wieder irgendwie nicht zum Ergebnis führt: HTML-Code:
<div class="leftborder"></div> <div class="leftborder-label">Heizung</div> <div class="text-left" style="margin-top: -32px; font-size: 25px;"> <span class="value" style="height: 50px; display: inline-block">{{itemState(config.item)}}°C</span> <div id="svg-icon" style="display: inline;stroke: #26bf75;fill: #26bf75;stroke-width: 2px;" > <svg width="100" height="50" viewbox="-2 -30 150 50"><use xlink:href="/static/squidink.svg#thermometer-3"></use> </svg> </div> </div> |
|
|||
Hallo,
ich habe es jetzt beinahe hinbekommen. ABer ob das sauberer code ist ? Magst Du da auch noch einmal drüber schauen? HTML-Code:
<div class="leftborder"></div> <div class="leftborder-label">Heizung</div> <div class="text-left" style="margin-top: -32px; font-size: 25px;"> <span class="value" style="height: 50px; display: inline-block">{{itemState(config.item)}}°C</span> <div id="svg-icon" style="display: inline;stroke: #26bf75;fill: #26bf75;stroke-width: 2px;" > <svg width="40" height="50" viewbox="0 0 40 70" x="50%" y="0%" transform="translate(-10, 25) "> <use xlink:href="/static/squidink.svg#thermometer-3"></use> </svg> </div> </div> |
|
||||
Das sieht nicht sehr sauber aus. Das ganze hin- und hergezerre mit negativem Margin, transform usw. ist sicher nicht nötig. Was mir als erstes auffällt, deine Breite und Höhe des SVG entsprechen immer noch nicht der viewbox, daher kannst du dein Thermometer gar nicht sinnvoll auf die gleiche Höher wie den Text bekommen.
Hast du das SVG irgendwo online? Dann könnte ich dir das Fiddle zu einem sichtbaren Beispiel ausbauen. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |