- Luck Dragon: Asszociációs játék. :)
- sziku69: Fűzzük össze a szavakat :)
- D1Rect: Nagy "hülyétkapokazapróktól" topik
- eBay-es kütyük kis pénzért
- sziku69: Szólánc.
- Sgr_A: Számítógépeim aktualizálása cseréje
- gban: Ingyen kellene, de tegnapra
- Meggyi001: RTX 5060 - Az új népkártya?
- bambano: Bambanő háza tája
- hcl: Kelj fel komám, ne aludjál
Új hozzászólás Aktív témák
-
Taci
addikt
válasz
Fecogame
#2597
üzenetére
Ahogy cattus is írja, azt kikapcsolni nem tudod. Vagy átírod a saját style sheet-edben a h1 margin-ját (nem tenném), vagy csinálsz egy saját class-t, amiben beállítod a kívánt margint
!important-ra, és ezt a class-t adod ahhoz a <header> tag-hez.
<header class="u-header__meta u-small sajat-class">.sajat-class{margin: sajatErtek!important;}A styles alatti filter részbe pedig ha rákeresel a margin-ra, megtalálod, hogy mi állítja be és milyen értékre, így azt az értéket adhatod a saját class-ba.
-
Ma egészen jól megoldottam egy rakás CSS problémát, azonban egy valamire nem tudok rájönni. Fejlesztői módban nézem, hogy mit kellene beállítanom, csak arra nem jövök rá már pár órája, hogy ha kiveszem a pipát a margin elöl azt hogyan lehetne beírni a CSS-be
Felülírni meglévő értéket tudok, csak azt nem, hogy kikapcsoltatni hogyan lehetne.Mutatom képeken:
Valakinek valami ötlete?
-
martonx
veterán
1. Mert annak az esélye, hogy a CDN nem működik, töredék esélye annak, mint hogy a saját szervered nem fog működni
2. A CDN-ek kimondottan a static content kiszolgálására kihegyezett globálisan elosztott szerverek. Ellenben a te egy földrajzi pontot lévő, dinamikus adatkiszolgálásra való szervereddel.
3. Minden amit nem a te szerverednek kell kiszolgálnia, annyival több erőforrása marad arra, amit úgyis csak a te szervered tud kiszolgálni. -
Taci
addikt
Mert pont azért gondoltam, hogy jobb saját szerverről, "lokálban", mert mi van akkor, ha a CDN nem működik/elérhető.
Lehetne mixelni is a kettőt, alapból CDN-ről használni mindent, és ha nem elérhető, akkor ott a "lokál". Viszont ez is plusz JS, lassít is, még ha minimálisan is (hisz' tesztelni kell, CDN-ről betöltött-e).
Ezt a logikát végiggondolva nem látom, miért lenne jó pont csak a CDN használata.
Amit esetleg érvként amellett fel tudnék hozni amellett, hogy CDN-ről használjam, hogy ha olyan library-t használok, amit más oldal is használ, akkor valószínűleg megspórolom a hálózati forgalmat a valószínűleg már úgyis a kliensen lévő fájlok nem-újra-letöltésével.
Viszont pl. használok Bootstrap-et. És millió dolgot átírtam már benne. Így nem használhatom CDN-ről már. És a legtöbb fájlba már bele kellett nyúlnom.
Mondjuk az említett ikon pack-ba pont nem.De nyitott vagyok.
-
Taci
addikt
válasz
martonx
#2593
üzenetére
Miért rossz gyakorlat amúgy? A témában abszolút tapasztalatlanként kérdezem.A HTML template amit anno használni kezdtem, már így volt elkészítve, én pedig most azt frissítettem a már benne lévő módon (css és a hozzá tartozó fájlok saját szerveren).
Miért rossz ez a módszer, és miért jobb, ha inkább CDN-ről van belinkelve?
Köszönöm.
-
Taci
addikt
Megtaláltam a megoldást közben, a korábbi verziónál külön volt szedve a css fájl a többi szükséges fájltól (.eot, .svg, .woff stb.), és most is azt a mappaszerkezetet használtam az újnál, de itt már máshogy van bedrótozva, a fájlok egymás mellett kell, hogy legyenek (a css mellett) - vagy pedig nyilván átírni a css-t, hogy használja a külső (korábbi) könyvtárat. De így már rendben van.
-
Taci
addikt
Van egy ikoncsomag amit használok már egy ideje, Remix Icon, egy korábbi, 2.0.0-s változata.
Ennek a css fájlja le van szedve, a head-ben a szerverről van belinkelve, működik szépen.Kijött az új változata (már egy ideje, de még csak most állnék át, mert kellene pár új ikon onnan), az 2.5.0-s. Így hát letöltöttem az új css fájlt, kicseréltem a régit erre az újra - és az összes ikon eltűnt, helyettük az ismeretlen ikont jelző téglalap-ikon van.
De ha ugyanezt a fájlt a gyártó CDN csatornájáról linkelem be, akkor minden tökéletesen működik, a régi és az új ikonok is ott vannak:
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">Mi a manó lehet a különbség a két metódus között? A 2.0.0-s változatnál működik, ha szerverről linkelem be, a 2.5.0-nál már nem, csak CDN-ről engedi.
Pedig természetesen a leírásban is említik, hogy letöltöd, berakod a head-be és használod:
https://github.com/Remix-Design/remixicon#usagePróbáltam más fájlnévvel is, hátha a régi "beragadat", de nem segített.
Természetesen cache-törlés is megvolt.Van tippetek, miért?
Hogyan tudom ezt megoldani, hogy a saját szerveren tároljam a fájlt, és onnan töltsem be? (Mármint hogy működjön is.)Köszi!
-
Mr. Y
őstag
Sziasztok!
Ismét segítséget szerenték kérni.
Adott a feladat, hogy létre hozzak egy SLIDER-t, ami vertikális és minden paramétere meghatározott (háttér, jel, méret, stb).
Egészen addig, amíg horizontális, működik a dolog. Azonban amint átváltom vertikálisra, minden felborul és egy gyári jelenik meg, semmit sem módosítva.Itt összedobtam egy kis példát. Miért nem működik?
Előre is köszönöm a segítséget!
-
Taci
addikt
válasz
lanszelot
#2585
üzenetére
Szerintem az okozza a gondot, hogy a * selectorral mindenhova beállítod a sötét hátteret (#181818). Ne használd (itt, így) a * selectort, mert az minden elemre érvényes lesz. Állítsd be a hátteret (és minden más tulajdonságot) külön id-ra vagy class-ra, külön-külön, és akkor nem fognak keveredni a tulajdonságok.
Ha a kódodban csak annyi változtatást csinálsz, hogy a
background-color: #181818;részt kiveszed a * selector alól, létrehozol egy body { } selectort, és oda rakod be, akkor máris rendben lesz a gomb képének átlátszó háttere.body {background-color: #181818;} -
Taci
addikt
válasz
lanszelot
#2580
üzenetére
Add ezeket a tulajdonságokat a gombhoz:
padding: 0;border: none;background: none;Így eltünteti a gomb keretét és hátterét is, és úgy látom, ezek "rontották el" az átlátszóságot.
Frissítettem a kódot ezzel a résszel is. (a link ugyanaz, mint az előzőekben)
És még egyszer, a saját érdekedben: kérlek, kövesd a korábban leírtakat, hogyan kell a beírt kódodat megosztani. Most még átírtam a képernyőfotódról kézzel (2021 van...), de még egyszer nem csinálom meg én sem. 2 kattintással és 4 gombnyomással már meg is oszthattad volna (Save --> Save --> Ctrl+C --> Ctrl+V) amit már eleve beírtál, amikor először kértem, és már rég meg lenne oldva. Másik topikokban is. Tényleg csak a te érdekedben.
-
Taci
addikt
válasz
lanszelot
#2578
üzenetére
Igazából sosem csináltam még ilyet, csak érdekelt a dolog, ezért rákerestem Google-ön, milyen megoldások lehetnek, és ezt találtam.
<button> tag-et én így hirtelen nem tudtam képre "cserélni", ezért kerestem másik megoldást.De ha a korábban vázolt módon megosztod a JSFiddle-kódot, akkor pontos(abb) választ tudok adni. Anélkül sajnos nem.
-
lanszelot
addikt
A gomb mérete jóval nagyobb, de csak a kép háttere nem jó
Sima képpel is meg tudom oldani, mivel js vezérli, csak pici a kép /direkt/
és túl pontosan kell klikkelni, pont ezért gomb, és el van tűntetve a gomb.
Persze csinálhatok nagyobb hátteret a gombnak, és akkor az is megoldás, de az megint sufni tuning.
Mi a baja a gomb képpel? Elvileg nem kellene gondja legyen. -
lanszelot
addikt
de láthatod, hogy az enyém nem működik
Amúgy a tied nem gomb, csak kép
codepen -ről van a kép, tehát ott is dobja a hibát
a kép az csak szedtem a netről /enyémet nem tudom hova tölteni, mindegy milyen png-t dobok be, van amikor a sima szövegeken is ezt csinálja, de ott nem mindig./js ben nincs hiba, ott nem tudom hogyan kell megoldani, nem tudok mit megosztani, már írtam, mert nincs mit. hiszen nem tudom hogyan kell megcsinálni, de leírtam mindent hozzá, mást nem tudok/
-
Taci
addikt
válasz
lanszelot
#2574
üzenetére
Frissítettem a kódot, szépen látszódik az általad használt png fájl mögött is minden:
[link]A JSFiddle-kódot pedig úgy tudod megosztani, hogy bal felül a Save gombra kattintasz, aztán megint a Save-re. Ha ez megvan, akkor a böngésző címsorában ott lesz a kódodhoz tartozó link, azt másold be ide, hogy rá tudjunk nézni. (És ezt csináld meg szerinte a JS topikban is, hogy lássuk a problémát ott is.)
-
Mr. Y
őstag
Üdv mindenkinek. Létezik egy fajta formázás, ami az alábbit eredményezi:
Én ezt szeretném megvalósítani, csak nem képpel, hanem egy külön álló DIV segítségével (vagyis az menne a kép helyére és azt szeretném feltölteni tartalommal). Azonban ezt formázást eddig csak képpel találtam meg és az ott megadott paraméterek nem működnek, ha DIV-et használok. Egy gyors példa:
Van arra mód, hogy ez működjön?
-
Taci
addikt
Eddig nem tudom, miért nem jutott eszembe, hogy van külön CSS topik is..
Bár ahogy látom, elég nagy az átfedés a topikok között a lakók tekintetében. De akkor ez a kérdés ide való, itt is felteszem akkor:
https://codepen.io/pasztorlaszlo/pen/oNYEOWd
Itt esetleg ötlet, hogy miért nem működik fentről lefelé irányú beúszás (top: -300px --> top: 0px), és a lentről felfele irányú kiúszás (top: 0px --> top: -300px)? Az átlátszóság (opacity) változtatását szépen megcsinálja, a top-ot viszont nem, pedig ugyanabban a blokkban van. Nem értem. Mi akadályozza?
Köszi.
-
martonx
veterán
"JsFiddle-ről annyit találtam, régebben problémái voltak a kódmegosztással - kinőtte a spam problémáit?"
??? ez mindig is kimondottan a kód megosztásra volt kihegyezve. Milyen spam problémái vannak???
Egyébként meg nem találni kéne ezt-azt, hanem venni a fáradtságot és kipróbálni, majd rögtön utána homlokra csapni, hogy miért nem ezt használtam eddig példa kódok megosztására
Egyébként ugyanazt tudja a codepen és a jsfiddle, nekem édes mindegy melyiket használod, az a lényeg, hogy a legközelebbi kérdésednél ott legyen a jsfiddle / codepen példa kódra mutató link -
Mr. Y
őstag
A JsFiddle hibátlan mindenre, ami a HTML, CSS és JS triót nem növi túl. Még csak regisztráció sem kötelező, bár annak is vannak előnyei. Ha ott megcsinálsz egy kódot, elég egyszer rányomni a futtatásra és módosul a linkje. Azt a linket kell megosztani és máris láthatja mindenki. Ha módosítják, új URL keletkezik, így az eredeti kódod az eredeti linken sértetlen marad.
Ennél jobbat én még nem találtam erre a feladatra. -
coco2
őstag
válasz
martonx
#2557
üzenetére
Köszönöm a tippeket, felvéstem magamnak. Codepenre rákerestem, facebook reg után azonnal emailt ellenőrizni akart, tiltottam is kifele (nem kérek spamot). Majd legközelebb újra engedélyezem. JsFiddle-ről annyit találtam, régebben problémái voltak a kódmegosztással - kinőtte a spam problémáit?
-
martonx
veterán
"Jelen esetben amúgy mit segítettek volna?"
Ezek interaktív kód szemléltető eszközök, nem pedig fejlesztő eszközök.
Jelen esetben annyit segítenének neked, hogy nem ide PH-ra szerencsétlenkeded be a kódod, amire így garantáltan nem nézek rá (és mások se, szerencsédre volt egy topiklakó, aki vállalta az extra erőfeszítést ).
Hanem részedről pont ugyanennyi energia befektetéssel azokba rakod be a kódod, és az rögtön kipróbálható, nyomkodható, módosítható bárki által. Ergo kb. 10-szer nagyobb eséllyel venni fogja valaki a fáradtságot, és segít neked.
Azaz ez nem csesztetés, egyszerűen a saját érdekedben tedd meg, hogy SOHA TÖBBSZÖR nem ide teszed be a kódot, hanem jsfiddle-be / codepen-be. -
-
-
nevemfel
senior tag
Ilyesmire gondoltál?
<!DOCTYPE html><html><head><style>.container {position: relative;height: 150px;width: 150px;z-index: 0;outline: 8px solid #000000;}.piros {position: absolute;right: 0;top: 0;height: 100px;width: 100px;z-index: 2;outline: 8px solid #fb0e03;}.kek {position: absolute;right: 0;top: 0;height: 100px;width: 100px;z-index: 3;outline: 8px solid #0e03fb;}</style></head><body><div class="container"><div class="piros"></div><div class="kek"></div></div></body></html> -
coco2
őstag
Sziasztok!
Kezdők css problémáival küzdök. Bekoppantom a html-t egészben:
<!DOCTYPE html><html><body>
<div style="position:relative;height:150px;width:150px;z-index:0;outline:8px solid #000000;">
<div style="position:relative;height:100px;width:100px;z-index:2;outline:8px solid #FB0E03;float:right;"></div>
<div style="position:relative;height:100px;width:100px;z-index:3;outline:8px solid #0E03FB;float:right;"></div>
</div></body></html>(A prohardver kódformázása nagyon pocsék, inkább nyersen hagytam.)
Ezt terveztem látni eredményképpen:
De helyette ezt látom:
Egymásra akarom rakni azokat a div-eket, mert a majdan bennük lévő tartalom kell nekem animációhoz. Z-indexekkel állítanám javascriptből mikor mi legyen látható. Kotorászok, mi lehet a baj, de eddig még nem találtam meg. Valami tipp / blog link jól jönne.
Köszönöm
-
Mr. Y
őstag
Üvd mindenkinek!
Lehet, már volt róla szó korábban, minden esetre megosztom.
Találtam egy Weboldalt, ahol remek CSS példák vannak, forráskóddal együtt. Érdemes rajta böngészni!
-
Mr. Y
őstag
Sziasztok!
Bízom benne, hogy jó helyen járok. Adatik a gondolat, hogy formázom a csuszkát (
overflow). A baj csak az, hogy nem találok egyetlen értelmes példát sem a neten.
Az alapértelmezett helyett olyat szeretnék, mint pl a Facebook asztali nézetében a chat-eknél. Csak akkor látszik, ha oda viszed az egeret és akkor is csak egy minimális dolog jelenik ott meg.
Ha jól tudom, akkor eredetileg ez a mobilnézetnek volt a csuszkája. Lehet, most is az, csak át lehet verni a böngészőt, hogy az oldal 1 bizonyos szegletét kezelje úgy?Előre is köszönöm a választ.
Ui.: Pl a Bittorrent-nek is ilyen stílusú a rendes csuszkája.
-
Chrystall
senior tag
válasz
martonx
#2536
üzenetére
Na, csak megszültem a tökéletes, precíz megoldást a gomb méreteken és képernyőkön átívelő megjelenítésére:
https://codepen.io/bencuri/pen/XWjOooX
A ::before checked-hez nem kell az a content pötty meg a méretezés. Csak background, meg belső box-shadow.
Azért arra kíváncsi lennék, hogy miért allergiásak a content property méreteire a mobileszközök, de végülis mostmár ez indifferens.
A vicc amúgy, hogy számos CSS oldal foglalkozik ilyen gombok kreálásával, és a legtöbbnél amit találtam, ott az okoskodás meg a szövegelés, a végén a kód, és voálá, mobilon ugyanúgy a pötty kilóg szélre és kicsi. Tehát úgylátom sokan nem nagyon vették ezt a hibát még észre. Egy értelmes megoldást láttam, amikor radial-gradient-tel kreál a gombba pöttyöt, az mobilon precíz, viszont az meg desktopon csálé kissé. A méret egyezik, de kissé csálé. De vészmegoldásként még tűrhető.
-
Chrystall
senior tag
válasz
martonx
#2536
üzenetére
Ezen felesleges most vitatkozni, hogy a honlap stílusának most úgy általanosságban véve milyen a kialakítása. Ez egy régebbi lapom, eddig minden ment rajta flottul, semmi okom nem volt azt gondolni, hogy pont a gombokkal volna majd baj, vagy egyáltalán bármivel, ugyanis elég egyszerű és amúgy problémamentes lap. Másrészről meg eddig is volt egy űrlap rajta, 123webforms-tól, amin a radio gombok méreteződnek rendesen. Úgyhogy valahogy meg lehet ezt oldani, csak annak a kódját eddig nem bogarásztam, mert az meg végképp egy óriási ezerféle gombopciót felölelő katyvasz. De ezek szerint muszály lesz belerágnom magam, mert ennek a honlapnak a kialakításával jelenleg maximálisan elégedett vagyok, esztétikus, ráadásul ez a fajta design ami nekem van, nagyon idétlen lenne ha nem méreteződne. Persze, máshogy is megoldható lett volna, de csak a gombok miatt erről nem akarok lemondani, mert amúgy meg szuper az egész, és hiányozna.
-
martonx
veterán
válasz
Chrystall
#2535
üzenetére
Még ezeket próbáld ki esetleg: html - Chrome on Android resizes font - Stack Overflow
Ez ilyen tipikus kezdők hozzáállása, hogy amilyen a honlap stílusa, olyat kell csinálni. Eleve ismerni kell a korlátokat, és olyan stílust csináltatni / bevállalni, amit értelmes keretek között meg lehet csinálni, és nem kell hajlítani hozzá a teret.
Én ha meglátok egy olyan stílust, amiben nem natív form kontrolok vannak (némi színezés, lekerekítés persze belefér), akkor vagy erőltetem, hogy változtassanak az elképzelésen, vagy megtöbbszörözöm a szükséges munkaidő ráfordítást, közben jelezve, hogy ennek a pagespeedre, meg még ki tudja mi mindenre lesz negatív hatása, 1-2 böngészőre vállalom, hogy így fog kinézni, semmi garancia nincs arra, hogy mindig mindenhol ugyanez lesz a kinézet. -
Chrystall
senior tag
válasz
martonx
#2534
üzenetére
De én meg említettem, hogy az a baj, hogy a honlapom stílusa olyan, hogy a méretek nem fixek hanem relatívak nagy monitoron. Így nem lehet a Stock gombokat használni, mert a Firefox a stock gombot nem engedi méretezni. Mondjuk most beugrott, hogy akkor mobilra egy külön divből a stock gombok jelennének meg, amíg a teáltalad adott kód rejtve lenne, de ez se igazán jó, mert a viewport eltérések miatt van, hogy a stock gombok mivel nem méretezhetők, túl kicsik egyes mobilokon. Határeset, de ott is kéne a méretezés. Ez egy szép honlap, jó megoldás kellene, nem felemás.
Minden esetre vészmegoldásként max annyit tudok csinálni, hogy hagyom a pöttyöt hogy kitöltse a gombot, és akkor gond megoldva. De egyrészt nem igaz hogy egy szaros méretezhető gombot nem lehet a 21. században csinálni, a másik meg hogy amúgy van egy űrlapom amin jól méreteződik a gomb, majd arról kimásolom és adaptálom a kódot, csak az is ilyen third party űrlap egy tonna kóddal, valahol benne krikszkraksz idevágó részekkel, szóval kihámozni mindent egy év. A tied egyszerűbb meg elegánsabb lenne, csak ez a content dolog, ez kiakaszt.Meg nem is értem miért csinálja ezt a mobil, mikor az emulátorban jó, és így természetesen rá se tudok jönni mi a hiba, mert az emulátorban nem derül ki semmi.
-
martonx
veterán
válasz
Chrystall
#2533
üzenetére
Pont ezért javasoltam a legelején, hogy kár túráztatni magad az ilyen szuper spéci megjelenítésen. Használd a natív rádió gombokat, és voilá.
Mindenesetre, ezzel hátha meg tudod oldani: Browserhacks
Azaz ezekre a spéci esetekre fel tudod készíteni a css-ed, és módosítani kedved szerint. -
Chrystall
senior tag
válasz
martonx
#2527
üzenetére
A multkor segítettél nekem ezzel a kóddal:
http://jsfiddle.net/v3f16xrL/
Már tesztelgettem, és jónak tűnt, de mégis van vele gond. Windowsban Chromeban és Firefoxban jó, és ha ezekben a Vizsgálat funkcióval emulálom mobileszközre szintén jó. Viszont ha konkrétan igazi mobileszközön kipróbálom, nem jó. iPad-en, vagy Samsung Galaxy-n néztem. A gond: minden méreteződik és helyén van ahogy kell, kivéve a kék pötty a gombban. Annál a font-size-t és a line-height-ot figyelmen kívül hagyja a böngésző, és emiatt csálén áll. Valamilyen oknál fogva nagyobb értékeket kell neki beállítani, mint amit te megadtál, és úgy lesz jó. Hiába hogy gépen az emulátorban úgy áll majd csálén, a rendes eszközön nem. Ez azért fura, mert a többi elemhez nem kell nyúlni azokat méretezi ahogy az emulátorban is. Mitől lehet ez? Azért idegesítő, mert pl. régi BlackBerry OS böngészőjében meg nem kell hozzányulni, az méretezi a pöttyöt is rendesen az eredeti kódoddal, így ha átírom, akkor meg ott is rosszul lesz a pötty pozícionálva.
Valami a content-ben szereplő ASCII kód értelmezésével lehet talán? Hogy ha megvan adva a content, akkor azt standard beállítás szerint kezeli, nem számít mit adsz meg stílusban rá?
Valami tipped volna hogy lehet rákényszeríteni a mobileszközt, hogy normálisan kezelje azt a pöttyöt, mint a BlackBerry OS?
-
ace05
senior tag
Helló! Egyenlőre csak gyakorolgatok. A következőt szeretném csinálni. Legyen egy kép baloldalon és középen és mellé szöveget szeretnék ami kép hosszának a közepén legyen. Ezt elértem a következővel:
display: flex;align-items: center;justify-content: center;De a problémám, hogy a szöveget egy sorba írja. Hogy tudnám több sorokba írni a szöveget? A szöveget <p> taggal kezdem.
Köszönöm.
-
martonx
veterán
válasz
Chrystall
#2526
üzenetére
Így már világos, hogy kibökted, hogy Firefox-ban nem működik a mindenhol máshol logikusan működő megoldás.
Esetleg egy ilyen kerülő megoldás? http://jsfiddle.net/v3f16xrL/
Lusta voltam mindenhol a pixeleket vw-kre írogatni, majd megteszed te, ha ez beválni látszik. -
Chrystall
senior tag
válasz
martonx
#2525
üzenetére
Semmi bajom nem lenne a natív radio gombokkal, ha Firefoxban méretezhető lenne. Pont azért van ez a szívás, mert nem lehet. Amúgy már rég túlennék a dolgon. A méretezhetőség az oldalam stílusa miatt meg fontos. Minden méreteződik, csak pont a radio gomb marad pici, ráadásul a rendelési oldalon, amiből a pénzem van. Nagy lábon lövés lenne úgyhagyni.
A @media query nem értem hogy könnyítene a dolgomon. H azt akarom, hogy egy 4K-s és egy sima HD képernyőn is ugyanolyan arányban mérezetten a Scale, akkor pontosan ki kell számolni az értékét, nem lehet viewport értékekkel trükközni. Kell bele pontosan a szám, nincs mit tenni. Hiába írsz bele egy vw értéket nem működik vele.
-
martonx
veterán
válasz
Chrystall
#2524
üzenetére
media query-kről hallottál? Pont erre vannak kitalálva, hogy ne kelljen folyton számolnia szerencsétlen böngészőnek, pláne mobilon.
Továbbra sem értem, hogy 2021-ben miért jó custom css-el szopatni magad, a natív rádió gombok helyett? Ráadásul a natív rádió gomb tök jól tud viselkedni mobilon is, iphone-on is, mindenhol, pont azért mert natív. Hogy nem fog minden létező platformon pont ugyanúgy kinézni? Ki nem szarja le. Ráadásul sokszor a spéci dolgok zavarják össze az egyszeri usert, akik a natív működéshez vannak szokva.
Szóval szerintem továbbra is tök feleslegesen futod a köröket, de te tudod -
Chrystall
senior tag
válasz
martonx
#2523
üzenetére
Csak azért van annyi kód a Codepen-en mert egy templateből van az SCSS, amiben többféle gombvariáció van, és mindnek ebben a stylesheet-ben van a kódja.
Azért lenne jó a Scale, mert van a radio gombon belül az a kis pötty, ami akkor jelenik meg, ha egy gombra rákattintassz és aktív. Na, nekem nem sikerült kiokumlálni, hogy milyen arányban viszonyuljon a gomb méretéhez annak a mérete, úgy hogy mindig pont középen legyen ha méreteződik, és ne félre álljon, mert az idétlenül néz ki. A scale-lel biztos, hogy mindig tökéletes lesz.
A méretváltozás a gombra pedig azért kell, mert olyan az oldalam, hogy akármilyen képernyőn nézed, ugyan úgy néz ki a weblap, ugyanakkorák az arányok, nincs reszponzivitás meg semmi. Méreteződik minden, nem fix semminek a mérete. Így a Scale-ben is mindig változnia kell mekkorára nagyítsa vagy kicsinyítse a gombot hogy az arányok meglegyenek. Ehhez kéne az aktuális ablakméretet beolvasni az SCSS-ben egy változóba "px" unitban, abból már utána ki tudom számoltatni pontosan azzal az aránnyal, amivel az én oldalam méreteződik mekkora legyen a Scale. Na ezt nem tudom hogy kell. Hogy javascriptbe egyáltalán SCSS változót hogy írsz bele, lehet-e egyáltalán. A "vw"-vel nem lehet megcsinálni, mert azt nem írhatom a Scale-be egyrészt, másrészt mivel semmilyen unit nem mehet a Scale-be csak szám, a strip-unit-on át kell futtatnom az értékeket, most az mondom hogy strip-unit(100vw), annak semmi értelme nem lesz, mert nem egy pixelérték lesz a végeredmény, hanem 100. Azzal semmit nem tudok kezdeni. Pixelbeni érték kell, amiből le lehet csapni, hogy px, aztán a kapott számmal már tudnék mahinálni és beírni a Scale-be. Szerintem más út nincs rá, hogy a megfelelő értéket ki tudd számolni a Scale-be. Tudom nyakatekert, de így tökéletes lenne. Viszont már én is unom úgyhogy lehet megoldom sima width meg height: xy vw méretezéssel a gombra, lehet kicsit csálé lesz de ott egye meg mostmár a fene.
-
martonx
veterán
válasz
Chrystall
#2522
üzenetére
És miért kell ez a scale-es méretezős móka? Tényleg mindig pixelre pontosan tudnod kell, hogy mekkora az ablak? Őrületesen háttal ülsz a lovon.
Nem tudom mit csinálsz, de szerintem menjünk vissza az alapokig, és inkább azt írd le, hogy mit szeretnél mindezzel a kavarással? Ennyi css-t egy rádió gombhoz és labelhez még sose láttamPl. egy reszponzív oldalt csinálok, ahol azt szeretném, hogy mobilokon nagyobbak legyenek a rádió gombok.
Szóval valami ilyen módon, légyszi fogalmazd már meg, hogy mégis mit szeretnél csinálni.
-
Chrystall
senior tag
válasz
martonx
#2521
üzenetére
Az nem jó mert a Scale-hez nem lehet megadni unit-ot. Ha Radio Boxot akarok csinálni, csak a Scale-lel lehet egyszerűen méretezni az egész gombot.
De eddig már eljutottam:
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
input, label {
$kepernyo:100vw;
$meret: strip-unit($kepernyo);
transform: scale($meret);}A calcot még nem írtam bele, de majd azt megcsinálom.
Ebbe hogy lehetne megoldani, hogy a $kepernyo értéke az az ablak aktuális mérete legyen? Ne VH hanem px-ben? Hogy lehet az beolvasni? -
-
Chrystall
senior tag
válasz
martonx
#2519
üzenetére
Igen ez nekem is eszembe jutott. Amit nem említettem, hogy olyan a weblap amibe menne a kód, hogy minden elem ami rajta szerepel calc-kal kapja meg a méretét, amit a képernyőméretből számol. Így viszont külön a margókra is most ezt be kell írogatnom. Azt hittem valahogy el lehet érni, hogy a Scale növelje a margót is egyúttal. De sebaj.
Viszont volna még egy kérdésem. Ami a fent linkelt kódban szerepel scaling:
input, label { transform: scale(x);annak is calcból jönne az értéke. Úgy, hogy: (calc(képernyőméret/1366px)). Ebből hogy tudom leszedni a px-et, hogy használhassam ezt a scale-hez?
-
Chrystall
senior tag
válasz
martonx
#2517
üzenetére
Érthető. Hát itt van akkor. Már most az előző problémára találtam megoldást, de hogy lehetne azt megcsinálni, hogy az input és label közötti margó is növekedjen ha Scale értéket állítok a kettőre? Az input meg label scaling a legalján található a CSS-ben:
https://codepen.io/bencuri/pen/NWRMQxj
-
Chrystall
senior tag
Valakinek volna tippje hogy ebben hogy lehetne a radio gombokat és a mellettük levő szöveget középre zárni függőlegesen? Sehogy se sikerül akárhogy próbálom:
<div class="valasztogomb">
<input type="radio" name="slider" id="slide2" checked="checked" data-href="paystandard.html">
<p style="display:inline-block;">Standard
</p>
<br/>
<input type="radio" name="slider" id="slide3" data-href="payregistered.html">
<p style="display:inline-block;">Registered
</p>
<br/>
<input type="radio" name="slider" id="slide4" data-href="paydownload.html">
<p style="display:inline-block;">Download
</p>
<br/>
<br/>
</div>
<div id="down_icon2"><a href="paymentstandard.html"><img src="files/theme/paypaybutton.png"></a></div> -
Menslee
tag
Sziasztok urak!
Egy számomra megugorhatatlan probléma megoldásában kérnék segítséget.
Röviden arról lenne szó, hogy egy szabadulószobákat építő cégnél dolgozom ahol a szobákban az időt, segítségeket, stb egy kijelzőn futó program mutatja a játékosoknak.
Mivel minden szoba más, ezért mindenhol más a "téma".
Eddig egész ügyesen elevickéltem egy régről rám hagyott template segítségével viszont most egy olyan témát kéne megcsinálnom ahol az óra karakterei között nem azonos a távolság.
Az interneten találtam megoldást ami akkor működik ha egy fix szöveg karaktereit kell külön spacingelni, de mivel ez egy folyamatosan változó elem ezért ez nem működik vele.
Most így néz ki a kód:#app .kiosk-client[data-theme^="Casino Heist"]:not(.embedded) .kiosk-timer,#app .kiosk-client[data-theme^="Casino Heist"]:not(.embedded) .escaped {position: absolute;padding-top: 39%;padding-left: 2.8%;font-size: 6em;font-family: 'HoltwoodOneSC';color: #e34e42;text-transform: uppercase;letter-spacing: 0.6em;}
A legjobb az lenne ha a kettőspontot is el lehetne tüntetni, ezt próbáltam úgy hogy a ttf fájlból ami a betűtípust adja kitöröltem egy szerkesztővel, de nem sikerült.
Előre is köszönöm ha tudtok segíteni -
disy68
aktív tag
A grid-hez nemcsak a calc-ra nincs szükség, de media query-kre sem feltétlen a responsive layout-hoz. Itt egy cikk erről.
Persze használhatod őket, pláne ha el szeretnél valamit tűntetni, mert a különböző grid leírók nem fognak eltűntetni semmit, hanem a definíció által nem ismert területeket layout után fogja a böngésző megjeleníteni (ezért kerül az aljára nálad). Itt egy másik cikk, ami egy hasonló layout-ról szól, mint a tied különböző módszerekkel. Ez alapján itt egy kis minta media query-kkel, a jobb sávot eltűnteti 400px alatt. Változó borderek, grid-gap, nincs calc.
Szerintem olvasgass még kicsit a css grid témában lehet találni hasonló irományokat, amikből további ötleteket kaphatsz még.
-
Reflax
tag
Ha mindenképp gridelgetni akarok akkor kell calc? Mert ugye azt szeretném, hogy a bal oldal azok egy egy list type:none-os boxok lesznek css-el keret, háttér,. és igazítás. A középső elem bekezdéséhez az igazítást hogy lehetne megoldani akkor is ha változik kicsit az oldal? Valamint a táblázaton belül nem tudom megoldani az első kép formázását
Van 3 nézet benne. Tablet illetve telefonos nézetben már szeretném a bal oldalt eltüntetni, amit elvileg meg is oldottam (ám a gridelgetéás közben valamiért ha kihagyom a bal oldalt az elrendezésben, olyankor nem eltűnik, hanem konkrétan leugrik a kijelző jobb alsó részére, amit nem értek mitől lehet) Hiszen ha grid-ben megadom a sorokat, hogy melyik oszlop jelenjen illetve kihagyom azt, ami ne jelenjen meg, akkor annak el kéne tűnnie, nem?
állati a porfilavatarod
-
disy68
aktív tag
Na ez még továbbra is kicsit kaotikus
Azt látom, hogy valami grid irányba indultál, de rengeteg minden van még a css-ben, amire nincs szükség, illetve kissé wtf
pl:.boxes :nth-of-type(2){margin-bottom: 200%;}.boxes :nth-of-type(3){margin-top: 300%;}Amire érdemes figyelni, hogy a böngészők egyes html elemekre használhatnak alapértelmezett css beállításokat, amik nem várt mellékhatásokkal járhatnak. Az egyik ilyen a html és body elem padding/margin értéke. Ezeket érdemes kapásból 0-ra állítani.
html, body {margin: 0;padding: 0;}Illetve léteznek összeszedett css-ek, amik minden hasonlót törölnek, de ezek tartalmazhatnak olyat is, ami nem feltétlen szükséges, szóval egyelőre csak említés szintjén jegyezd meg.
Én személy szerint nem foglalkoztam még a grid layout-tal csak flexbox-szal, amire martonx #2500 is linkelt egy remek összefoglalót. Ennek (is) a lényege nagyvonalakban, hogy oszlopokba és sorokba rendezed az oldaladon az elemeket és ezeket aszerint rendezed, növeled/csökkented, ahogy azt szeretnéd és nem kell foglalkoznod százalékokkal border/margin/padding kalkulációkkal.Nálad ez kb így kéne kinézzen (ahogy én csinálnám, pszeudó-akármivel leírva, zárók nélkül):
<body> - flex parent (column)<header> - flex item<div> - flex item ( és flex parent (row))<aside> - flex item /bal menü/<main> - flex item /content/<aside> - flex item /jobb infó sáv/<footer> - flex itemSzóval én a két oldalsó navigáció és infó sávot egy közös szülővel fognám össze a main elemmel. A jsfiddle példában pedig elég a body-n belüli rész a tartalomhoz btw.
Én azt javaslom, hogy dobj ki minden formázást és kezdd el előről felépíteni a fő elemeket és utána a többit. T J #2502 javaslata is működik a calc használatával, de mivel most tanulod a dolgot, lehet jobban jársz, ha valami aktuálisabbal kezded inkább, arról nem beszélve, hogy leegyszerűsíti és átláthatóbbá tudja tenni a css-t, ami sose baj
-
Reflax
tag
Nos én átszerkesztettem a html-t és a css-t, így ez jött ki jelenleg
Kérlek tekintsétek meg és szívesne fogadok észrevételt még és kritikát!
siteaz általad említett dolgok előtt csináltam még ezt mi előtt felnéztem ide. Természetesen még sok javítani való van rajta ez tuti látszik.
-
T J
tag
Nem kell ide mágia, csak normálisan megírt kód. Összeadtad a szélességeket? Mert ilyeneket írtál az elsőben, hogy: .left{width:20%;} .center{width:50%;} .right{width:290%;}. Ráadásul kétszer formázod a .right-ot, és a másodikkal felülírod az elsőt ...
Tíz percig görgettem, mire megtaláltam, miért nem működik amit feljebb módosítottam.
Minden divnek van szélessége, magassága (jobb híján height:auto; ), és elhelyezése (float: left; ). Amíg ezek nincsenek megadva, nem kerülnek a helyükre! Az egy sorba kerülő divek össz szélessége max 100%, marginnal, borderrel együtt. Ezek vastagsága hozzáadódik az elem szélességéhez!!! Ezért ellenőrzéshez inkább eltérő háttérszínt adj meg border helyett, és ha margint adsz, akkor annak a szélességét egyből vond is le az elem szélességéből, pl: margin-left: 2px; width: calc(50% - 2px);
Az elemek formázását sorrendben, fentről lefelé, és balról jobbra, sorrendben, ahogy a html-ben szerepelnek. Különben nem fogod megtalálni, és katyvasz lesz az egész.
Ne fixálj olyan tartalmat ami nem fér el magasságba a kijelzőn, mert a kilógó rész rejtve marad.
![;]](http://cdn.rios.hu/dl/s/v1.gif)
pl:
Új hozzászólás Aktív témák
- BESZÁMÍTÁS! Sapphire Nitro+ RX 7900XTX 24GB videokártya garanciával hibátlan működéssel
- Honor Magic7 Lite 512GB, Kártyafüggetlen, 1 Év Garanciával
- ÁRCSÖKKENTÉS Menő retró konfig: Q9550, Gigabyte P43, 4GB RAM, ASUS GT730
- Xiaomi Redmi Note 14 5G 256GB, Kártyafüggetlen, 1 Év Garanciával
- ÁRGARANCIA!Épített KomPhone i9 14900KF 32/64GB DDR5 RAM RTX 5070 12GB GAMER PC termékbeszámítással
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft.
Város: Budapest
Cég: FOTC
Város: Budapest