Ezt egy web-es generáló oldal dobta, a lényege, hogy responsive az oldal ezáltal.
Mobilon egymás aá kerülnek a grid-ek.
Persze be lehet írkálni, de így sok időt spórolt, azért.

Köszönöm a választ

Hello,
Lehet css -ben olyat csinálni, ha :hover egy class -on, akkor egy másik class vagy id display none -ra vált amíg rajta vagyok egérrel?

Vagy ezt csak js -ben tudom megcsinálni?
/js-t tudom hogyan, csak érdekelne, hogy csak css-el is meg lehet e oldani valahogyan/

sikerült

Sziasztok!

A weboldalam egyik css beállítását js-ben készítettem el. Azonban szeretném átültetni CSS-re az egészet, de nem minden részletét tudom, hogyan lehetne. Ez volna az alap JS:

function setvid() {
var o = document.getElementById("keret");
var v = document.getElementById("belső");
v.style.height = o.clientHeight - 50 + "px";
v.style.width = parseInt(v.style.height) / 9 * 16 + "px";
if(v.clientWidth >= o.clientWidth) {
v.style.position = "absolute";
v.style.width = o.clientWidth - 20 + "px";
v.style.height = parseInt(v.style.width) / 16 * 9 + "px";
v.style.top = o.clientHeight / 2 - v.clientHeight / 2 + "px";
v.style.left = o.clientWidth / 2 - v.clientWidth / 2 + "px";
}
}

Lehetséges ez egyáltalán CSS-ben?
Előre is köszönöm a választ!

But who is watching the guardians?

Én egyedül a calc()-ot ismerem CSS-en belüli számoláshoz: [link]

De szerintem ennyire dinamikusan nem lehet erre használni. De kiindulási alapnak jó lehet.

Én azzal nem tudtam minden részét. Főleg a feltételek és a kered div méretéhez való viszonyításban akadtam el

But who is watching the guardians?

Nem igazán lehet, bár felmerül a kérdés, hogy mit is szeretnél ezzel elérni (simán lehet, hogy ugyanazt más, tisztán CSS-ben lévő módszerekkel is meg lehet csinálni).

Do the thing!

Egész biztos, hogy amikor ilyen számításokat csinálsz, akkor nem az a gond, hogy ezt ne lehetne css-re átültetni, hanem a js-es balfaszkodással koncepcionális dizájn hibákat fedtél el. Mihelyst koncepcionálisan rendbe teszed, rá fogsz jönni, hogy css-el megoldani is egyszerű lesz.

Én kérek elnézést!

Nagyon túl gondolod ezt az egész JS/CSS dolgot szerintem.

És mivel megint küdtél egy JS kódot, de hozzá HTML struktúrát nem, így elég nehéz tippelni, hogy mit is lenne a célod ezzel.
Szóval tippelek: jsFiddle - ebből már ki tudsz indulni...

Javarészt valami hasonlót kellene csinálnia, köszönöm. De akkor elmondom, miért lényeges a feltétel és ez az egész:

Adott egy Webtartalom, amiben van egy DIV. Ennek a DIV-nek a magassága állandó, azonban a szélessége %-ban van megadva, hogy reszponzív maradjon. 16:9-es és ehhez közeli képerányú monitorok esetében ennek a DIV-nek megközelítőleg 16:9-es az aránya. Ebben benne van egy sor szöveg (cím), illetve alatta egy videó, amelynek képaránya minden esetben 16:9. A videó feletti szöveg magassága egy adott méret, amellyel körbe van futtatva mindenhol a videó, hogy egységes legyen.

Namost, amint a megjelenítő (monitor) képaránya pl 4:3, vagy 16:9-től keskenyebb, előbb-utóbb ennek a DIV-nek a szélessége rövidebb lesz, mint a magassága. Mivel az alap elképzelés szerint a videó megjelenő méretét a DIV magasságához igazítottam, így ebben az esetben a videó már kilóg két oldalt a DIV-ekből és minden elcsúszik (merthogy 2 van egymás mellett). Erre van ott a feltétel, hogy ilyen esetekben a DIV megjelenített szélességéhez viszonyítva állítsa be a videó méreteit a magasság helyett.

Mivel CSS-ben én eleddig csak alapvető formázásokat csináltam, így a komplikáltabb megjelenítésekhez nem értek. Ezért csinálntam JS-ben és ezért fordulok hozzátok most, hogy szeretném átültetni CSS-re.

Viszont egyéb kérdés, mert nem akarok újabb hozzászólást írni: Tudja valaki, minek köszönhető a fehér csík?

But who is watching the guardians?

A fehér csík (az Inspector szerint) a "skeleton-theme-inline" style hozadéka:
background:#fff
Chrome-ban Ctrl+Shift+C, aztán kurzorral a fehér csíkra kattintasz, és ott kiírja, hogy mi-miért. Ha azt ott deaktiválod, láthatod, hogy el is tűnik.
Vagy:
body {background: none;}

A reszponzivitáshoz én ezt használom:
@media (min-width:1200px){}

Ahogy eléri az adott szélességet, az ebben a szekcióban beállított értékeket kezdi alkalmazni. És ebből van jó pár, hogy le legyen fedve minden.

Itt találsz egész jó leírást, példát és gyakorlási lehetőséget hozzá: [link]

[ Szerkesztve ]

Először is, köszönöm a fehér csík megoldást.
A másikra pedig:

Ismerem és alkalmazom is ezt a megoldást, pl a mobilnézetet ezzel szerkesztem. De! Nekem itt nem a szélesség lenne a befolyásoló tényező, hanem a megjelenített méretarány. Azt lehet CSS-el kezelni?

But who is watching the guardians?

Próbálom értelmezni, hogy pontosan hol csúszhat el a dolog, mi lehet pontosan a probléma, de egy pontos jsfiddle nélkül én is max csak annyira tudok tippelni, mint amit cstomee is összerakott - abban viszont ott a megoldás is.
Ha esetleg mégsem ez a jó megoldás neked, akkor egyszerű példát dobj már össze jsfiddle-ben, és akkor biztosan jön a megfelelő megoldás is rá.

Hello,

Sehogy sem értem miért nincs középen a felirat vertikálisan.
Valamiért a heading lefele eltolja, de ha nincs heading, akkor meg fent van, nem lent, tehát úgy se.
Valaki tudna segíteni hogyan tudom középre rakni a feliratot?
/több ilyen van, tehát a nevek-container közepére kell rakni, nem a képernyőnek/

A .nevek-re alkalmazd az alábbiakat:

display: flex;
justify-content: center;
align-items: center;

Do the thing!

Nagyon szépen köszönöm
A pozicionálásokkal mindig bajban vagyok

Ummmm, volna ugyanezzel még egy kérdésem
Miért nem tűnik el a szöveg hover esetén?

/lejárt az idő azért új/

[ Szerkesztve ]

:hover pszeudó selector-class amit egybe kell írni azzal, amire alkalmazni szeretnéd nem lóghat a levegőben

“Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude

Ez érdekes, mert a kép viszont megjelent.
De így se jó, ha egybe írom, akkor meg a kép nem jelenik meg...

Sikerült
Már csak a képet kellene valahogy megcsinálnom, hogy ne vágja le a tetejét.
A tetejéhez nem sikerül igazítanom valamiért.

Sziasztok!

Kérdésem nem magával a CSS-el kapcsolatos, mindazonáltal mégis ide sorolnám.
Rengeteg bemutatóvideóban, tutorial-ban lehet azt látni, hogy van egy megnyitott böngésző ablak, ami szinte minden, a programozó felületen leütött karakter után automatikusan frissül, még ha CSS-ről is van szó.
Ez utóbbit azért emelem így ki, mert nálam az include-olt CSS csak akkor hajlandó frissülni, ha Shift+F5-el frissítek.

Namost a kérdésem az lenne, hogy milyen szoftvert futtatnak ehhez? Én Win10 alatt Visual Studio Code + XAMPP szervert használok, MacOS alatt pedig szintén Visual Studio Code + MAMP szervert. Azonban ezek egyike sem frissül automatikusan.

---Kiegészítés: Azért használom ezeket a Localhost szervereket, mert PHP fájlkiterjesztésben dolgozom.

But who is watching the guardians?

Igazából pl. Chrome-ban ha a DevTool-sban (F12) írsz a kódba (ha már CSS), akkor az egyből látható is lesz.
Bár én nem ilyen tool-t használok (amit keresel), de ha a live preview vagy a real-time preview keresőszavakkal keresel (pl.: real time html editor offline), sok találatok fogsz kapni, pl.:
[link]
[link]
Amúgy a Visual Studio-hoz is dob fel ilyen kiegészítőt: [link]

A Chrome DevTools ugyan azonnali, de csak frissítésig működik ugye, nem írja át a fájlt. Mondjuk ehhez hozzáteszem, hogy lehetne benne ilyen opció, de mindegy.
Amit küldtél a VSC-hez, azzal ugye az a baj, hogy számomra használhatatlan. Nem kezeli sem a PHP formátumot, sem a JS kódok futtatását.

És ugyan ez a probléma a Light Table és a LivEditor programmal is. Nem azért kérdezek, mert nem vagyok hajlandó rákeresni a Google-n, hanem azért, mert nem találtam megfelelőt. Azonban még egy hasznos információ: Feltétlenül fontos, hogy az a program, amit keresek, elérhető legyen Win10 és MacOS alatt is, FTP kapocslódási lehetőséggel.

Tehát összegezve, mire lenne szükségem, hátha előbb születik megfejtés, vagy csak annyi, hogy lehetetlen kéréseim vannak :

- FTP kapcsolatra képes kódszerkesztő
- Ami képes PHP, JS, CSS és JSON azonnali futtatására
- Lehetőség szerint ez egyetlen program legyen
- Kompatibilis legyen Windows és Mac OS rendszerekkel.

Köszönöm

But who is watching the guardians?

Szia!
Én a RapidCSS-t használom, de nem tudom mik az igényeid. A cégnek létezik többféle editora, nézz ott szét, biztosan találsz megfelelőt..

-gf-

Bocsánat, ezt nem tudhattam. Sok kérdés van fórumszerte, amire egy egyszerű Google-keresés megadja a választ - csak éppen nem jól kérdezik. Ilyenkor (is) a segítő szándék vezet, és ha csak pár pillanatomba kerül, miért is ne segítenék. És én is olyan sok segítséget kaptam már itt, próbálok visszaadni belőle. Bocs, ha "túltolom" néha.
De akkor tudni fogom most már, hogy Te ezeken a körökön már túl vagy, mire itt kérdést teszel fel.
Megnéztem Notepad++-ban, van egy ilyen beépülője, de csak IE-módjai vannak, ami így nem túl hasznos. (És eddig a pontig azt gondoltam, a NP++ elérhető Mac OS-re is, de most ahogy elnéztem a letöltési oldalára, látom, hogy nem... Akkor ebben a témában csendben maradok, én csak Windows-t használok. )

Köszönöm, erre rá fogok nézni

Taci: Neked is köszönöm szépen, nem szerettem volna negatív hangvételű lenni, másnak is nagyon hasznos lehet, amiket belinkeltél

But who is watching the guardians?

webpack dev server, vite és hasonlók csinálják ezt Hot Reload-nak hívják.

Újabban már a Chrome, Edge tud olyat, hogy a workspace foldert megadod neki, és ahogy a Devtoolsban módosítasz, azt rögtön le is menti a forrás fileokba is.

Én kérek elnézést!

Köszi az infót, ez jól hangzik

But who is watching the guardians?

Sziasztok,

Egy fura kérdésem lenne:
Másodállásban meg lehet élni webdesign (wordpress+css) munkából?
Az van hogy keresgélek másodállást és van ilyen tanfolyam, csak nem tudom beiratkozzak-e. Ők azt mondják van igény weboldalak készítésére, de egy programozó kolégám azt mondta hogy ilyen, ezekkel elkészíthető egyszerű weboldalakra nincs igény.
Szóval nem tudom belevágjak-e. A tanfolyam se olcsó. Nagy tapasztalatom nincs. Anno C-ben suliban tanultam programozni. Van valakinek tapasztalata? Érdemes belevágni vagy inkább PHP?

1. Rossszul alsz hozza, ha csak a penzert csinalod, nem fogsz sokra jutni
2. Webdesign != webfejlesztes
3. A Wordpress is PHP
4. Nem

Kösz mindkettőtöknek a választ!
Nyilván nem lesz azonnali bevétel. Ezt nem is így képzeltem. A tanfolyam is kb fél év lenne és utána még fel kéne építeni az üzletet. Ezért volna fontos látnom, hogy van-e piac erre, mert nagyon sok időt kellene beletennem és ha a végén kiderül nincs rá igény, akkor felesleges. Azt se szeretném ha rossz irányba indulnák. Nyilván a tanfolyamon azt tunkolják hogy van igény erre, de hát ők is gondolom a tanfolyam árából élnek.

Amiért mégis érdekel ez a téma az az hogy másodállásban és kötetlen időben végezhető és otthonról. Nem sok más munkát ismerek amire du. 4 után lenne igény és kb helyben. Mert szivesen elmennék boltba is dolgozni, csak a műszakbeosztás nem passzol a főálláshoz.
Programozásban nem vagyok spíler. Anno foglalkoztam valamennyit ezzel suliba. Meg most elkezdtem youtube-on megnézni az ingyenes html programozást és gyakorolni. Utána CSS.
Ha mást nem, akkor összetákolok magamnak egy weboldalt és kiváltom a vállalkozóit és megpróbálok árulni valamit az oldalon. Egyelőre jobb ötletem nincs.
Azzal tisztában vagyok hogy a komoly programozók azok főállásban és csak azzal foglalkoznak. Meg ők nem fél év alatt tanulják meg, hanem évek.

[ Szerkesztve ]

Egy jó összefoglaló, hogy mi is kell ma frontend fejlesztéshez.

Azért a WP-s oldalakat is el lehet adni. Láttam mostanában pár újonnan azzal készült honlapot.

JS nélkül félkarú leszel, ha pedig az megy, akkor szerver oldalon jöhet a Nodejs a PHP helyett.

Ha jól emlékszem Udemy-n van egész jó (sok órás) videós tanfolyam, akcióban egész jó áron, korlátlan hozzáféréssel.

[ Szerkesztve ]

http://logout.hu/cikk/mi_is_az_a_htpc/teljes.html; Három emeleten át egy teljes liftrapszódiát játszik!

köszi!

Üdv!
Újra itt vagyok! Haladok az anyaggal. Viszont most részben elakadtam egy témában.
Van itt olyan profi ember, akitől megkérdezhetném privátba, hogy mi lehet a gond a kóddal?
(nem akarok a nyakára járni senkinek. Volt már pár megoldandó eset, de ezen a mostanin hiába gondolkoztam egy órát is, nem jövök rá.) Még nem találtam Mentort a környezetemben.

Szerintem írd be ide a közösbe, hamarabb is választ kapsz majd valószínűleg.

Én is segítséget kérnék:
Végre online van az oldal, és csak most derült ki, hogy Safari alatt 1-2 eleme az oldalnak "szétesik". Ez ugyanúgy igaz iPhone-ra (iOS) és valószínűleg macOS-re is.

Viszont nincs Macem, így nem tudom ellenőrizni, mi a hiba.
Találtam online, virtualizált megoldást a tesztelésre, de elég lassú, mellette 10 percről számol vissza, és így nem is találom a hiba okát.
Windows alatti böngészőknél rendben, csak Safarinál nem.

Milyen megoldást tudnátok ajánlani, hogy megtaláljam annak az 1-2 elem Safari alatti szétcsúszásának (CSS) az okát?

Köszi.

Érdemes átnézni, hogy az oldaladon használt dolgok mind támogatottak-e megfelelően Safari alatt. Pl. használd a caniuse-t!

http://logout.hu/cikk/mi_is_az_a_htpc/teljes.html; Három emeleten át egy teljes liftrapszódiát játszik!

Ez jó ötlet lenne, ha nem lenne már ekkora a kód. És nem is használok azon az 1-2 elemen mást, mint a többin. Plusz két különböző emulátorral néztem (időkorlátos), és más-más módon jelenítették meg (de szétesve mindkettő), szóval ez így "remote-ban" sajnos eléggé megfoghatatlan.

Használ itt valaki esetleg Macet (és ért is a CSS-hez), és szánna 2 percet arra, hogy ránéz arra az 1-2 elemre (Chrome-ban jól jeleníti meg, Safariban nem), hátha látja egyből, mi a probléma oka?

Ehehe. A hiba az, hogy a Safari böngésző korunk internet Explorer-e. :(
Egy fizetős, de olcsó jó megoldás van: browserstack-re fizess elő, és máris nem emulalva hanem igazi böngészőben tudod nézni, vizsgálni a safari hibáit.

Én kérek elnézést!

A hiba az, hogy a Safari böngésző korunk internet Explorer-e. :(
Szomorú, de vicces.

Próbáltam a BrowserStack-et és a LambdaTest-et is, valóban hasznos szolgáltatás/platform. Ha mást nem, 1 hónapra kipróbálom.

Viszont ebben kérnék még tanácsot, mert nem egyértelmű most számomra, hogy mivel van a hiba:
- desktop Mac - Safari: 1-2 elem szétesik
- desktop Mac - Chrome: minden rendben
- iPhone - Safari: 1-2 elem szétesik
- iPhone - Chrome: 1-2 elem szétesik

Szóval iPhone-on máshogy működik a Chrome, mint desktopon (Mac-es környezetben).
Úgyhogy nem tudom, tényleg a Safari-e a "hibás", vagy a rendszer (iOS), hisz' iPhone-on a Chrome is hibásan jeleníti meg azt az 1-2 elemet.

iPhone-on minden böngésző a Safari motorját (Webkit framework) használja.
Egyszerűbb venni egy olcsó, használt iPhone-t, és azzal tesztelni, mint fizetni BrowserStackért vagy bármi másért, főleg hosszútávon.

Forget your troubles, c'mon get happy

Köszi az infót mindkettőtöknek.

Ezt a template-et használom (megvettem, de már lejárt a support). Az oldal tetején lévő keresőmező (Search here...) csúszik el Safarin.

Megtenné valaki, hogy rászán 1-2 percet (akinek van Safarihoz hozzáférése, persze), hátha valami egyértelmű dolgon múlik csak? Én akárhogy próbálom, keresem, írom át, nem találom az okát.

Design-hibás a template - még jó, hogy eszembe jutott, hogy arra is nézzek rá - szóval mindenképp írok a fejlesztőnek is.

Köszönöm.

Plusz infó, hogy a Safari eltérően működik mobilon, tableten és desktopon. Őrület
Simán elő tud fordulni, hogy valami már desktopon úgy működik, ahogy kellene, és mobilon még mindig nem.

Én kérek elnézést!

üdv,
Akkor megpróbálom röviden leírni.
Van a Html fájlban a <header> és azon belül egy <nav> és egy <main>. Css-ben beraktam egy képet a <header>-be, meg lett neki magasság adva és frankón látszott a kép, meg a navigáció, alatta meg a szöveg. Utána elkezdtem próbálkozni a <nav> pozícióival és a szöveg rácsúszott a képre és kitakarja. Hiába próbáltam visszaállítani az eredetire, vagy kikommentezni az egész <nav>-ot, vagy bármi egyebet, nem működik egyik sem.
A <header> és <main> is block típusú. A <header>-nél a böngésző kód elemző része túlcsordulást ír, de nem tudom mi okozza.

Csináld meg a problémás részt JSFiddle-ben, írd be ide a linket (Save gomb megnyomása után kapod), és akkor láthatjuk is, próbálgathatjuk is.

[link]
A fehér háttér mögött van egy kép csak nem látszik.

Az egész tartalom benne van a headerben.
És mivel a main-nek fehér a háttere, ezért eltakarja a header hátterét.