Problem z ustawianiem właściwości bottom i right w CSS

johnny_Be_good

2023-10-09T11:59:16+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Holandia
Postów: 853

0

Witam.
Pojawił się mały problem, utworzyłem kontener do przechowywania stylu w obiektach html, ale nie ustawia mi wartości bottom i right (ostatnie sekundy filmu)

CSS który się tworzy wygląda tak

Kopiuj

 

  body{display:flex;flex-direction:row;right:0vw;left:0vw;bottom:0vw;top:0vh;width:90vw;height:90vh;
  background-color:lightGrey;color:black;margin:0%;padding:0%;border:2px solid red;align-items:center;
  justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;}
  #hard_drive{display:flex;flex-direction:row;right:0vw;left:0vw;bottom:0vw;top:25vh;width:30vw;height:20vh;
  background-color:lightGrey;color:black;margin:0%;padding:0%;border:2px solid green;
  align-items:center;justify-content:center;font:30px italic arial,serif;cursor:pointer;position:absolute;}
  #control_panel{display:flex;flex-direction:row;right:0vw;left:10vw;bottom:0vw;top:50vh;width:40vw;height:20vh;
  background-color:black;color:white;margin:0%;padding:0%;border:1px solid blue;
  align-items:center;justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;}
  #src_editor{display:flex;flex-direction:row;right:0vw;left:60vw;bottom:0vw;top:0vh;width:30vw;height:10vh;
  background-color:lightGrey;color:black;margin:0%;padding:0%;border:1px solid red;
  align-items:center;justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;}
  #console_out{display:flex;flex-direction:row;right:0vw;left:0vw;bottom:0vw;top:0vh;width:0vw;
  height:0vh;background-color:lightGrey;color:black;margin:0%;padding:0%;
  border:1px solid red;align-items:center;justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;}
  #panel_settings{display:flex;flex-direction:row;right:0vw;left:0vw;bottom:0vw;top:0vh;width:0vw;height:0vh;
  background-color:lightGrey;color:black;margin:0%;padding:0%;border:1px solid red;
  align-items:center;justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;}

html ustawiam ręcznie

Kopiuj

<html style="display:inline;position:absolute;top:0vh;left:0vw;width:100vw;height:100vh;">

Mogę tam dać if(value == right) { pobierz liczbę i odjmij od 100 i ustaw taki left ale czy to o to chodzi? No i jak będzie w jednym % a w drugim px lub vw...

Cały kod strony poza biblioteką to

Kopiuj

<html style="display:inline;position:absolute;top:0vh;left:0vw;width:100vw;height:100vh;">
 <head>
  <style>

  </style>
 </head>
<body onKeyPress="if(event.shiftKey){let h = event.key;setStyleOfElement(h);}">

<script src="StyleSetter.js">
                             </script>

 <iframe id="hard_drive" srcdoc="hardDrive"></iframe>
 <iframe id="control_panel" srcdoc="controlPanel"></iframe>
 <iframe id="src_editor" srcdoc="srcEditor"></iframe>
 <iframe id="console_out" srcdoc="consoleOut"></iframe>
 <iframe id="panel_settings" srcdoc="settingsPanel"></iframe>


<script>

    
    let tmp = "display:flex;flex-direction:row;right:0vw;left:0vw;bottom:0vw;top:0vh;width:0vw;height:0vh;";
        tmp += "background-color:lightGrey;color:black;margin:0%;padding:0%;border:1px solid red;align-items:center;";
        tmp += "justify-content:center;font:20px italic arial,serif;cursor:pointer;position:absolute;";
    
                                                      window.top.body = document.body;
                                                      addStyle(window.top.body, "body", tmp, window.top);  
                                                      window.top.body.myStyle.write();    



    hardDrive = document.getElementById("hard_drive");
                                                      addStyle(hardDrive, "#hard_drive", tmp, window.top);  
                                                      hardDrive.myStyle.write();

    controlPanel = document.getElementById("control_panel");
    
                                                      addStyle(controlPanel, "#control_panel", tmp, window.top);  
                                                      controlPanel.myStyle.write();
    
    srcEditor = document.getElementById("src_editor");
        
                                                      addStyle(srcEditor, "#src_editor", tmp, window.top);  
                                                      srcEditor.myStyle.write();
    
    consoleOut = document.getElementById("console_out");
        
                                                      addStyle(consoleOut, "#console_out", tmp, window.top);  
                                                      consoleOut.myStyle.write();
    
    settingsPanel = document.getElementById("panel_settings");
    
                                                      addStyle(settingsPanel, "#panel_settings", tmp, window.top);  
                                                      settingsPanel.myStyle.write();




</script>

<script>

    function setStyleOfElement(k){
                                  if(k=='!'){hardDrive.myStyle.showSettingsWindow();}
                                  if(k=='@'){controlPanel.myStyle.showSettingsWindow();}
                                  if(k=='#'){srcEditor.myStyle.showSettingsWindow();}
                                  if(k=='$'){consoleOut.myStyle.showSettingsWindow();}
                                  if(k=='%'){settingsPanel.myStyle.showSettingsWindow();}
                                  if(k==')'){window.top.body.myStyle.showSettingsWindow();}

                                     }

</script>
</body>
</html>

Riddle

2023-10-09T15:28:03+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 10227

0

Ten Twój "edytor" na pewno ustawia {left,width,right} oraz {top,height,bottom}. A przecież nie możesz ustawić wszystkich trzech, musisz ustawić maksymalnie dwie.

Albo {top,height}, żeby ustawić wysokość od góry i wysokość (i wtedy bottom się dopasowuje do kontenera)
Albo {top,bottom}) i wtedy height jest auto
Albo {bottom, height} i wtedy kontener jest na dole i top jest automatyczny.

Jak ustawisz wszystkie trzy, to przeglądarka spriorytetyzuje top i height. Analogicznie jest z left,width,right.

johnny_Be_good

2023-10-09T15:32:41+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Holandia
Postów: 853

0

@Riddle: ale chyba aktywny jest ostatni w deklaracji.

Riddle

2023-10-09T15:33:49+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 10227

0

johnny_Be_good napisał(a):

@Riddle: ale chyba aktywny jest ostatni w deklaracji.

Nie ma czegoś takiego jak "aktywny". CSS to deklaratywny język, kolejność styli nie ma znaczenia.

Przepisz swój edytor tak żeby ustawiał tylko potrzebne argumenty, np tylko {width}, albo tylko {left,width} albo tylko {left,right} albo tylko {right,width}. Napisałeś sobie głupi edytor który zawsze ustala wszystko - czyli tak na prawdę jest w niezgodzie z całym CSS, i teraz to próbujesz obejść.

Edytuj Twój edytor tak, że jeśli user nie wprowadzi żadnych wartości w pole, to po prostu nie dodawaj go do wynikowego CSS. Skoro Twój framework jest taki super, to nie powinieneś mieć z tym problemu.

johnny_Be_good

2023-10-09T15:34:22+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Holandia
Postów: 853

0

Masz rację, usunąłem i jest ok. thx To nie jest mój framework, to 5 funkcji. Na szybko dodałem ten sam styl do wszystkich obiektów, żeby przetestować czy wygeneruje CSS i czy będzie na nim operował.

"Edytuj Twój edytor tak, że jeśli user nie wprowadzi żadnych wartości w pole, to po prostu nie dodawaj go"

Ale on tak działa, zamienia string na obiekt dopiero podczas jego ładowania. Tutaj dałem to samo dlatego tak wyszło.
No to jesteśmy w domu xD będzie szał! xD

johnny_Be_good

2023-11-21T11:33:19+01:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Holandia
Postów: 853

0

A to ciekawe, że jak w stylu normalnie zapisane

Kopiuj

<html style="border:1px solid yellow;"><head>
<style>
iframe{position:absolute;top:0%;left:0%;border:2px solid red;}
</style></head>
<body style="border:1px solid blue;">

To blokuje styl inline wstawiony w atrybucie np. right:0%; już nie zadziała.