ugrás a tartalomhoz

CSS

mind1 valami név · 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.
 
1

Annyit találtam, hogy...

mind1 valami név · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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 · 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.