Anonymní profil peter – Programujte.com

Mno, jenom jsem prepsal myslenku, co zminil gna. jako atribut jsem pouzil zrovna id, protoze ho nejspis pouzivas i pro dalsi css. Ale, jinak se pouziva spis dataSet.
 

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  …
</article>

const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"



// jakoze pro tvuj pripad by to bylo neco takoveho...

//    <button id="button-ZC1-AJC" class="btn btn-A1" data-scr="ZC1"></button>

document.querySelector(.butt).addEventListener('click', function() {
  changeScreen(this.data.scr);
});

Cili, do html kodu bys primo napsal, jaka scr se ma spustit a v js by na to byl jen ten jeden radek. A pokud bys potreboval odlisovat funkci, tak bych pouzival jen jiny atribut v data, misto src treba neco jineho. Pak bys mel teda 2 funkce i v js.
Ted to mas tak, ze kdys pridas tlacitko, musis pripsat i js a css kod, jinak nic nefunguje.
Ale, je videt, ze ses inspiroval tim BootsTrap. Taky to tak delam, ze si vykopiruji jen ty class, ktere pouzivam, kdyz se mi chce setrit misto :)

nevim, ja si vzdycky dam praci a vycistim to na horni menu a listu vpravo, kde mam ty tlacitka s nastroji a pod tim detaily k nastrojum a vrstvam a dalsim vecem, co pouzivam. Blbe je, ze to musim pri kazdem updatu menit a ted nevim, zda jde menit i velikost. Kazdopadne, je to dost otravne to pokazde premistovat, tak moc neupdatuji :)

Blbe je, ze to jsou ted image. Ja treba bezne kopiruji ze stranek texty a tady nic oznacit nejde, pac mi chce pouzit funkci pro drag-drop obrazku a ten presunout jinam :)Jinak pekny, vypada to ted vic prehledneji.

Jeste jsem videl nekde pouzivat takovou fintu, ale nesmis tam mit jquery...

$ = document.querySelector;
$$ = document.querySelectorAll;

//document.getElementById('button-E12').addEventListener('click', function() {
//  changeScreen('AJC');
//});

$('#button-E12').addEventListener('click', function() {
  changeScreen('AJC');
});

A jinak by slo asi priradit vsem tlacitkum podle class funkci stisknuti a uvnitr se podle if-case-pole rozhodnes, co se stane

//$('#button-E12').addEventListener('click', function() {
//  changeScreen('AJC');
//});

$(.butt).addEventListener('click', function() {
  buttClick(this);
});

function buttClick(el)
{
id= this.id.split('-')[1] // button id="button-ZC1" -> ZC1
case id of
  {
  'zc1' :  changeScreen('AJC'); break
  }
}


// nebo to zapsat primo do toho butonu, do class, value nebo tak
//  <button id="button-ZC1-AJC" class="btn btn-A1"></button>
id= this.id.split('-')[2] // button id="button-ZC1" -> 1: ZC1 2: AJC
changeScreen(id); 

Super, no, koukam na js a mas to cele generovane pres obrazky. Potes. Aspon jsi mohl pouzit svg nebo najit free-font, ktery je tomu podobny. Nebo jsi mohl pouzit jeden obrazek s abecedou a z nej pismenka vystrihovat.Nebo se na to vykasli a pouzij Arial, to je hodne dobry font.
 

tak, ve FF mam ted okno asi 100 px sirku a cele se to rozsypalo a prekryva :) To je cele asi dost blbe udelane. Ale to nevadi, to se vyresi.Podstatne je tam udelat spravne kontejnery, do kterych naplnis obsah.

- potrebujes nejaky hlavni div, ve kterem bude vsechno, ktery si nejak napolohojes na obrazovce
- pak tam vidim, ze to rozdelujes na 2 radky, dalsi div hlavicka, obsah
- pak tam mas ruzna tlacitka a navigace, vse soustredene v zahlavi.
- na tom videjku jsi mel jakesi plujici menu po prave strane. Tam je otazka, zda to muze prekryvat pole s obsahem nebo ne, jestli tam posetrit misto. Ale to lze resit pozdeji. V hlavicce bude hodne zalezet na tom, jak to mas udelane, aby se to nerozpadalo. Musi tam byt fakt vsechna ta tlacitka, neslo by nektere mene pouzivane menu skryt pod jedno tlacitko s rozbalenim? Vis, zase jako kopirovat vzhled uplne je dost nepraktcka zalezitost.

<div class="hlavni">
  <div class="hlavicka">
    <div class="nav1">...</div> - cokoliv chces polohovat a bude
 obsahovat skupinu prvku, tak musi byt uzavreno v divu
    <div class="nav2">...</div>
    <div class="nav3">...</div>
    <div class="nav4">...</div>
    <div class="text">...</div>
  </div>
  <div class="telo">
    <div class="content">
      ... tabulka ...
    </div>
  </div>
  <div class="paticka">
    <div class="nav5">...</div>
  </div>

</div>

pokud mas tu strukturu takhle nejak, ted na to koukat nejdu, tak neni problem nastavit

.hlavni {width... } /* tady musis mit width */
.hlavicka {position:relative; width:100%; height...}
.content {position:relative; width:100%; height...}
.paticka {position:relative; width:100%; height...}

/* a pak neni problem pres position absolute tam napozicovat jednotliva menicka */
/* sice se uplne nezbavis prekryvani, ale budes mit nad tim lepsi kontrolu */
.nav1 {position:absolute; width:300px; height...; top:0; left:0;}
.nav2 {position:absolute; width:300px; height...; top:0; right:0;}
.nav3 {position:absolute; width:300px; height...; top:0; left:300px;}
...

Takhle to dopadlo na tomhle notebooku, FF 130.0, https://ctrlv.cz/ttRk

Zkousel jsi navody na googlu?

Ja pouzivam Gimp a tam ten efekt urcite je. K predrazenemu komercnimu bych se nesnizil. Tam si to ani nemuzes naprogramovat podle sebe, kdyz to umis.

Ale, vyrobit to rucne asi neni tezke. V gimpu bych to delal tak, ze si jednu vrstvu vyteckuji (to se da i texturou). Pak to propojim s obrazkem tak, aby to obarvilo jen ty tecky a pridam bile pozadi.Muzu ti napsat postup pro Gimp, jestli bys neco podobne dokazal ve svem programu, jestli snim umis dobre.

Aha, no, problem je tedy kompatibilita prohlizecu. Zjisti si verze prohlizecu a typ.Ja bych sel do bootstrap,
oni si davaji prac s tim to odladit, ty pak nemusis.
 

To css mas teda napsane dost strasidelne. V tom se asi nechci pokouset zorientovat :)

.button-type-1, 
.button-type-2, 
.button-type-3, 
.button-type-4 
{
line-height: 0; vertical-align: middle; display: block;  margin: 0;border: none; padding: 0; position: absolute;
    background-position: center;background-repeat: no-repeat;background-size: contain;
}
.button-type-1 {left: 14.1vw; top:92.45vh;}
.button-type-2 {left: 23.1vw; top:92.45vh;}
.button-type-3 {left: 32.14vw; top:92.45vh;}
.button-type-4 {left: 41.14vw; top:92.45vh;}

toto je naprosto zbytecne, zkopiruj si to raci z bootstrap.css... 

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh; /* tady das body-height=100vh */ 
}
html, body {
    height: 100%;  /* a v zapeti to prepisujes jinou hodnotou :) */ 
    margin: 0;
}
/* spis bych ty 2 definice prehodil, pak by to mohlo davat smysl */

Navic, css bez html kodu je opet tak nejak k nicemu.

Muzu poradit validator html, css, ktery by mohl odhalit nektere problemy. ale nevim, zda ti to problem vyresi.

https://validator.w3.org/#validate_by_input
https://jigsaw.w3.org/css-validator/#…

(html kod ziskas z prohlizece, FF - klik do stranky, ctrl+a oznacit vse, prave tlacitko, zobrazit zdrojovy kod vyberu, a tam pak ctrl+A oznacit vse, a zkopirujes to do policka pro primy vstup html a kliknes validovat)