Hallo,
habe eine grundsätzliche Frage zu Icons auf dem Floorplan.
Nach welcher Gesetzmäßigkeit wird bestimmt ob ein Icon über oder unter einem anderen Icon liegt?
Ich weiß das ich das Verhalten mit "A_Button_1" und "B_Text_1" oder mit Index in der CSS beeinflussen kann (was ich z.Zt. nicht mache).
Aber wenn ich ein neu erzeugtes PNG-Icon im Editmodus über den Floorplan ziehe, ist es mal über den anderen Icons, mal drunter. Konnte bis jetzt kein System erkennen.
Hintergrund ist der, das ich meine Rollladen vor ein Fenster Icon legen will um den Status des Fensters sehen zu können aber auch den Rollladenstatus sehen und bedienen zu können.
Vielleicht hat ja einer ne andere Idee wie man den Rollladenstatus und den Fensterstatus möglichst in einem Icon platzsparend auf dem Floorplan darstellen kann.
Viel Grüße,
Rob
Hi,
ich hatte jetzt auch sehr viel Ärger damit.
Du kannst im CSS mit z-index arbeiten.
.devicestate {
z-index: 5;
position: relative;
display: block;
}
die Rollade ist ja steuerbar, also hast du einen "Link"
a {
display: inline-block;
position: relative;
z-index: 10;
padding: 0.2em;
margin: -0.2em;
}
so sollte das Icon immer über dem anderen liegen.
PS:
ein eigenes CSS für den Floorplan kannst du als Attribute hinzufügen:
Attributes
CssFiles pgm2/myhome.css
Gruß Michael
Ich habe es gerade getestet und festgestellt das es schwierig ist mit z-index zu arbeiten da die Elemente leider nicht auf der selben Herachi-ebene sind...
z-index funktioniert nur wenn die Elemente auf selber Ebene sind.
<div id=1> //<-- z-index 5
<a href....>test</a> //<-- z-index 10 hier ist 10 leider nicht höher als 5 weil Element tiefer...
</div>
<div id=2> //<-- z-index 5
text
</div>
was funktioniert ist das DIV Element mit Javascript anzuheben:
window.onload = testeMich;
function testeMich(){
// alert('Aufruf');
var tags = document.getElementsByTagName("div"),
tagsLength = tags.length,
index,
tag,
rx = /\d+/;
for (index = 0; index < tagsLength; index += 1) {
left = 0;
tag = tags[index];
if (tag.className === 'col2'){
if (tag.children.length > 0){
// alert(tag.children[0].tagName);
if (tag.children[0].tagName === 'A'){
tag.style.cssText = 'z-index: 10;';
}
}
}
}
}
nicht zu vergessen das css Skript:
.devicestate {
/* z-index: 5;*/
position: relative;
display: block;
text-align: -webkit-center !important;
text-align: -moz-center !important;
font-size: 12px;
}
.devicecommands {
z-index: 6;
position: relative;
display: block;
text-align: -webkit-center !important;
text-align: -moz-center !important;
}
.col2 {
z-index: 5;
position: relative;
display: block;
}
Hallo,
da klinke ich mich als Rooky nochmal ein:
Ich habe eine Readingsgroup mit hübschen Rahmen ringsherum. Leider sind dann die Commands alle "verdeckt" und man kann sie nicht mehr auslösen.
Kannst du vielleicht nochmal etwas genuaer erklären was du gemacht hast?
Viele Grüße
baselfreak
Man kann im Foorplan Objekt über Attribute sowohl eine Javascript Datei wie auch eine eigene CSS Datei quasi anhängen.
Das solltest du tun.
In die Javascript Datei gehört:
window.onload = testeMich;
function testeMich(){
// alert('Aufruf');
var tags = document.getElementsByTagName("div"),
tagsLength = tags.length,
index,
tag,
rx = /\d+/;
for (index = 0; index < tagsLength; index += 1) {
left = 0;
tag = tags[index];
if (tag.className === 'col2'){
if (tag.children.length > 0){
// alert(tag.children[0].tagName);
if (tag.children[0].tagName === 'A'){
tag.style.cssText = 'z-index: 10;';
}
}
}
}
}
In die CSS-Datei gehört:
.devicestate {
/* z-index: 5;*/
position: relative;
display: block;
text-align: -webkit-center !important;
text-align: -moz-center !important;
font-size: 12px;
}
.devicecommands {
z-index: 6;
position: relative;
display: block;
text-align: -webkit-center !important;
text-align: -moz-center !important;
}
.col2 {
z-index: 5;
position: relative;
display: block;
}
Der Z-Index ist ein HTML Element um die Herachi zu steuern, leider gilt das aber nur für Elemente auf der selben Herachiebene, weshalb du das Javascript nutzen musst um den Elementen nachträglich direkt den richtigen Z-Index zu geben.
Gruß Michael