| Autor | Zpráva | ||
|---|---|---|---|
| danhill Profil |
#1 · Zasláno: 23. 5. 2019, 18:39:45
Ahoj,
prosím o pomoc s šablonou pro řídící jednotku. Jde o to, že úplně nevím jak bude nejlepší se k celému problému postavit. Jestli to pojmout jako tabulku, či jinak. Nechám si poradit. Tuto "šablonu" posléze nakrmím nějakou grafikou a obrázky. Celé by to ale mělo postavené na co nejjednoduším css a html. Mám v plánu to potom generovat pomocí Mithrilu na základě vstupních dat z jsonu. Výsledek by měl pak vypadat nějak takto: <div class="outer">
<div class="inner">
<div class="position1"></div>
<div class="position2"></div>
<div class="position3"></div>
.
.
.
</div>
</div>
A celé by to mělo být zcela responzivní. Budu to zobrazovat na různých místech a v různých velikostech, kde někde bude velikost daná vyšším rámcem a jinde zase velikostí obrazovky atd. Základ vychází z toho, že ten hlavní vnější obdélník má určitý přesný poměr stran a ten by měl zůstat zachován při jakékoli zobrazené velikosti. Veškeré ostatní velikosti se mají odvíjet právě od toho hlavního obdélníku. (ten poměr vychází přibližně z Rack Unit Half3U - ale není nutné aby to bylo zcela přesné) Moje první pokusy skončily hned na začátku, kdy dokážu udělat ten hlavní obdélník a dál nevím :) Pomůžete mi prosím? .outer {
width: 100%;
border: 1px solid black;
}
.outer:before {
content: "";
display: block;
padding-top: 50%;
}
.inner {
?
}
.position1 {
?
}
.position2 {
?
}
.
.
.Do těch jednotlivých divů pak budu vkládat různé kontrolky, čísla a konektory atp. Ale jsem úplně na začátku a prostě nevím jak to přesně a správně uchopit abych se posléze nedostal do problémů. Výsledek by měl vypadat zhruba jako něco takového. Je mi jasné, že to bude drbačka, ale to nevadí. Hlavně abych ten základ měl správně. 
Předem moc děkuji za pomoc. |
||
| Tomášeek Profil |
danhill:
A .position má být co přesně? Každá jedna kontrolka? Jeden z těch 7 sloupců? Nebo co?
Aby se ti to nerozpadalo, tak bych to viděl na tabulku o 1 řádku a 7 sloupcích. V každém sloupci máš nadpis a ty kontrolky (zase, usnadnit si to můžeš tabulkou, která bude mít 4 sloupce (číslo kontrolky, kontrolka, kontrolka, číslo kontrolky) a X řádků. Bude to nějaká interní appka, sémantiku tady nějak dramaticky řešit nemusíš, spíše jde o praktičnost pro nějakou správu a intuitivnost řešení. |
||
| danhill Profil |
#3 · Zasláno: 23. 5. 2019, 19:20:51
Jo jo, přesně tak, position jsou jednotlivé sloupce ... ty detaily a kontrolky uvnitř zatím vůbec neřeším. Jen tu kostru, na které to postavit.
Myslíš jít prostě cestou html tabulky <table>, nebo v css použít vlastnost display: table Je pravda, že to zní hodně jednoduše a taky mě to napadlo :) Ale jak říkám, raději se poradím, než abych to udělal blbě a pak musel předělávat. |
||
| Tomášeek Profil |
#4 · Zasláno: 23. 5. 2019, 20:00:05
danhill:
Je nesmysl simulovat tabulku sadou divů. Takže tabulku. Je to čistě kvůli tomu, aby se ti udržel ten layout, ty sloupce pohromadě a poměrově se zmenšovaly. Na úplně nízkém rozlišení můžeš tu tabulku rozlámat a seřadit nějak jinak. Ono, když nad tím přemýšlím, tak ani sémantika tolik nepláče, jak jsem si prve myslel, tabulka bude vcelku OK. A to i ta vnořená (resp. ty vnořené, v každé buňce/sloupci bude jedna vnořená obsahující všechny kontrolky) na ty kontrolky uvnitř. |
||
| danhill Profil |
#5 · Zasláno: 23. 5. 2019, 21:00:02
Super. Vyzkousim to a uvidime jak to dopadne. Moc dekuji za konzultaci a radu.
|
||
|
Časová prodleva: 5 let
|
|||
0