- Google Pixel 8a - kis telefon kis késéssel
- One mobilszolgáltatások
- Samsung Galaxy S25 - végre van kicsi!
- Milyen okostelefont vegyek?
- Samsung Galaxy A54 - türelemjáték
- VoLTE/VoWiFi
- Samsung Galaxy S24 Ultra - ha működik, ne változtass!
- Mobil flották
- Android alkalmazások - szoftver kibeszélő topik
- Huawei P30 Pro - teletalálat
Új hozzászólás Aktív témák
-
Taci
addikt
Sziasztok!
Jelenleg egy oszlopban vannak elrendezve a tartalmak az oldalon, de ezt szeretném átvinni (megfelelő oldalszélesség esetén) két oszlopra.
Viszont mivel más-más hosszúságúak lehetnek a title és description részek, ezért nem igazán tudom, hogyan lenne jó "összehozni őket".
Egy példa: https://jsfiddle.net/joa0c794/1/
Így nagyon bután néz ki, nagy üres területek, a column3 átcsúszott balról jobbra... nagyon nem szép. Hogyan lehetne ezeket szépen, rendezve egymás mellé tenni?
Pl. lehet azt valahogy, ha a column1 magasságát kapja meg a column2? És akkor a column3 máris a helyére kerülne. Majd ahhoz kellene igazítani a column4 magasságát.Vagy esetleg azt, hogy ha 2 sornál hosszabb a title, akkor csak 2 sort mutasson, és túlcsordulást vágja le (és ... a végére)? Ugyanígy a description résznél is, csak nyilván több sorra.
Csak aztán itt újra az jön elő, hogy más magasságúak lesznek, és össze-vissza csúszik minden.Se a title se a description nem tőlem jön, külső forrásból, így lehet 1 szavas, 1 soros, de 4 soros is.
Milyen módszerek vannak erre, hogy szép, rendezett legyen a végeredmény?
Köszönöm. -
#2749
Taci
addikt
polymorphin
#2748
Taci
addikt
válasz
polymorphin
#2748
üzenetére
Pedig a Google pont ezt ajánlja: [link]
-
Taci
addikt
Adott a Chrome-os Coverage Report, ami megmutatja, hogy a CSS és JS fájlok melyik részei vannak csak használatban, hogy azokat a <head> szekcióba építve gyorsítani lehessen a betöltést. A többi pedig meg async load-on (preload) keresztül lesz meghívva, így csak a tartalom kirajzolása után töltődik, ezért gyorsabb(nak érződik/látszódik) az oldal betöltése.
Na ezt a Coverage Reportot ki lehet exportálni, ami ad egy .json fájlt.
Ismertek olyan tool-t, amivel össze lehet ereszteni ezt a .json fájlt, illetve az érintett CSS és JS fájlokat, hogy eredményül visszaadja szépen kiszedve, hogy mit kell inline a HTML kódba illeszteni, és mi mehet külön?
Maga a .json fájl -tól-ig szakaszokat tartalmaz, megmondja, hogy az adott fájlban mettől meddig van az a kódrészlet, ami mehet a HTML kódba direktben.
Szóval meg tudom írni én is, de idő, és biztosan van erre már tool, csak én nem ismerem. Kerestem persze, de amiket adott találatnak, nagyon nem működtek megfelelően.Köszi.
-
-
Taci
addikt
válasz
lanszelot
#2725
üzenetére
A div alatt írd át ezt:
border-bottom: 130px solid #FD4602;filter: drop-shadow(20px 0px #FF6D00);
erre:border-bottom: 130px solid #FF6D00;filter: drop-shadow(20px 0px #FD4602);A div::before alatt pedig ezt:
border-bottom: 130px solid #FD4602;
erre:border-bottom: 130px solid #FF6D00;Vagy ez van meg? Mert akkor nem értem a kérdést.
-
Taci
addikt
-
Taci
addikt
Meg tudnátok mondani, kérlek, hogy itt mi a hiba?
Amilyen működést elvárnék:
Első betöltésnél a Main title és a Subtitle is fekete, a Content kék.
Gombnyomásra a Main title és a Subtitle pirosra vált, a Content zöldre.A gombnyomással nincs baj, viszont valamiért a h2-es Subtitle a body.color1-ből veszi a színt, és nem bírok rájönni, miért.
A JS része igazából lényegtelen is. Anélkül is ugyanaz a hiba:
JSFiddle (csak HTML és CSS)Meg van neki mondva, hogy a h2-es és a h6-os is legyen fekete:
h1, h2, h3, h4, h5, h6 {color: black;}Mégis máshonnan veszi a tulajdonságot:
body.color1 h1, h2, h3, h4, h5, h6 {color: red;}De a H1-nél meg jó.
Miért csinálja ezt?
Köszi. -
Taci
addikt
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.
-
Taci
addikt
válasz
martonx
#2690
üzenetére
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étesikSzó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. -
Taci
addikt
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?
-
Taci
addikt
válasz
gabor128
#2686
üzenetére
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.
-
Taci
addikt
válasz
gabor128
#2682
üzenetére
Gyorsan eredményre (látható, kész, szép weboldalra) leghamarabb WordPress-szel jutsz (saját topikja: [link] ). Azon belül pedig valamilyen erre kihegyezett rendszerrel, mondjuk a Divivel: [link] vagy az Elementorral: [link] .
Nézd meg őket, mit tudnak, alap weblapok gyors és igényes összerakásához passzolnak.Ehhez kapcsolódó megrendelésekért pedig nézz szét előbb a környezetedben, csinálj pár demó oldalt, mutasd körbe, menj direktben kisebb vállalkozásokhoz, cégekhez, ismerősökhöz, aztán hátha elindul a dolog valahol.
-
Taci
addikt
válasz
gabor128
#2679
üzenetére
Ha megnézed, egy egyszerű Google-keresés mennyi de mennyi weblapkészítő vállalkozást dob fel, egyből látni fogod, hogy nagyon de nagyon telített piac. Persze vannak jobbak, rosszabbak, drágábbak, olcsóbbak, de az ilyen szolgáltatást keresők nagyobb része először inkább az árat nézi, és csak aztán a minőséget. (Nincs felmérésem róla, ezt csak így gondolom.) Szóval ha te újoncként akarsz beszállni, akkor vagy nagyon jó minőséget kell produkálnod már az elejétől, amivel kitűnsz a tömegből, vagy a konkurencia alá kell menned árban. Az előbbihez rengeteg tapasztalat, idő és referencia is kell, szóval az elején az nem lesz meg még. Szóval marad az árral való "alávágás". Legalábbis én így látom.
Nem lebeszélni akarlak, mert valahol mindenki elkezdi, de szerintem az nem a helyes hozzáállás ebben a témakörben, hogy ebből már azonnal megélhess. Rengeteg befektetett munka, tanulás, aztán ügyfélszerzés, reklám stb. Biztosan jól és jövedelmezőre is fel lehet építeni, de szinte biztosan nem egyik percről a másikra.
Sok szerencsét és kitartást hozzá!
-
Taci
addikt
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. ) -
Taci
addikt
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] -
Taci
addikt
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á. -
Taci
addikt
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]
-
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.
-
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!
-
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.
-
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.)
-
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.
Szomorú, de vicces.
Új hozzászólás Aktív témák
Hirdetés
- Intel Core i7-8700, i7-9700 CPU, processzor - Számla, garancia
- Csere-beszámítás! Számítógép PC Játékra! I3 14100F / RTX 3060 12GB / 32GB DDR4 / 500GB SSD
- 127 - Lenovo Legion Pro 7 (16IRX9H) - Intel Core i9-14900HX, RTX 4080 (ELKELT)
- ÁRGARANCIA!Épített KomPhone Ryzen 5 7600X 32/64GB RAM RTX 5060 Ti 16GB GAMER PC termékbeszámítással
- Telefon felvásárlás!! Xiaomi Redmi Note 10, Xiaomi Redmi Note 10s, Xiaomi Redmi Note 10 Pro
Állásajánlatok
Cég: PC Trade Systems Kft.
Város: Szeged
Cég: Promenade Publishing House Kft.
Város: Budapest