ugrás a tartalomhoz

CSS

mind1 valami név · 2021. Már. 21. (V), 18.35
Nem tudom, érdemes minden ilyen apró hülyeségemnek új témát nyitni?

Kitennék egy oldalra, nagyjából táblázatszerűen három mezőt:

Timestamp | küldő host neve
Üzenet

A Timestamp fix szélességű lenne, a hostnak rögtön mellette kellene kezdődnie és a sor maradékát kitölteni, az Üzenet pedig az alattuk lévő helyen kellene, hogy megjelenjen, dinamikusan méreteződve.

    .timestamp { grid-area: a; background-color: #EEEEFF; width: 300px; }
    .host { grid-area: b; background-color: #EEEEFF; }
    .message { grid-area: c; background-color: #EEEEFF; }
    .container {
        display:grid;
        grid:
            'a b b b b'
            'c c c c c';
        grid-gap: 2px;
        padding: 8px;
        background-color: #AACCFF;
        border-style: solid;
        border-width: 1px;
    }
És ezt használnám minden egyes sor formázására:

<div class="container">
  <div class="timestamp">timestamp értéke</div>
  <div class="host">küldő host</div>
  <div class="message">a teljes üzenet</div>
</div>
És ez ismétlődne, ahány üzenetet meg akarok jeleníteni.
Majdnem jó, csak a host neve és a timestamp közt egy jókora üres terület marad, de még csak nem is egyforma, mintha a host értékének hosszától függene, de ez sem egyértelmű.
Én meg azt szeretném, ha csak pár pixel lenne köztük.

update: valamit csúnyán elnézhetek, mert a demók amiket találtam, látszólag ugyanazt csinálják, amit én elvárnék (mozilla oldalán, meg talán a w3school-nál), de a sajátomhoz igazítani nem sikerült.

update2: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid3 - ez volt az egyik, ami működik.
‹ Angular, React és tsaik(lusta vagyok) Javascript (egy topic-ban) ›
 ■
1

Annyit találtam, hogy...

mind1 valami név · 2021. Már. 21. (V), 19.40
Ha a .container-be felveszek egy plusz paramétert:
grid-template-columns: 300px auto auto;
akkor legalább a balra igazítás megvan. De nem tölti ki a teljes sort...
Igaz, ekkor a grid csak ennyi volt:

grid: 'a b'
      'c c'
Ha visszarakom az eredeti grid mintát ('a b b b b', 'c c c c c'), akkor látszólag jó. Ez vajon mitől lehet?
2

Az eredetiben az a probléma,

Endyl · 2021. Már. 21. (V), 21.25
Az eredetiben az a probléma, hogy egy cellaelemnek adtad meg a szélességét, ami kisebb volt, mint az oszlop szélessége, amiben helyet kapott, és ezért van a változó méretű üres hely. Ha az oszlopsablonnak adsz méretet, és a celláknak hagyod, hogy kitöltsék a fennálló helyet explicit méretezés helyett, akkor lesz az, amit szeretnél.

Ha azt szeretnéd, hogy valami a fennmaradó helyet kitöltse, akkor inkább fr egységeket használj.

A fenti dolgot én inkább így oldanám meg, egy containerrel, benne ismételve a három elemet (codepen):
.container {  
    display: grid; 
    grid-gap: 0.5em;
    grid-template-columns: 300px 1fr;
 
    padding: 1em;
    background-color: #AACCFF;  
    border-style: solid;  
    border-width: 1px;
}
.timestamp {
  background-color: #EEEEFF;
  grid-column-start: 1;
  grid-column-end: 2;
}  
.host {
  background-color: #EEEEFF;
  grid-column-start: 2;
  grid-column-end: 3;
}  
.message {
  background-color: #EEEEFF;
  grid-column-start: 1;
  grid-column-end: 3;
}
<div class="container">
  <div class="timestamp">timestamp értéke</div>
  <div class="host">küldő host</div>
  <div class="message">a teljes üzenet</div>
  <div class="timestamp">timestamp értéke</div>
  <div class="host">küldő host</div>
  <div class="message">a teljes üzenet</div>
</div>
Firefoxban van az elemvizsgáló részen egy grid gomb a grid elemek mellett, ami megmutatja, hogy mekkorák a sorok/oszlopok. Úgy jobban látható, hogy mi micsoda. (Gondolom a webkit alapú böngészőkben is van ilyesmi.)
3

Köszi, részben értem amit

mind1 valami név · 2021. Már. 21. (V), 22.46
Köszi, részben értem amit írsz, de a magyarázat a cakkos mezőszélekre nem teljesen tiszta.
Sajnos közben töröltem a tesztadatokat, a host helyén random hosszúságú stringek voltak 3-30 karakter hosszban. [s]Mégis mintha a harmadik mező hosszával függött volna össze, hogy a host bal széle hol kezdődik.[/s] A host mező hosszától függ a bal szél helye... Így némi logika legalább van benne, bár továbbra sem értem igazán, hogy miért lesz ilyen, ha 2x2 méretű a grid és miért jó a 3x2-vel

Megnézem firefox alól is amit mondtál, hátha úgy tisztul valamelyest...
update: ezt megnéztem, de nekem nem sokat mondott, ha jó helyen néztem. csak az eredeti adatok nincsenek meg, le kell újra gyártani valami random szemetet hozzá.
4

Kezd valami derengeni a régi

mind1 valami név · 2021. Már. 21. (V), 23.31
Kezd valami derengeni a régi Qt és Gtk programozási emlékekből. Ott is volt ilyen lehetőség, hogy gridbe pakolni az egyes elemeket (ezért is akadtam el most ennél) és ott volt egy olyan trükk, hogy ha auto méretezést akartam használni, azt célszerű volt (bizonyos esetekben??) úgy csinálni, hogy az első és utolsó oszlopot fix 1px szélességűnek jelöltem ki, ilyenkor biztos lehettem, hogy a sor ki lesz feszítve a konténer két széle közé, nem lesznek random hosszúságú sorok. Azt hiszem, itt is bevált:

grid-template-columns: 300px auto 1px;

A grid meg:
"a b .", "c c ."
(a "." az 1px)
Így jónak tűnik. :)
5

Hát ez nagyon hack, és

Endyl · 2021. Már. 22. (H), 08.22
Hát ez nagyon hack, és szükségtelen. Ahogy mondtam, auto helyett használj 1fr-t, és nem lesz szükség 1 pixeles oszlopra. Az auto nem egészen azt jelenti, amire gondolsz.

Cakkos mezőszélek: mivel a jelek szerint mindig új gridet hoztál létre három elemenként (ami szinte szükségtelenné teszi a gridet) és nem volt explicit mérete az oszlopoknak, ezért azok valamilyen módon a tartalom alapján lettek kiszámolva. Ha eltérő hosszúságú adatok voltak a host mezőben, akkor eltérő méret jött ki mindig az oszlopokra. A timestamp mező oszlopa valószínűleg mindig nagyobbra jött ki, mint a timetamp div-nek megadott 300px, ezért nem töltötte ki a teljes oszlopot. Tehát változó méretű host oszlop + kisebb mint az elérhető szélességű hely a timetampnek => cakkos szél.
6

Bocs, ez csak a régi

mind1 valami név · 2021. Már. 22. (H), 08.55
Bocs, ez csak a régi emlékekben való turkálás volt. :)
Kíváncsi voltam, működik-e.
Egyébként pont az a gond, hogy valószínűleg félreértem az auto méretezés működését... Ismételten... Qt alatt sokat szívtam vele, arra emlékszem.

Grid: gyakorlatilag két, több adat esetén több sorra tördelt sorok lennének egy-egy ilyen gridbe pakolva.

A cél valójában egy reszponzív, táblázatszerű megjelenítés lenne, ahol néhány adat a sor tetején jelenik meg, néhány meg alatta. De ahhoz még kell némi lelkierő, hogy a sok egyéb tutorial mellett még a CSS-ről szólókban is elmélyedjek.
Szóval ez csak kísérletezés.

Ui: a timestamp kb fele a 300px-nek. A mellé kirakott hostnév helyén volt random string, arra a firefox 188.xx pixel szélességet mutatott, ha jól emlékszem, következetesen, mindre, a megjelenített szélességtől függetlenül.
7

Ezek a hitbeli

mind1 valami név · 2021. Már. 22. (H), 14.02
Ezek a hitbeli dolgok...
Szóval én úgy gondoltam, hogy a

grid:
'a b b'
'c c c'
plusz az elemek mellé írt grid-area: a|b|c az egyenértékű az egyes elemekhez írt grid-column-start/*-end tulajdonságokkal.
Úgy tűnik, mégsem teljesen. :)

Most működik, hogy átírtam ezt is.

Ami nyitott kérdés számomra, hogy az miért gond, ha nem griden belül ismétlődnek a sorok, hanem maga a grid ismétlődik sokszor?
Én úgy gondolnám, hogy ha van benne fix méret, akkor így is-úgy is egyformán kellene megjelenniük, de a jelek szerint nem feltétlenül...

Egy dolgot viszont ebben a felállásban nem tudok megoldani: az egymás után megjelenő timestamp, host, message csoportok közé jó lett volna valami elválasztás, amit korábban maga a konténer megoldott a saját border/margin/padding/stb. paramétereivel. Itt viszont ezt a csoportot nem tudom egységként kezelni, csak úgy tudok hozzájuk ilyen paramétert rendelni, hogy az mindre igaz lesz.
8

Ha csak három elemed van,

Endyl · 2021. Már. 22. (H), 14.36
Ha csak három elemed van, mindegyik az adott területhez rendelve, akkor a területnevek és az oszlop kezdet/vég tulajdonságok megadásának funkcionálisan egyenértékűnek kellene lenniük. Tudsz esetleg példát mutatni arra, mikor nem?

Változó számú elemnél viszont az elhelyezést nehezen tudod megoldani területnevek alapján (pl. az elemek számától függően generálsz css-t...), mert ugyebár a területnevek ismétlését nem tudod megoldani css-ből.

Nem gond, ha a gridet ismétled, csak kicsit feleslegesnek tűnik egy gridet beizzítani két sornak, amikor pl. csak flexboxszal is megoldható. De persze a választás végsősoron a teljes layouttól, és az elérni kívánt reszponzivitástól függ. Ha meg elválasztókat akarsz rakni a csoportok közé, akkor tényleg célszerű külön szülőelemekbe pakolni őket.
9

Nem feltétlenül három, de

mind1 valami név · 2021. Már. 22. (H), 15.14
Nem feltétlenül három, de mindig fix számú adat jelenik meg majd, gyakorlatilag a table, tr, td lenne kiváltva ezzel.
A grid meg ahogy említettem, csak mint nosztalgikus emlék jött elő és elkezdtem próbálgatni.

Megpróbálom újra összerakni azt amin próbálgattam, mert azóta a teszt már ezerszer átírva.
Szerencsére nem túl bonyolult újra megcsinálni.
10

https://pypro.eu.pythonanywhe

mind1 valami név · 2021. Már. 22. (H), 17.07
https://pypro.eu.pythonanywhere.com/csstest

A GDPR nevében: vigyázz, ha megnyitod, megkapom a logban az IP címed! ;)

No, összeraktam újra.
A felső a start/end, az alsó blokk a grid-area: változat.
Mindkettő egyetlen konténerben van.
11

Ha csak területeket csinálsz,

Endyl · 2021. Már. 22. (H), 19.08
Ha csak területeket csinálsz, használd inkább a grid-template-areas tulajdonságot, mert a grid egy rövidített tulajdonság, és ha olyan tulajdonságok után használod, aminek már adtál értéket (pl. grid-template-columns) akkor kinullázhatod őket. Illetve nem kell vessző a grid-template-areas részei közé.

A másik probléma meg az, amit írtam (a grid-template-areas tulajdonság nem ismétlődik automatikusan; csak annyi nevezett területed lesz, amennyit leírtál, aztán ha ugyanarra a nevesített területre teszel több elemet, takarni fogják egymást). Csináltál négy nevesített területet, ebből háromba pakolsz elemeket. Van 5×3 elemed, amikből pl a timestamp2-k mindig ugyanabba az "a" területbe kerülnek egymás felé (a z tengelyen). Aztán az összes host2 és message2 ugyanígy a "b" és "c" mezőkbe egymás fölé.
12

Köszi, az tiszta volt, hogy

mind1 valami név · 2021. Már. 22. (H), 19.20
Köszi, az tiszta volt, hogy miért került egymásra minden (te kerted a demot :) ), csak az nem volt tiszta, hogy a te változatoddal miért tud működni. Bennem a grid eleve úgy élt, hogy az egy fix cellaszámú mátrix.

Mondjuk az se világos, hogy a gridbe pakolt elemeknél miért nem működnek pl a border-* attribútumok.
Legalábbis a border-width, birder-bottom-... mintha ott se lett volna.

Az is izgalmas egyébként, hogy a böngésző pluginek, meg talán a Jinja2 template kezelő, miket tudnak művelni... Egy darab js nincs az oldalon, a firefox debugger (f12-re ami feljön) mégis js hibákra, meg ismeretlen nevű(értsd: olyan név, amit én sehol sem irtam le) css definíciók hibáira panaszkodik. :)
13

A css gridben annyi cella

Endyl · 2021. Már. 22. (H), 19.53
A css gridben annyi cella van, ahány helyre el tudja pakolni a grid gyerekeit. Amire hatással lehetsz css oldalról, az a sorok és oszlopok mérete. Ezekből viszont annyi lesz, amennyi szükséges a nem expliciten cellákba pakolt gyerekek elhelyezéséhez. Alapból a böngésző igyekszik úgy cellákba pakolni elemeket, hogy ne fedjék egymást. Az én példám azért működik, mert azt nem mondom meg, hogy melyik sorba kerüljenek az elemek, csak hogy melyik oszlopokban kell kezdődniük/végződniük. Így háromból az első két elemet be tudja rakni egy sorba, a harmadikat meg csak egy egészbe és így tovább.

A border tulajdonságoknak ugyanúgy kellene működniük.
14

Jogos: működik, csak a

mind1 valami név · 2021. Már. 22. (H), 21.02
Jogos: működik, csak a border-style-t kötelező megadni.
Valamiért úgy emlékeztem, elég a vastagságát megmondani, a solid a default.
15

Attól tartok, mégsem értem :(

mind1 valami név · 2021. Már. 26. (P), 09.07
Ha felébredtem, nekiugrok újra, de addig is pár kérdés:
- ha egy mátrixban akarok elhelyezni elemeket úgy, hogy az elemek nem feltétlenül egyetlen cellát foglalnak el, arra van más eszköz is, mint a grid? (https://gridbyexample.com/examples/code/example5.html - valami ilyesmi elrendezése gondolok) - nem részleteiben érdekel, csak hogy mit nézzek a tutorialban, ha van más is amivel ez elérhető.
- az normális, ha egy <div>-be teszek egy <form>-ot, azon belülre mindenféle elemeket és ezek az elemek a külső div-hez definiált grid-area-ra hivatkoznak, akkor az olyan, mintha a grid nem is létezne? Ugyanis ha a div a formon belülre került, akkor többé-kevésbé működni látszott.

... A tobbi nem jut eszembe, pedig este még volt pár hasonló...:(
16

Van jó pár eszköz rá, de 2D-s

Endyl · 2021. Már. 26. (P), 10.42
Van jó pár eszköz rá, de 2D-s elrendezésre a grid a legrobosztusabb megoldás. Persze meg lehet csinálni a linkelt elrendezést absolute/fixed pozízionálással, "prezentációs" táblázattal (<table role="presentation"></table>), float-okkal és flexbox-szal is.

A grid nem úgy működik, mint a pozícionálás, hogy pl. egy abszolút pozízionált elem "kiugrik" a legközelebbi pozícionált szülőhöz. Egy grid alapból csak a közvetlen leszármazottaira van hatással. Létezik a subgrid, de az sem emeli ki a befoglaló cellából az elemeket, csak elérhetővé teszi a szülő oszlop/sorsávjait egy több oszlopot/sort elfoglaló cellán belül (de csak azokat, amelyikekkel átfedésben van).
17

Lekaparom a tapétát, de

mind1 valami név · 2021. Már. 27. (Szo), 09.36
Lekaparom a tapétát, de komolyan :D
Tegnap félretettem a működő template-et és nekiálltam nulláról újra...
Fél napba telt, mire leesett, hogy javarészt azért szar az egész, mert a "kontèner" és a benne elhelyezendő elemek közt ott a form tag...
Utána jött, hogy az input tagekhez tartozó labelek keveredtek össze és a méretezésük sem olyan volt, mint vártam és... Hát a del gomb még várat magára, de ment a gép a sarokba, csendes pihenőre. :D
(Mentségemre: python flask + mongodb tanulmányozása az elsődleges, nem akartam mèg ebbe is belemászni nyakig)

Elhanyagolható apróság, hogy a grid-template-areas végéről következetesen lehagyom az s-t és csodálkozom, hogy mi van...
18

Ez még csak nem is grid és...

mind1 valami név · 2021. Már. 28. (V), 17.36

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body { background: #cccccc; }
        .headcontainer {
            margin:     0 0 0 0;
            position:   fixed;
            width:      100%;
            min-height: 80px;
            background: #DDDDFF;
        }
     </style>
</head>
<body>
<div class="headcontainer">
    <div class="pagehead">Learning to Flask :)</div>
</div>
</body>
</html>
Szeretném, ha a "headcontainer" egy fix fejléc lenne a lapon, betakarva a saját területét. Ehelyett a baloldalon és fölötte van egy pár pixeles rés.
Emlékszem, hogy a különböző elemeknek vannak default css paraméterei, amik akár ezt is okozhatják, de ezt most akkor sem értem.
Mitől van csak a baloldalon és fölötte "lyuk" jobb szélen és alatta miért nincs?

O.K., egy top:0; left:0; megoldja a gondot, csak a miértje nem igazán érthető számomra.
Mi abban a poén, hogy ha egy ilyen fixed elemet kirakok elsőként, akkor kap egy "átlátszó" félkeretet?
19

tipp: body padding

Arnold Layne · 2021. Már. 28. (V), 18.34
Tippre azt mondanám, hogy az a <body> padding-je.
20

O.K., csak a logikát keresem

mind1 valami név · 2021. Már. 28. (V), 18.54
O.K., csak a logikát keresem benne ;)
(Meg úgy általában a CSS működésében :D)
21

És továbbra sem jó

mind1 valami név · 2021. Már. 29. (H), 12.22
Rátettem egy keretet, de a keret jobb széle hiányzik.
Ez most olyan WTF állapot... 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body { background: #cccccc; }
        .headcontainer {
            position:   fixed;
            top:        0;
            left:       0;
            width:      100%;
            min-height: 80px;
            background: #DDDDFF;
            border-style: double;
            border-width: 10px;
        }
     </style>
</head>
<body>
<div class="headcontainer">
    <div class="pagehead">Learning to Flask :)</div>
</div>
</body>
</html>
Update: O.K., tárgytalan. A width:100% helyett kell a right:0

De a width:100% miért cseszi el? Ezt akkor sem értem...
22

Van pár buktató

Endyl · 2021. Már. 29. (H), 12.53
Van pár buktató.

1. absolute/fixed pozícionált elemek alapértelmezetten a "szülő blokk" alapján kerülnek elhelyezésre. Tehát ha a befoglaló blokkoknak van margin-ja, border-je, padding-je, akkor azok mind odébbtolják az alapértelmezett top/left pozíciót. Tehát a top/left tulajdonság alapértelmezett értéke nem 0. (js-ből meg tudod nézni az offsetTop, offsetLeft értékét).

2. A width, border és padding kombinálásánál érdemes figyelni a box-sizing tulajdonságra is, mert az alapértelmezett értéke content-box. Ebben az esetben pl. a width: 100%; border-width: 5px; kombinációval nagyobb lesz az elem teljes szélessége, mint 100%. Nem véletlen, hogy a legtöbb reset része a *, *::before, *::after { box-sizing: border-box; } stílus.
23

Köszi! Valahogy nagyon nem

mind1 valami név · 2021. Már. 29. (H), 14.21
Köszi!
Valahogy nagyon nem tűnik logikusnak a működése :)
De megpróbálom megjegyezni.
24

fixed fejléc alatti elemek?

mind1 valami név · 2021. Már. 29. (H), 18.22
Ha egy fejlécet position:fixed-ként teszek ki a lapra, akkor van arra opció, hogy egy másik elemet (pl. div) automatikusan alatta kezdjek?
Vagy azt mindenképp nekem kell megmondani, hogy hol kezdődjön az alá kerülő tartalom?
25

Vagy fix magasságot állítasz

Endyl · 2021. Már. 29. (H), 19.37
Vagy fix magasságot állítasz be a fejlécnek (ami elég macerás reszponzivitás szempontjából), és ezt a magasságot beállítod valami margin/padding-nek, ami lejjebb tolja a többi tartalmat, vagy pedig megismerkedsz a position: sticky;-vel, és sokkal könnyebb lesz az életed.
26

Megint valamit kihagytam a

mind1 valami név · 2021. Már. 29. (H), 20.35
Megint valamit kihagytam a tutorialból?
Sticky-vel sem lett jó amikor próbáltam, de akkor újra előszedem, valamit elcseszhettem. (W3schools-ról jönnek az ötletek)

Azért kérnék némi segítséget, mert sticky-vel továbbra sem megy: ha sticky van fixed helyett, akkor a fejléc is scrollozódik a tartalommal.
Én meg azt szeretném, hogy ne mozduljon a lap tetejéről.
27

Itt egy példa

Endyl · 2021. Már. 29. (H), 21.41
Itt egy példa. Lehagytad a pozíciót (pl. top: 0;)?
28

Nem, szerintem a top:0

mind1 valami név · 2021. Már. 29. (H), 22.17
Nem, szerintem a top:0 megmaradt.
Egy tippem van: display vagy valami hasonló szemét. Most nincs előttem. De lehet, hogy visszakapcsolom a gépet, mert piszkálja a fantáziámat.
29

Csak bekapcsoltam a

mind1 valami név · 2021. Már. 29. (H), 22.51
Csak bekapcsoltam a gépem...
Egyetlen gond volt vele: a fejléc alá kerülő div kapott egy position:relative paramétert, emiatt az abban megjelenő szöveg scrollozásakor egyszerűen kitakarta a fejlécet.
Eltávolítva a position-t már jó.
Hogy ebből hogy tudom majd kihozni azt, amit valójában akarok... (egy lebegő doboz a sarokban )

ui: nehogy berakja valaki, hogy hogyan! :) Majd ha elakadok, úgyis jövök sírni... ;)
30

http://pypro.eu.pythonanywher

mind1 valami név · 2021. Már. 30. (K), 14.04
http://pypro.eu.pythonanywhere.com/static/csstest.html

A bal felső sarokban van egy X - ebből nyitnék egy menüt.
(:hover-rel)

--- innen csak a history kedvéért :) ----
[s]Ha a menüt tartalmazó div-ben viszonylag rövid a szöveg, akkor pont azt csinálja, amit vártam.
Viszont ha hosszabb a szöveg, akkor nem lefelé és jobbra nagyítja a dobozt a böngésző, hanem felfelé.
Miért?
Valamit megint nem veszek észre, de mit?[/s]
--- eddig ----


O.K., elnéztem, a position: relative volt az elsődleges ok.
Viszont nem értem a doksit... azt írja a relative esetére, hogy "The element is positioned according to the normal flow of the document, and then offset relative to itself based" - hogy kell érteni azt, hogy "relative to itself"?? Önmagához képest hogy lehet valami relatív? Ez valami olyan, mint a speciális relativitás elmélet? :))


ui: itt nem működik a [s] ?? :(((
31

relative

Endyl · 2021. Már. 30. (K), 15.01
Önmagához képest úgy lehet relatív, hogy kiszámolja, hogy pozícionálás nélkül hová kerülne, és attól a ponttól számolja a top, left, stb. eltolásokat.
32

köszi

mind1 valami név · 2021. Már. 30. (K), 17.59
Uff... köszi. Hát... azt hiszem, lemondok róla, hogy logikát keressek benne. :)
Biztosan van benne, csak ez nem az én műfajom.

ui: a működése az érthető, csak azt nem tartom logikusnak, hogy "önmagához képest relatív" :)
33

:hover-rel párbeszédablakot

mind1 valami név · 2021. Már. 30. (K), 18.02
:hover-rel párbeszédablakot nyitni, nagy marhaság?
Vagy csak szokás szerint én rontom el?
Van pár input mezőm, a böngésző megőrzi a beléjük írt szövegeket. Az a gond, hogy ha rákattintok egy ilyen mezőre, megjelenik a korábbi inputok listája, de amikor ebből a listából választanék, akkor az egész ablak becsukódik.
Feltételezem, ez nem linuxos specialitás, más rendszereken is ez az eredmény, szóval vagy hülyeség az ötlet (hogy nem js-ből nyitom) vagy valamit megint el...
34

:hover, meg minden

Arnold Layne · 2021. Már. 31. (Sze), 09.37
:hover-rel párbeszédablakot nyitni, nagy marhaság?

Szerintem igen. A :hover ugye csak akkor működik, ha felette van a kurzor. Ilyen esetben látatlanban inkább azt mondanám, hogy :focus. Bár igazából a pszeudoosztályokat feleslegesnek vélem, mert ezzel már a viselkedést befolyásoljuk, ami a JavaScript dolga volna.
35

Felraktam, hogy mit akartam

mind1 valami név · 2021. Már. 31. (Sze), 11.06
Felraktam, hogy mit akartam nagyjból: https://pypro.eu.pythonanywhere.com/static/csstest.html
A baloldalon van egy kis "piszok", abból most megnyílik egy menükezdemény. Ez a :focus-szal (nekem) nem akar működni.
Szóval a vége valószínűleg JS lesz, de python framework, mongodb, postgresql, html, css... ezek mellé most még egy js tutorial is, már kicsit sok(k) :)

De van más is, amit nem értek: ha a width: fix méret helyett auto-ra van állítva, akkor nem működik az animáció. Vajon miért? (doksiban lehet, hogy átugrottam azt a részt, ahol ez le van írva, hogy így működik)
36

A :focus (vagy még inkább a

Endyl · 2021. Már. 31. (Sze), 13.45
A :focus (vagy még inkább a :focus-within) arra jó, hogy pl. billentyűzetes navigáció esetén is megnyíljon/nyitva maradjon egy menü (azon túl persze, hogy mutassa, hogy mi van fókuszálva). Arra is gondolj, hogy pl. mobilon nem igazán van :hover. Szóval valami js-re mindenképp szükség lesz az ilyen állapotok kezeléséhez.

Auto értékhez általában nincs transition/animáció, mert a böngészőgyártók szerint macerás vele számolni a reflow miatt.
37

Köszi (de, van mobilon is

mind1 valami név · 2021. Már. 31. (Sze), 14.03
Köszi (de, van mobilon is :hover - bizonyos esetekben(???) - az elemen hosszan kell nyomni a kijelzőt :) - kipróbáltam, nekem műxik most is)

Sajnos lassanként kell valami felolvasó szoftver linuxra, mert látni már nem sokat látok a kijelzőn lévő szarokból... :(
(ennyire nem vagyok ízlésficamos, mint amennyire a linkelt lapkezdeményből látszana, csak már nem sokat látok az eredményből, szóval inkább le se...)
38

Inkább arra gondoltam, hogy

Endyl · 2021. Már. 31. (Sze), 16.29
Inkább arra gondoltam, hogy macerás a hover. Pl. a mintaoldalon eredeti méretben én mobilon nem bírom előhozni a "menüt", csak ha jól felnagyítom. Vagy ha interaktív elemen van a hover, akkor a hosszú nyomásra előjönne egy context menü is, amit be kell zárni előbb. Én se szívesen használom (néhány indokolt esetet leszámítva), meg (nyilván nem reprezentatív, de) másokat sem sokat látok ilyen módon hovert használni.
39

Két oszlopos dialog boxot

mind1 valami név · 2021. Ápr. 11. (V), 16.49
Két oszlopos dialog boxot szeretnék...
Valahogy úgy, hogy jobb oszlopban a <label ...>, balon az <input ...>
Ez önmagában megy, de cifráznám azzal, hogy a label és az input is változó szélességű legyen. Szövegek egy része max. húsz, mások negyven-ötven karakteresek, a numerikus mezők meg 2-3 számjegy szélességűek.

A label nem gond, valamit text-align: right; elintézi (bocs, fejből írom, most nincs előttem a működő css)
Viszont az inputok mindig egyforma szélességűek és kitöltik a teljes oszlopot.
A display:block és a display:flex egysorosra csinálja. A grid látszólag jó, csak az input lesz mind egyforma.
Valami float rémlik, de azzal se tudtam összehozni.
Tuti, hogy egy triviális dolgon siklok át, mint mindig. Már csináltam ilyet és jó volt, de nem találom, mit szúrok el. :(
(mint amikor a múltkor két napig kerestem, miért nem működik valami doksi szerint, mire észrevettem, hogy az egyik css tag végéről hiányzik a pontosvessző :D)
40

Működik, csak nem értem...

mind1 valami név · 2021. Ápr. 14. (Sze), 08.40

            .popup-form {   
                display:    grid;
                grid-template-columns: auto 1fr;
            }
            .popup-form label { 
                text-align:     right;
                margin:         4px;
            }
            .popup-form input {
                margin:         4px;
                margin-right:   auto;
            }
A fentiekhez tartozik egy form, benne néhány label-input párossal. Hogy korábban mi maradt ki, mit sikerült feleslegesen beletenni... nem tudom, de nagyon nem akart úgy alakulni, hogy a label-ek jobbra igazítva, az input mezők balra, változó szélességgel jelenjenek meg.
Amit most megtanultam, hogy a doboz aljára kirakott két gomb (input type="submit" és "reset") még igényel egy apróságot: style="grid-column: 1 / span 2; text-align: center; justify-content: center", így pont olyan lett, amilyennek elképzeltem.

Ja, meg még valamit: a CSS megalkotóit szívem szerint darabokra tépném, mint egy grillcsirkét :D (kissé átírt idézet az A Nagy Durranás-ból)
Lehet, hogy bennem van a hiba, de egyre logikátlanabbnak érzem az egész nyelvet.


Jav: a fentiben sikerült felcserélni a kétbalkezemet. Balon a label és jobbon az input. :)
41

Véleményt kérnék + segítséget a submit gombhoz

mind1 valami név · 2021. Ápr. 14. (Sze), 18.30
Erről szeretnék véleményt kérni.
A menü a bal felső sarokban lévő légypiszokból nyílik egyelőre, azt Endyl már elmondta, hogy nem túl szerencsés, majd bedobok helyette valami "hamburger" menüt.

A fölé vitt kurzorra nyílik meg a főmenü és csak a menü 1 pont működik.
Na az abból nyíló dialog "dizájnjáról", a hozzá tartozó html/css kódról szeretnék véleményt kérni, ha valakinek van kedve megnézni.
Van-e benne valami, ami nagyon nem jó, akár megjelenésében, akár a kódjában (a js-t hagyjuk, az csak arra kellett, hogy "múkoggy!" :) )

Amiről tudom, hogy nem túl szerencsés, az az, hogy nem igazán következetes, hogy hol, mire használok --változó-kat és mire fixen beírt konstansokat.

Illetve azt mivel lehetne megoldani, hogy amikor megjelenik ez a doboz, akkor a háttér elsötétedjen? Nekem csak a :hover működik, de az ugye most nem nyerő, illetve rakhatnék bele valami input mezőt csak azért, hogy elkapja a fókuszt, de az elég csúnya lenne...
42

Múkoggy :)

Pepita · 2021. Ápr. 15. (Cs), 09.20
A formnak jó lenne adni action url-t (html attribútum, hova küldje a submitot), érdemes még method-ot (post?) is megadni, valamint ha a SUBMIT gombnak nem csak a neve, hanem a type is submit, akkor mindjárt működni is fog js nélkül (persze ha külön oka van a js-nek, akkor nem annyira érdekes, de ez esetben is "szebb" elkapni a form submit eseményt az onclick attribútum helyett).

A .main-content:not(focus) láthatóan nem úgy műxik, mint szeretnéd, szerintem nem is a fókusszal kéne operálni, hanem az "ősibb" modaldialog megoldásokkal. Pl a html végére még odateszel egy fixed pozíciójú "takaró" div-et (minden koordinátája 0, vagyis teljes méretű), megfelelő háttérszínnel és valamennyi átlátszósággal (opacity). Ennek adsz egy z-indexet, ami nagyobb, mint a main-content -é, és kisebb, mint a menucontainer -é. Eggyütt jeleníted meg a modallal, szépen letakarja az "alsó" tartalmat, bármi is legyen ott, és mivel "felette" van a menü és a modal, azok rendesen látszanak.
Ennek van egy olyan előnye is, hogy míg ott van a "takaró", addig az alatta lévő tartalom nem kattintható - másolható - stb.
Természetesen figyelni kell, hogy amikor bezárod a modal-t, akkor tüntesd el a "Takaró"-t is.

Így hirtelen én ennyit láttam, js-t nem néztem.
43

Köszi.A submitot még

mind1 valami név · 2021. Ápr. 15. (Cs), 09.42
Köszi.
A submitot még emésztem.
Az elsődleges gondom az volt vele, hogy ha a form action ki volt töltve, meg még volt valami attribútuma, akkor a firefox berakta az url-be és hacsak nincs totálisan el...va a szerver oldali kód, akkor a redirect ellenére megőrizte az átírt címet.
A focus csak benne felejtődött, az csak akkor működik, ha az adott elem elkaphatja a fókuszt, ergo input mezőnek kell lennie, ugye? (Próbáltam readonly textarea-t, de azzal sem volt jó, szoval úgy tűnik, írható mező kellene hozzá, de az már gányolás)
45

tabindex

Arnold Layne · 2021. Ápr. 15. (Cs), 10.47
A focus csak benne felejtődött, az csak akkor működik, ha az adott elem elkaphatja a fókuszt, ergo input mezőnek kell lennie, ugye?

Nem feltétlenül. Megkopott frontendes emlékeim szerint ha bármilyen elemen van tabindex, akkor az is elkaphatja a fókuszt. Bár igazából a DTD-t kéne megnézni, hogy mire lehet tenni a tabindex attribútumot, de szerintem a HTML5 már megenged annyi disznóságot, hogy menjen ez is.
46

Jogos

mind1 valami név · 2021. Ápr. 15. (Cs), 11.31
Jogos
44

dialog

Endyl · 2021. Ápr. 15. (Cs), 10.07
Érdemes utánanézni a dialog elemnek is.

Ami a takarást illeti (ha nem működik a dialog, ahol van ::backdrop), nem feltétlenül kell külön elem sem hozzá. Ha még nincsenek használatban, akkor a html::before, html::after pszeudo elemek is jók erre.

Ha már szóba jöttek a gombok, akkor a legjobb testreszabhatóságot a button elemek biztosítják. Például a value-tól független, akár többsoros vagy képes tartalom.

A margin használat sem feltétlenül az én szájízem szerint való. Ha nem akarod zebracsíkozni a gridet, akkor szerintem jobban jársz a grid-gappel, mint az elemekre aggatott margókkal. A popup fejlécének is feleslegesen van alsó margója, mert összeolvad a form felső margójával.

Ha egy tárolón belül azt szeretnéd, hogy az egyes elemek között szünet legyen, akkor a legegyszerűbb megoldás valami ilyesmi:
.stack > * + * {
  margin-top: 1.2rem;
}
Így nem kell az egyes elemek margóit babrálni, minden elem előtt automatikusan egységes szünet lesz. Persze ha valahol kisebb/nagyobb margó kell, még mindig egyszerűen felül tudod írni. De kb. ez a cascade lényege is: az általános szabályokat felülírni a kivételes helyeken.
47

Megint tanultam valami

mind1 valami név · 2021. Ápr. 15. (Cs), 11.38
Megint tanultam valami újat.
Láttam a doksiban, de átléptem, hogy az csak üzenetküldés... Most esett le, hogy a js alert-re emlékeztem.

Margin: jogos, én még ott tartok, hogy LEGOkockának nézem az egyes elemeket. Vagy nem tudom. Így belegondolva: O.K., grid esetében ott a grid-gap, de ha váltok és flex vagy sima block megjelenítést próbálok? (Két napig a flext próbáltam megerőszakolni, egyes divekbe pakolt label-inputokkal, de valamiért nem volt nyerő. Talán a pozicionálás soron belül...
48

Ha 2D elrendezés, akkor grid,

Endyl · 2021. Ápr. 15. (Cs), 13.49
Ha 2D elrendezés, akkor grid, ott meg van grid-gap. Bár ez a tulajdonság igazából szimplán gap a kellően modern böngészőkben. Azt meg lehet használni flexboxnál is.

Ha nem elérhető a gap, akkor is érdemes a css-ben úgy megírni a szabályt, hogy a szülőtől függően legyen megadva a margó mérete. Pl.:
.a-gap-nem-tamogatott > * {
  margin: 0.2rem;
}
Ez ugye azért jó, mert így látszik, hogy a margó nem tartozik inherensen az elemhez, hanem annak függvénye, hogy milyen layout környezetben van. Így teheted akárhova az elemeket, a szükséges margókat mindig a környezettől kapják és nem kell mindenhol felülírni az elemnél beállított margót. Ha a környezettől függetlenül akarod eltolni az elem tartalmát a szélétől, akkor az meg padding, és az tényleg az elemhez tartozik.
49

Gombbal nyitható form/div

mind1 valami név · 2021. Ápr. 17. (Szo), 22.55
Újra megpróbálom leírni, némileg tisztult a kép:
Szóval az alapötlet, hogy szeretnék egy paraméterezhető nézegető/kereső lapot, amin a fejléc és a listázott adatok közt alaphelyzetben csak vékony, fekete csík látszik, a közepén egy a csíkhoz alulról illeszkedő pöcökkel.
A "pöcök" lehetne egy button, amiben egy ↕ karakter lenne.
Amikor rákattintok erre a pöcökre, akkor kinyílik a paramétereket tartalmazó doboz, úgy, hogy a button a border alsó széléhez illeszkedve ott marad megjelenítve.

Vannak vele bajok... pl. hogy tudnám a border alsó feléhez illeszteni a buttont úgy, hogy min. 50, de inkább 100%-ban alatta jelenjen meg, mégis ahhoz az elemhez tartozzon, amihez a border?
Egy tippem van: Egy 100%-osan átlátszó konténer, amiben két elem van, az első a keretet tartalmazó form/div, a második a buttonom...

Ui: bocs, ezt most megint felfüggesztem... Így leírva nem tűnik olyan bonyolultnak, mint ahogy az lelki szemeim előtt megjelent. Lehet, hogy ennyi az egész? És egy onclickben nyitom/zárom a pöcök dobozát...
Egyedül az tűnik gusztustalannak, hogy ez a doboz is egy konténer kell, hogy legyen, az nem fog menni, hogy oda közvetlenül a form kerüljön. (???)
50

Hát ráment a napom és nem is

mind1 valami név · 2021. Ápr. 18. (V), 00.32
Hát ráment a napom és nem is lett olyan szép, mint ahogy szeretném, de működik:
https://pypro.eu.pythonanywhere.com/static/coll.html

Ha érdekel valakit, hogy mire gondoltam :)
51

Az accessibility

Endyl · 2021. Ápr. 18. (V), 15.49
Az accessibility vonatkozásaiban most nem vagyok biztos, de ezt még js nélkül is meg lehet csinálni:
.checkbox ~ details {
  /* elrejtés */
}
.checkbox:checked ~ .details {
  /* mutatás */
}
Vagy még rövidebben, csak:
.checkbox:not(:checked) ~ details {
  /* elrejtés */
}
52

Általában szoktam érteni amit

mind1 valami név · 2021. Ápr. 18. (V), 17.02
Általában szoktam érteni amit leírsz, ha nem is mindig azonnal, de ez most kivétel...
Milyen .checkbox?

Az nem egy olyan kipipált izé?

Ui: sajnos amikor a fenti tesztet megpróbáltam "élesben" implementálni, kicsit nagyon más lett az eredménye.
Pl a button-ra (legalábbis osztályként) nem tudok ráhúzni semmilyen tulajdonságot... És már kezd kifolyni a szemem. :(
53

Példa

Endyl · 2021. Ápr. 18. (V), 18.31
Így gondoltam.
54

Köszi, akkor egyre

mind1 valami név · 2021. Ápr. 18. (V), 20.43
Köszi, akkor egyre gondoltunk, csak nekem a checkbox, az hagyományos checkbox, nem gondoltam ilyen verzióra.

update: nem véletlenül panaszolom, hogy nem látok... A mai napból másfél órám ment el (nettóban!) arra, hogy kinyomozzam, miért nem működik egy button tagre írt css kód (konkrétan a border-width: 0 1px 3px 1px;) és ötször átnézve mind a css-t, mind a html-t, mindezt PyCharm alatt, ahol azért van némi syntax highlighting, és nem találtam meg...
Az előbb tűnt fel, hogy mintha egy idézőjel nem pont ott lenne, ahol szeretném... <button class="buttonclass"> helyett <button class="buttonclass>" szerepelt. De látszólag minden működött, csak a css nem... :D
55

sticky button? (avagy joggal utálom a google-t?)

mind1 valami név · 2021. Ápr. 19. (H), 12.01
Azon filózok, hogy amit csináltál, az látvány tekintetében olyan, mintha egy button a kattintás után beragadna és újabb kattintásra oldódna.
Ha ilyesmit keres az ember, arra nem a sticky button lenne a helyes kifejezés? (Latvany, nem megoldás szempontjából közelítve - ha mondjuk videón látok ilyet, akkor csak abból indulok ki tudatlanként, hogy latok egy gombot, ami beragad)
56

Toggle button-nek hívják az

Endyl · 2021. Ápr. 19. (H), 15.24
Toggle button-nek hívják az ilyeneket (ha mindenképp button kell), de a szemantikusan helyes elem erre a feladatra html-ben a checkbox.
57

Félreértesz :)Nem a

mind1 valami név · 2021. Ápr. 19. (H), 16.18
Félreértesz :)

Nem a megfelelő szakkifejezést keresem, hanem, hogy jól emlékszem-e régről, hogy az ilyen dolgokat, amik "beragadnak", az angol sticky-nek nevezi?

Oda akartam kilyukadni, hogy ma már nem sokra megyek azzal, ha körülírom, mit keresek...
Legalább közben beugrott, honnan emlékszem rá: windows-ban van olyan, hogy sticky keys
58

Nem értem félre

Endyl · 2021. Ápr. 19. (H), 16.31
Arra írtam, hogy a "bergadó" dolgokat általában toggle-nek hívják. Pl. toggle btton.
59

Szerintem elbeszélünk egymás

mind1 valami név · 2021. Ápr. 19. (H), 17.43
Szerintem elbeszélünk egymás mellett: én arról beszélek, hogy ha valaki kívülálló filmet néz és a filmben mutatnak egy képernyőt, rajta egy olyan bigyóval, ami kattintásra/nyomásra állapotot vált (nem tudom jobban körülírni, szóval hangsúlyozottan nincs köze webfejlesztéshez), ahogy pl. az említett sticky keys a windows-ban, és utána akar nézni, hogy mi lehetett, akkor vélhetőleg a "sticky" lesz az első szó, ami eszébe jut.
A google-nek meg a sticky = position: sticky; ebben a kontextusban.

Checkbox-ról nekem egy olyan képernyőelem jutna eszembe, amiben egy pipa, x, egy a kerettől többnyire elkülönülő "töltelék" van stb.
60

Én meg erre mondom, hogy

Endyl · 2021. Ápr. 19. (H), 17.55
Én meg erre mondom, hogy szerintem a toggle lesz az első szó, amire keresni fog :)

A checkbox absztrakt funkciója, hogy megőrizzen egy interakcióra ide-oda változó állapotot. Hogy ez hogyan jelenik meg vizuálisan a felhasználó számára, az részletkérdés. HTML-t nem a(z alapértelmezett) megjelenés függvényében írunk (ideális esetben), hanem funkció/szemantika alapján. A megjelenés a CSS-dolga. Akár a böngészőből, a felhasználótól, vagy a weboldaltól jön.
61

Ja, hogy ez a köznyelvben is

mind1 valami név · 2021. Ápr. 19. (H), 18.04
Ja, hogy ez a köznyelvben is így van?
62

open/close css-ben

mind1 valami név · 2021. Ápr. 22. (Cs), 19.09
Visszatérve egy kicsit ehhez.
Ha van egy konténer/wrapper div, amiben elhelyeznék egy form-ot és egy buttont, de azt akarom, hogy
1. Induláskor csukva legyen -> height:0;
2. Legyen a form-on belül némi hely a benne lévő elemek és a keret között.
3. Amíg 0 a magasság, ne látszódjon semmi a form-ból.
Ezt van esély egy közbeékelt div nélkül megoldani?

.w1 {
  height: auto;
  display: flex;
  flex-direction: column-reverse;
  ...
}
.f1 {
        width:      100%;
        height:     0px;
        display:    grid;
        overflow:   hidden;
        grid-template-columns:  auto 1fr;
        border-style:   solid;
        border-width:   1px;
      ...
    }
...

<div class="w1">
  <form class="f1" ...>
      <label>xxx</label><input .../>
      <label>xxx</label><input .../>
      <label>xxx</label><input .../>
  </form> 
</div>
Ha így csinálom, akkor minden szép és jó, csak a form alsó és felső eleme hozzáér a peremhez.
Ha a .f1-hez hozzáteszek egy padding: xxx;-t, akkor meg ahány pixelt a padding-re számol, az mindenképp megjelenik a form-ból.

Kipróbáltam, hogy div-be teszem a form-ot, de az sem segít.
Ha a form-hoz van padding, akkor a padding-nek megfelelő darab mindenképpen kilóg.
Amíg csak a form volt, addig még fogjuk rá, érthető volt.
Így már nem annyira.

update:
https://stackoverflow.com/questions/20827367/why-doesn-t-height0-hide-my-padded-div-even-with-box-sizingborder-box közben találtam ezt, ez ad némi magyarázatot a jelenségre, de... hát elég gusztustalan megoldásokat látok a problémára.
63

position:absolute; - mit értek félre?

mind1 valami név · 2021. Ápr. 24. (Szo), 11.24

button {
  position: absolute;
  left: 0px;
  top: 0px;
}

.c1 {
  padding: 30px;
  border-style: solid;
  border-width: 1px;
}

.c2 {
  padding: 20px;
  background: #4488cc;
}


<div class="c1">
  c1c1c1c1 c1c1c1c1
</div>
<div class="c2">
  2222222 222222
  <button>&#9776;</button>
</div>
Ebből én arra számítottam, hogy a button a második div-ben fog megjelenni, nagyjából a bal felső sarok környékén.
Ehelyett vagy a body vagy a felső div bal felső sarkában mutatja a böngésző.
De miért? Valamit ír a doksi, hogy
"The element is positioned relative to its first positioned (not static) ancestor element"
de ez az én értelmezésem szerint a c2 lenne, hiszen a div nem position:static beállítású per default, amennyire tudom.
64

Rosszul tudtam. A div

mind1 valami név · 2021. Ápr. 24. (Szo), 13.54
Rosszul tudtam. A div defaultja a position:static...
Ettől kezdve érthető az egész. Ennek újra neki kell futnom, mert megint keverednek bennem a display: és a position: beállítások és az egyes elemekhez tartozó default-jaik...
(most épp a div display:block; volt, amivel sikeresen kevertem a position:static;-ot...)
65

popup modal dialog - no JS (most találtam)

mind1 valami név · 2021. Ápr. 24. (Szo), 15.06
https://codepen.io/peiche/pen/vhqym

Ez tetszik.
66

Tetszik, de saját szerverről vajon miért nem megy? (tárgytalan)

mind1 valami név · 2021. Ápr. 25. (V), 21.00
Tudna valaki segíteni?
Átmásoltam a saját gépemre, egy html file-ba a fenti kódokat.

<!doctype html>
<head>
 <style>
 ... ide másoltam ami a CSS ablakban van ...
 </style>
</head>
<body>
 ... ide másoltam a HTML ablak tartalmát ...
</body>
</html>
Az eredeti helyen működik, nálam nem. Hiába kattintok a "Click me"-re, nem történik semmi. A konzolon ugyan megjelenik pár hiba, de azok megjelennek az eredet oldalon is (a linear-gradient ... az összes böngészőm szerint hibás például)

Felraktam ide a nálam lévő verziót: gist.github.com

Update: ha visszamásolom a megfelelő darabokat a codepen.io-ra, akkor sem működik. Csalna a codepen?

Update2: igen, csal... Ez még meg kell néznem: van valami SCSS preprocessor, ami fogalmam sincs, mi lehet, de ha az nincs bekapcsolva, akkor nem működik az egész, ergo elég fontos dolog lehet.

Update3: hát szomorú vagyok, mert a szerző azt állította, hogy JS nélkül működik a kis csodája. Hát ez részben igaz, de valami preprocessor kell neki, mert ez nem mezei CSS, hanem SCSS, amit (ha jól értem) külön JS library segítségével lehet betölteni. :(
67

Gyorsan átfutva itt csak

Endyl · 2021. Ápr. 26. (H), 09.57
Gyorsan átfutva itt csak annyit csinál az scss, hogy másik selectoron belül lévő selectoroknál az & jelet lecseréli a külső selectorra.

.valami {
  opacity: 0.5;
  &:hover {
    opactiy: 1;
  }
}
/* a fentiből lez lesz */
.valami {
  opacity: 0.5;
}
.valami:hover {
  opacity: 1;
}
68

Köszi. Mindenesetre a vim is

mind1 valami név · 2021. Ápr. 26. (H), 10.03
Köszi. Mindenesetre a vim is kiakadt tőle/rajta (hibásnak jekezte), nem csak a browserek :)
Én meg azóta is keresem, hogy akkor ez most WTF? mert az tiszta, hogy scss=bővített css, épp csak úgy fest, önmagában nem nagyon használható, kell mellé plugin is.
69

Nem hagyott békén a dolog, de

mind1 valami név · 2021. Ápr. 26. (H), 21.37
Nem hagyott békén a dolog, de lusta voltam egyesével átírni: https://jsonformatter.org/scss-to-css
:)
Ezzel átkonvertáltam, így már működik minden extra szoftver nélkül is.
70

Hogy én miket találok... :) (css width x%-y px)

mind1 valami név · 2022. Jan. 20. (Cs), 20.56
Vajon ez mennyire szabványos?
Végig kellett volna olvasni pár oldalnyi szöveg (sajnos már nem nagyon megy :( ), hogy kitaláljam, miért lóg ki a div az oldalról, ha 'style="width: 100%; margin: 20px' van beállítva, pusztán komment jelleggel, hogy ne felejtsem el, a szélességet kicseréltem: width: 100%-40px; - legnagyobb meglepetésemre működik, nem lóg ki a jobboldalon sem. :)
71

css box-sizing

Arnold Layne · 2022. Jan. 21. (P), 09.55
Vov. Erre nek tettem volna fel nagyobb összeget. Viszont van egy box-sizing CSS tulajdonság, ami ha jól látom még working draft, viszont caniuse.com szerint az összes létező böngésző ismeri. Ezt amit te írtál, melyik böngészőkben próbáltad eddig, és melyikben működött is?
72

Ez egy jinja2 (python Flask)

mind1 valami név · 2022. Jan. 21. (P), 10.58
Ez egy jinja2 (python Flask) template, de hátha...
https://gist.github.com/haa-zee/29426569c068f07c6d8722e094ad944c
Linuxon ami browsert találtam, mind egyformán működött (a tetején lévő táblázat kilóg az oldalról, az alsó pont illeszkedik.
Androidon a felső táblázat illeszkedik az oldal méretéhez, az alsó arányaiban ugyanúgy jelenik meg, mint linuxon, csak ugye itt a 100% az oldal szélességének kevesebb, mint fele így.
73

Fix betűméret minden kijelzőre... aham...

mind1 valami név · 2022. Már. 2. (Sze), 12.39
"Meg ahogy azt a mórocska elképzeli..." - mondá a szálloda recepciósa a Magyar vándorból. :)
Én azt hittem, hogy ha a font-size cm-ben vagy mm-ben van megadva és pixelenként méretezhető fontot használok (DejaVu család tudtommal ilyen), akkor közelítőleg azonos méretű betűim lesznek minden böngészőben.
Hát nem nyert. Mobilon a Chrome tudja ugyanúgy megjeleníteni, ahogy a notebookon a Firefox. A többi sokkal kisebb.
Viszont a chrome scollozhatóan jeleníti meg, míg a többiek bepréselik kijelző szélességűre az egészet.
Viszont ettől kezdve nem értem, mi értelme az ilyen fixnek mondott mértékegységeknek.
(bár nem tartom kizártnak, hogy androidon hibásan adja át a rendszer a böngészőnek pl. a DPI-t)
74

Hacsak nem nyomtatni*

Endyl · 2022. Már. 2. (Sze), 13.57
Hacsak nem nyomtatni* szeretnél webről, kétlem, hogy ezekkel a mértékegységekkel messzire jutnál. Célszerűbb megbarátkozni velük: em, rem, ch, ex és társaik.

*Az MDN szerint nyomtatásban inkább viselkednek ezek a fix mértékegységek helyesen.
75

Úgy könnyű ;) Régebben

mind1 valami név · 2022. Már. 2. (Sze), 14.14
Úgy könnyű ;)
Régebben egyébként működtek ezek az általam használt desktop kijelzőkön is, ha nem csal az emlékezetem. Dehát az linux+windows volt, ez meg droid...

Most "em" volt az első amit próbáltam, de látszólag nem volt jobbb azzal sem.
De benne van a pakliban, hogy elírtam/lehagytam valamit, csak nem vettem észre, a browserek meg szó nélkül ignorálják a hibás részt :)
76

Mondjuk én eleve a

Endyl · 2022. Már. 2. (Sze), 15.09
Mondjuk én eleve a "pixelpontos" megjelenést hanyagolnám (főleg egy hobbiprojektnél). A web nem nyomtatott médium, ahol tervezhetsz fix vászonra, környezetre. Feleljen meg az oldal a "branding szabályoknak"*, és legyen jól használható. Az, hogy android vs windows vs akármi pontosan hány mm a font vagy a margó, teljesen lényegtelen, ha jól használható az oldal.

* ha az a szabály, hogy valaminek 12.143mm magasnak kell lennie, akkor az rossz szabály :)
77

Az a baj, hogy nem

mind1 valami név · 2022. Már. 2. (Sze), 16.08
Az a baj, hogy nem használható.
Ami laptopon 1920xnemtudommekkora felbontásnál olvasható méret és nem túl nagy (nem olyan, mintha h1 tag után írtam volna) az mobilon ob bolhapöcs méretű. Pixelben kb egyforma, csak a mobilom nagyjából ötöde a notebooknak. :)
78

Meta viewport

Endyl · 2022. Már. 3. (Cs), 10.23
Mivel nincs kód, gondoltam megkérdezem, hogy ez a meta tag (vagy hasonló) megvan-e:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Meg persze media queryk is játszanak, ha valami nagyon nem passzol.
79

Sajnos nincs meg semmi,

mind1 valami név · 2022. Már. 3. (Cs), 11.46
Sajnos nincs meg semmi, hajnalban egyelőre végevetettem a projektnek, töröltem mindent.
Csak annyi volt, hogy ezer sornyi tesztadat, soronként egyetlen div és hozzá egy css benne a font mérettel és egy overflow: hidden; -nel.

Úgyhogy köszi az eddigieket, remélem, ez volt itt az utolsó posztom.
80

Találtam némi maradékot a

mind1 valami név · 2022. Már. 18. (P), 16.30
Találtam némi maradékot a html-ből a mobilomon.
Kipróbáltam, tényleg segít a méretproblémán.
Jól értem, hogy a browser desktop módja gyakorlatilag ezt iktatja ki?
81

Én úgy tapasztaltam, hogy

Endyl · 2022. Már. 18. (P), 17.41
Én úgy tapasztaltam, hogy igen. Illetve ha jól emlékszem, akkor a user agent is eltérő. Másra nem emlékszem így hirtelen.
82

Megint nem értem a doksit (height/width összefüggések)

mind1 valami név · 2023. Május. 7. (V), 16.10
Szeretnék egy konténert, aminek a mérete fixen akkora, amekkora a böngészőben látható "hasznos" terület.
De vagy összeugrik a legkisebb magasságra, amibe még elfér amit belepakoltam, vagy kilóg az alja az ablakból.
body: { margin:0; padding:0; }
#container1: {
   display: grid;
   box-sizing: border-box;
   height: 100vh;
   ...
}
Ez így, ebben a formában addig jó, amíg a margin (és a padding is?) 0.
Ha a height 100%, akkor összeugrik az egész. Akkor is, ha a body-hoz beállítom a height: 100vh;-t. Ha margin-t állítok be, akkor annyival kilóg az egész alul. (érdekes: oldalt nem, a width nem zavarja - igaz, az nincs is beállítva)

Mit hagyok ki? Főleg azt nem értem, hogy miért csak a magassággal vannak gondjai, a szélesség miért marad jó...

ui: szóval nem megoldást keresek, érteni szeretném, hogy miért viselkedik úgy, ahogy...
ui2: "természetesen" csak firefox alatt. Közben eszembe jutott, hogy van még egy chromium és egy opera is a gépemen, azokon legalább a width is úgy viselkedik, ahogy kell(?).
83

CSS basic box model

Poetro · 2023. Május. 13. (Szo), 00.26
CSS basic box model
84

Ezt (is) olvasgattam sokszor, de

mind1 valami név · 2023. Május. 13. (Szo), 15.13
Ezt (is) olvasgattam sokszor, de pont ezért kérdeztem, mert a jelek szerint rendre átsiklok felette, hogy a függőleges és a vízszintes működés miért tér el?
Bár ahogy írtam, azóta kiderült, hogy firefox-specifikus.
85

Ez már inkább csak költői

mind1 valami név · 2023. Május. 23. (K), 21.37
Ez már inkább csak költői kérdés: mennyire normális/elfogadott dolog, hogy 

<div class="flex">
<div class="message">xxx</div>
<div class="grid">
  <div class="box1">...</div>
  <div class="box2">...</div>
</div>
<div class="message">xxx</div>
formában rakok össze egy lapot úgy, hogy értelemszerűen a "flex" az display:flex, flex-flow: column; - pusztán azért, hogy a két "message" dobozt úgy tudjam eltüntetni, hogy a megmaradó részei a lapnak kitöltsék a böngésző ablakot?
Ugyanis grid-del nem tudtam elérni, hogy az alsó és a felső sor egyszerűen(!) eltűnjenek.
Egyszerű alatt értem, hogy a display:-t None-ra változtatom, erre nem csak a tartalma tűnik el, de a helye is. Ha az egész konténer egyetlen grid, akkor a helyük megmarad. (firefoxban)
86

Gridben is el lehet tüntetni

Endyl · 2023. Május. 25. (Cs), 09.54
Szerintem nem rossz megoldás a flexes sem, de ha már kérdés volt, akkor itt egy proof of concept eltűnésre gridben (bár nem biztos, hogy a legszebb):
<div class="layout">
	<div class="message">foobar</div>
	<div class="content">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</div>
	<div class="message">foobar</div>
</div>
html, body {
	margin: 0; padding: 0; height: 100%;
}
.layout {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
}
.content {
	grid-row: 2/3;
}
87

Bocs, hogy telhetetlen

mind1 valami név · 2023. Május. 28. (V), 10.30
Bocs, hogy telhetetlen vagyok, de ebből hogy lehet úgy eltüntetni a "message" elemeket, hogy ne legyen ott a helyük sem?
Mert ha pl. a felső "message" div-re beállítom, hogy tmp1.style.display="none", akkor megmarad az üres helye, plusz az alsó kicsúszik az oldal alján és megjelenik a scrollbar (chromium, firefox - mindkettő linuxon)
Ha .style.visibility="hidden", akkor csak a tartalma nem látszik.

Szóval nem teljesen tiszta számomra a koncepció. ;)
88

Ahogy írtam

Endyl · 2023. Május. 28. (V), 11.59
Ez, így, ahogy van, úgy működik, hogy írod. Ebben példában a két message-et fixáltam felülre, alulra. Display none-ra eltűnnek, és a content kitölti helyüket. Nincs görgetősáv. De a rögzítés nélkül is ugyanúgy működik.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hm</title>
    <style>
        html, body {
            margin: 0; padding: 0; height: 100%;
        }
        .layout {
            display: grid;
            grid-template-rows: auto 1fr auto;
            height: 100%;
        }
        .content {
            grid-row: 2/3;
        }
        /* rögzítés felülre, alulra */
        .message-1 {
            grid-row: 1/2;
        }
        .message-2 {
            grid-row: 3/4;
        }
    </style>
</head>
<body>
    <div class="layout">
        <div class="message-1">foobar-1</div>
        <div class="content">
            <div class="box1">box1</div>
            <div class="box2">box2</div>
        </div>
        <div class="message-2">foobar-2</div>
    </div>
</body>
</html>
89

Itt kezdem elveszteni a

mind1 valami név · 2023. Május. 28. (V), 12.48
Itt kezdem elveszteni a fonalat.
Az eredeti is működik, csak annyi kellett, hogy a .layout-hoz hozzácsapjak egy { box-sizing: border-box; } paramétert is (jó, a tiéden túl kapott egy border-t, ez okozta a scrollbar megjelenését).

Utálom az ilyen rejtélyes működéseket.
Tudnám az előbb mi lehetett más (nem nyúltam a forrásnak ahhoz a részéhez), amitől elsőre megmaradt a felső sor helye is. (igaz, akkor developer tools-ból írtam át a display-t, most meg hozzácsaptam egy kétsoros JS-t)

És egyre humorosabb. Az eredeti példádat beírtam egy új fájlba.
Most a változatosság kedvéért ha a felsőt eltüntetem, a helyére teszi az alsó "message" divt-t. :) Kutya legyek, ha értem, mi történik. Na mindegy, doksiból talán sikerül kibogarászni.
90

Hát ja, a *, ::before,

Endyl · 2023. Május. 28. (V), 16.43
Hát ja, a *, ::before, ::after { box-sizing: border-box; } szabályt érdemes minding használni. Hasonlókért érdemes még átnézni a css remedyt.

Az eredeti kódban csak a grid második cellájának tartalma van rögzítve. A többi cellába a böngésző automatikusan teszi be a megjelenített elemeket. Tehát ha az első .message nincs megjelenítve, akkor a második kerül az első cellába. A rögzítéses kód csak megmondja, hogy melyiknek melyik cellában kell lennie. Vagyis pontosabban azt, hogy melyik vízszintes grid vonalak között, de mivel csak egy oszlop van, így kvázi cellát jelent.
91

Na ez megint valami új

mind1 valami név · 2023. Május. 28. (V), 17.19
Na ez megint valami új volt.
(a logikáját nem teljesen értem, de én eléggé földhözragadt módon gondolkodom a megjelenítésről is: ha lerakok öt elemet egymás után, akkor azok abban a sorrendben jelenjenek meg, ne kezdje random kevergetni őket a böngésző :) )

ui: remedy-t nekem senki se emlegessen! :D (anno volt szerencsétlenségem egy Remedy Helpdesk nevű szoftverhez... azóta kiütést kapok, hacsak meghallom a remedy kifejezést :D)
Köszi ezt is!

ui: az eredeti felállást viszont azóta se tudtam reprodukálni. Most a tmp1.style.display: "none"-ra ténylegesen felszívódik az így beállított elem, nem hagy maga után üres helyet. :(