zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden DIV lässt sich nicht inline positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.10.2017, 08:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.10.2017, 15:01
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Wir können nicht sehen welche Stile die Klassen mitbringen, standardmäßig sind sowohl span als auch svg Inline-Elemente.

Code:
style="inline"
gibt es nicht, du meinst entweder display: inline; oder display: inline-block;.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.10.2017, 15:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard

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;
	}
Mit Zitat antworten
  #4 (permalink)  
Alt 21.10.2017, 15:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard

... 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>
Ergebnis:
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?
Mit Zitat antworten
  #5 (permalink)  
Alt 22.10.2017, 11:51
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 22.10.2017, 21:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard

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>
Hast Du zufällig noch einen Tip für mich? Ich bekomme es einfach nicht hin...
Mit Zitat antworten
  #7 (permalink)  
Alt 23.10.2017, 07:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.11.2015
Beiträge: 14
Communicate befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #8 (permalink)  
Alt 25.10.2017, 14:00
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:16 Uhr.