- Érkezőben a Poco M6 4G
- Ezek a OnePlus 12 és 12R európai árai
- Honor Magic5 Pro - kamerák bűvöletében
- Yettel topik
- Android alkalmazások - szoftver kibeszélő topik
- Késik a következő S24 Ultra kamerafrissítés?
- Samsung Galaxy Watch6 Classic - tekerd!
- Milyen okostelefont vegyek?
- Redmi Note 13 Pro+ - a fejlődés íve
- Apple iPhone 13 - hízott, de jól áll neki!
Hirdetés
-
AMD Radeon undervolt/overclock
lo Minden egy hideg, téli estén kezdődött, mikor rájöttem, hogy már kicsit kevés az RTX2060...
-
Olcsó 5G-s ajánlatot nyújt a Realme Indiának
ma Megérkezett a Realme C65 5G, az első készülék a MediaTek Dimensity 6300-zal.
-
Rossz üzlet az EV-kölcsönzés
it Küszködik az EV-kölcsönzés miatt a Hertz Global, még több EV-t adnak el.
Új hozzászólás Aktív témák
-
Zedz
addikt
Itt egy link, én így csinálnám.
Ilyeneket nem nagyon szoktak <span> közé rakni, hanem inkább akkor használják ha valamit ki akarnak emelni a környezetéből és megformázni, mint példaul amit linkeltél oldalon az O betű esete. Ezért kicsit átvariáltam a HTML kódod, illetve a CSS-t is.
Azért nem volt egy vonalban, mert a listának alapból van marginja, ami letolja az egész listát. Ezért vettem le a CSS elején minden elemről a margint, paddinget.
Ha JSFiddlén megy, akkor szerintem éles környezetben is mennie kell. Nem lehet, hogy még a cachelt CSS-ből dolgozik a böngésződ? Ctrl+F5-tel tudod ezt üríteni.
-
adam_
senior tag
Mit gondoltok, ez jól összefoglalja jól a frontend skilleket? Tudom, hogy már korábban írtatok ezekről, de azért ezt még megkérdezném. Pl, hogy a JQuery már "annyira nem a legfontosabb" megtanulni való dolog, ha valaki a jövőben Frontendesnek készül... azon kívül a korábbi írásokból leszűrve a többi helytálló nem?
Upd.1: Még egy jó kis cikk a témában. Még ebből a cikkből kiemelném, hogy Knowledge of animation tools like Flash, tehát a Flash még pluszban manapság fontos, ha valaki Frontendes?
[ Szerkesztve ]
-
Zedz
addikt
Őszintén szólva még nem használtam ezt a megoldást, de a cikk alján a browser support szerint ezt csak az újabb böngészők fogják szeretni.
A front-endes kérdésedre csak részben tudok válaszolni, én is csak egy lelkes kezdő vagyok ilyen téren. Szerintem próbáld meg minél mélyebben elsajátítani a JS tudásod. Lehet, hogy csökken a jQuery népszerűsége, azonban olyan álláshirdetést még nem láttam, ahol ne kérték volna. Tudnod kell reszponzív megjelenést csinálnod, illetve törekedned kell arra, hogy minden böngészőben megfelelően jelenjen meg az oldal. Ezek mellett persze nem árt ha konyítasz valamit a szerver oldalhoz is!
Persze maga a front-end ennél egy bonyolultabb és több rétűbb dolog, de nem akarok sok sületlenséget összehordani itt!
-
fordfairlane
veterán
Viszamenőleges kompatibilitás szempontból a következő a helyzet, nagyon leegyszerűsítve:
A legrosszabb a grid, utána a flexbox, majd az inline-block végül a float - clear, illtve legutolsóként a table-layout. Nem véletlen, hogy a css frameworkok, mint pl. a bootstrap, float-okat használ a layout-grid rendszer lérehozásához. Persze kényelmi szempontból a grid a legjobb, meg a flexbox, utána a többi, és kábé a végén a layout table és a float.[ Szerkesztve ]
x gon' give it to ya
-
adam_
senior tag
válasz fordfairlane #1506 üzenetére
Köszönöm az eddigi tippeket.
Itt a linkekkel ellátott box2-t miért nem helyezi egy szintbe a többi box elemmel?
[ Szerkesztve ]
-
adam_
senior tag
Mennyire célszerű, javasolt pl. egy footert float: left és position: absolute - relative kombó megoldásokkal megvalósítani? Ez a kevert módszer mennyire javasolt, ha arról van szó, hogy "szép kódot" csináljunk, ami átlátható és bevált? Például ilyen felállásban? Most csak úgy kísérletezgettem..
[ Szerkesztve ]
-
adam_
senior tag
Valamint még ehhez a Spriteos megoldáshoz lenne egy függőben lévő kérdésem. Hogyan tudnám megadni a linkekhez tartozó szövegek pozícióját? Gondolok itt arra, hogy "Mikulás, Télapó, Virgács" szövegeket nem a figurák fejénél, hanem mondjuk a lábához hogyan tudnám helyezni? Akár úgy, mint a abszolút pozíciónálásnál top,left,bottom,right értékekkel is meglehetne, vagy center, top, bottom és hasonló értékek adhatóak csak meg?
Előre is köszönöm az észrevételeket és az esetleges javítást JSFiddleben.
[ Szerkesztve ]
-
adam_
senior tag
válasz PumpkinSeed #1512 üzenetére
.. és köszi a transition: 1s; tulajdonságot is, így picivel szebb az áttűnés.
-
DNReNTi
őstag
Mennyire célszerű, javasolt pl. egy footert float: left és position: absolute - relative kombó megoldásokkal megvalósítani?
Nem igazán értettem mit is értesz ez alatt, míg meg nem néztem a kódot. Ezt így ahogy megcsináltad semmiképp nem javaslom. Több okom is van ezt mondani:
1. Azonosítókat (id) használsz feleslegesen. Használj osztályokat, semmi sem indokolja, hogy ne tedd, amellett, hogy jobb megoldás, olvasmányosabb lesz a kód és megúszol egy kazal duplikációt.
2. Teljesen szükségtelen a csomó float, és abszolút pozíció. Amellett, hogy szükségtelen ráadásul meg is bonyolítod vele a saját dolgodat. Abszolút pozit ott használj, ahol szükség van rá (pl: egy popup "ablak").
Akkor hogy kéne?
Így. Ha megnézed lényegesen egyszerűbb a kód. Emellett hatékonyabb is. Megszűntek a duplikációk. A négyzetnek nem tudom mi volt a funkciója. Kivettem.(#1511) adam_
Erre, ahogy már PumpkinSeed írta, a padding a legegyszerűbb megoldás, de szebb ha csak felső (és esetleg alsó) padding van beállítva, a szöveg pedig középre igazítva. Így megoldott az is, hogy horizontálisan is középre legyen igazítva. A legszebb az lenne, ha vertical-align attribútummal oldanád meg, de ezt nem javaslom, az egész nem ér annyit, hogy azzal szívj.but without you, my life is incomplete, my days are absolutely gray
-
adam_
senior tag
válasz DNReNTi #1514 üzenetére
Köszönöm válaszod.
De pl. egy ehhez hasonló header + menüsávot érdemes kialakítani inline-block és abszolút-relatív viszony kombival? Valahogy így gondoltam:
[link]Még ehhez kapcsolódva. Hogyan tudnék a menüelem közé mint az eredeti linkelt oldalon nagyon halvány színű fehér bordert tenni? Ha ráteszek az a vagy li elemre mondjuk, akkor elcsúszik az egész border...
[ Szerkesztve ]
-
DNReNTi
őstag
Nem jól közelíted meg.
Egy, bár ez nem szorosan ehhez kapcsolódik: még mindig feleslegesen használsz azonosítókat (id), ráadásul így: div#header, kár megadni. Egy azonosítóból egy van az oldalon (ha minden jó), tehát felesleges úgy definiálni, hogy az csak bizonyos típusú elemre vonatkozzon, úgyis csak egy lesz belőle. Nem lesz egy div meg egy p is #header. Nem lehet.
Kettő: <span id="H1_Adam">Adam</span> <h1> Varga </h1>.
Wat?! Ne így, ez teljesen feleslegesen bonyolult. A jó megoldás: <h1><span class="akarmi">Adam</span> Varga</h1>. A header-ek használata fontos SEO szempont, így érdemes őket jól használni, ráadásul így megspórolsz megint egy vagon CSS kódot.
Három: Ezzel az abszolút pozicionálással csak magadat szívatod. Mint írtam má': csak ott használd ahol kimondottan szükség van rá. Ez esetben nincs. Itt is meg lehet oldani, kicsit ügyeskedve, sokkal szebben és jobban. Íme leegszerűsítve.
Négy: Menü elemhez egyszerűen pedig csak beállítasz egy jobb oldali keretet, (vagy hátteret odaigazítva), a :last-child selector-ral pedig az utolsón felülírod arra hogy nincs. Erre egy korábbi példát átírtam: Csekk.Tudnék még kötekedni, de nincs rá időm.
Látszik, hogy megvannak az alapok, de hiányos kicsit. Lásd pl ez az erőltetett azonosító használat. Azért hajrá, nem el akarom venni a kedved, de egy két beginner doksi az elméletről jót tenne hidd el.but without you, my life is incomplete, my days are absolutely gray
-
honda 1993
senior tag
Sziasztok.
Elore mondom, hogy azert nem kuldok jsfiddle peldat mert fura modon ott mukodik, amit kerdezni akarok, csak nalam van valami baja.
Szoval van egy lenyilo menum. ( eddig semmi baj nem volt vele)
De most azt csinalja, hogy miutan lenyilt es elkezdek rajta lefele lepkedni, a 4. menupont utan nem enged tovabb.( ezt ugy ertsetek, hogy szepen lepkedek lefele, majd a 4. menupont utan ha lejjebb akarok menni akkor egyszeruen bezarja a lenyilo menut.) Majd ujbol lenyitom, es elkezdek lefele lepkedni, es a 4. menupont utan ugyan ezt csinalja.Megneztem a kodot es semmi baja nincs, viszont fogalmam sincs hogy mi lehet a baja.
Ti talalkoztatok mar ilyennel?
[ Szerkesztve ]
XD alias IKSZDé
-
PumpkinSeed
addikt
válasz honda 1993 #1517 üzenetére
Ez valami olyasmiért lehet, hogy a lenyíló menü height része nem elég ezért amúgy kilóg, róla a content, de mégis kicsi a height. Nézd meg ezeket és ott keresd a hibát, kód nélkül nem hiszem, hogy többet lehetne tudni.
"Akinek elég bátorsága és türelme van ahhoz, hogy egész életében a sötétségbe nézzen, elsőként fogja meglátni benne a fény felvillanását." - Kán
-
DNReNTi
őstag
válasz honda 1993 #1517 üzenetére
"Megneztem a kodot es semmi baja nincs, viszont fogalmam sincs hogy mi lehet a baja."
Érzed az anomáliát?but without you, my life is incomplete, my days are absolutely gray
-
Zedz
addikt
válasz honda 1993 #1517 üzenetére
Ami JSFiddlen működik annak szerintem mennie kell nálad is... Szóval kérjük szépen azt a kódot, hátha találunk benne valamit.
-
honda 1993
senior tag
Koszonom a valaszokat, de ma sikerult rajonnom.
Az volt a baj, hogy a menu alatti elemek egy <div id="box"></div> -ben vannak, Es a border szine megegyezett a container szinevel, igy pedig nem lattam azt.
Tehat nem vettem eszre, hogy a lenyilo menu fele belelogott a box border reszebe.XD alias IKSZDé
-
DNReNTi
őstag
válasz honda 1993 #1522 üzenetére
Szerencsére van a böngészőben devtool, így ha esetleg ilyen előfordul 2 mp alatt meg tudod nézni mi lehet az oka. Jobb gomb -> Inspect element. De szerintem korábban már javasoltam neked.
but without you, my life is incomplete, my days are absolutely gray
-
adam_
senior tag
válasz DNReNTi #1516 üzenetére
Köszönöm szépen a korrekciót, és az észrevételeket. Igen, néha eléggé túlbonyolítom a dolgokat, de ez csak idővel jobb lesz. A linda.com féle gyakorlati videósorozatokat csinálgatom egy-két hónapja, végig CSS témában, majd utána térek majd rá JS-re. Jövőre pedig mint már írtam két hónapos intenzív kurzuson is részt vehetek, szóval elszánt vagyok.
-
DNReNTi
őstag
Látszik, hogy nem vagy vakon a témában, sőt többnyire meg is tudod csinálni amit meg akarsz. Azért javaslom, hogy az alap elméletekkel ismerkedj meg, mert a saját dolgod fogod vele megkönnyíteni. Lásd, pl a sok felesleges duplikáció a minap, vagy a fő struktúra abszolút pozicionálása, amit el lehet felejteni így a "responsiveőrület" időkben. Így, hogy már némi gyakorlatod, rálátásod van a dolgokra, az elméleti rész nem fog gondot okozni.
but without you, my life is incomplete, my days are absolutely gray
-
adam_
senior tag
válasz DNReNTi #1526 üzenetére
Az a baj, hogy pl. a különböző videósorozatokban is mindig egy picit más van elméleti témában, innen is vettem pl. a div#header selector-t mivel az egyik helyen így írták, a másikon meg csak simán #header...-t alkalmazott a docens. De idővel bízom benne, hogy majd ez is rendszereződik.
Igen, gyakorlásképpen sokszor kinézek egy honlapot, ami megtetszik, és próbálom lemásolni. Ez általában sikerül is, viszont ahogy írtad a kód, az "nem túl szép". Ami elsőrendű lenne, na most ezen dolgozom még egy kicsit.
Mit gondolsz, egy "erős" CSS tudással térjek majd csak rá JS tanulásra / vagy a LESS-SASS kombóra?
[ Szerkesztve ]
-
fordfairlane
veterán
Én sem ajánlom a CSS preprocesszorokat. Ahogy én látom, egyelőre messze nem olyan mértékű a CSS komplexitása, hogy ezt tovább kelljen vinni. Első körben kerülj képbe az alapvető kliensoldali és szerveroldali technológiákkal, az ilyen build eszközökkel ráérsz később is foglalkozni. Amíg egyszerű az oldal, és nincs rutinod a használatukban, addig inkább csak hátráltatnának.
[ Szerkesztve ]
x gon' give it to ya
-
DNReNTi
őstag
Szerintem nincs ilyen menetrend. Ahogy haladsz úgy lesz szükséged egyre több mindenre. Ha már muszáj ilyen rendszert felállítani, akkor előbb lesz szükséged JS-re mint preprocessor-ra. Sőt. Még a szerveroldallal is hamarabb fogsz találkozni, mint hogy SCSS-t kelljen használnod.
Szerk:
Azigen. Úgy látom ez eldőlt. 3:0 ide.[ Szerkesztve ]
but without you, my life is incomplete, my days are absolutely gray
-
adam_
senior tag
Szuperek vagytok! akkor next stop is JS!, majd kis PHP-zás, hogy a szerver oldalhoz is legyen rálátásom.
[ Szerkesztve ]
-
adam_
senior tag
A hyphens tulajdonságot javasolt használi, illetve "bevált" szokás a használata, vagy inkább ezt JS-el oldjátok meg? Mivel ebben a közel féléves cikkben, és más forrásokból is olvastam már, hogy a böngészők támogatottsága még nem az igazi kifejezetten a hyphens CSS-es megoldásánál.
[ Szerkesztve ]
-
DNReNTi
őstag
Én még csak nem is hallottam róla eddig. Beváltnak biztos, hogy nem bevált, figyelembe véve a browser support-ot. Kimondottan erre a feladatra én sose használtam semmit, nem is feltétlen látom indokoltnak.
but without you, my life is incomplete, my days are absolutely gray
-
adam_
senior tag
Köszi, akkor ezt túltárgyaltuk.
-
adam_
senior tag
válasz fordfairlane #1536 üzenetére
Most már teljesen világos, hogy miért nem javasolt ezt még használni.
-
Zedz
addikt
Szeretnék az egyik oldalamon egy nem "gyári" betűtípust használni. Először Google fonts-ról linkeltem be a kívánt font készletet, ez Chromeban tökéletesen is működött, de mikor megnéztem FF-ben és IE-ben, akkor láttam csak, hogy az Ő betűvel gondok vannak, nem renderelik le szépen. Sebaj mondom, Font Squirrelről leszedem, és majd @font-face-el szépen behúzom. A gond az, hogy így már Chrome-ban sem jó, pedig az FS-en található kipróbálási lehetőségnél az Ő betű tökéletesen megjelenik, mind a 3 böngészőben.
Találkoztatok már ilyennel? Ezt hogyan lehetne megoldani?
-
Zedz
addikt
válasz fordfairlane #1540 üzenetére
Erről lenne szó. Támogatja a magyar karaktereket, a Test Drive szerint is mennie kellene, de az oldalon valamiért csak sima Arial lesz az Ő betű.
-
fordfairlane
veterán
Rákattintottam a linkre, kiválasztottam a webfont kit fület, a subsetet hungarianra állítottm, és letöltötem a zipet. A zip-et kicsomagolva a teljes opensans készlet benne van, én csak a light-ot próbáltam. Generál egy példa html-t, ebbe belenyúltam, hogy legyen benne őŐűŰ, és nekem így oké Firefoxban, Chorme-ban és IE-ben is. Legközelebb linkeld légyszi a Google webfontot, hogy ne kelljen ennyit szöszmötölni a teszteléssel.
x gon' give it to ya
-
Zedz
addikt
válasz fordfairlane #1542 üzenetére
Óóó a subsetet nem állítottam át, köszönöm a segítséget! Azért nem a Googlet linkeltem, mert ha onnan le is szedem, az csak TTF-et tölt le. Fontmókusról pedig lejön minden ami kellhet.
-
fordfairlane
veterán
A Google-t nem kell letölteni, egyébként ennyi az egész:
Itt becsekkolod a "Latin Extended (latin-ext)" opciót, és alul a hivatkozásban egyből látszik is.
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
x gon' give it to ya
-
Zedz
addikt
válasz fordfairlane #1544 üzenetére
Minden nap tanul az ember, köszi még egyszer! Amúgy én inkább letöltöm a fontokat. Tudom, nem sok idő lehúzni a Google szerveréről sem, viszont találkoztam már olyannal, hogy folyamatosan töltött az oldal, lent pedig írta, hogy a Google fontsra vár.
-
adam_
senior tag
A Bootstrap-el mennyire érdemes foglalkozni, és ha igen, milyen szintű CSS és HTML tudással érdemes hozzákezdeni, milyen tudásszinttől könnyíti meg a honlap elkészítést?
[ Szerkesztve ]
-
adam_
senior tag
Összeírtam, hogy milyen sorrendbe tanulom a dolgokat, persze néha párhuzamosan ismerkedem újabb CSS okoságokkal is JS-el is, de nagy vonalakban így haladok:
- HTML5
- CSS3
- Javascript - JQuery
- Bootstrap/AngularJS (Framework)
- SASS/LESS (Preprocesszor)
- PHPMost körülbelül a HTML5 és CSS3 határain vagyok, és elkezdem az alapoknál a JS-t. Emelett ismerkedem mint már írtam a Frameworkökkel, most speciel a Bootstrap 3-as verziójával. A végére szeretném hagyni a SASS/LESS kombót * és a PHP alapokat. Megkérnélek titeket, hogy erősítsetek meg, avagy cáfoljátok, hogy jó "skilleket" tanulok sorban ahhoz, hogy a későbbiekben Frontend webfejlesztő legyek, vagy mivel egészítenétek még ki? Pusztán csak szeretnék visszaigazolást nyerni a szakmában dolgozó emberektől, hogy majd naprakész tudással léphessek a munka frontjára.
Ezért is előre, és a korábbi értékes hozzászólásokért nagy köszönettel tartozom felétek!
* Korábban írtátok, hogy a SASS/LESS ugyan fontos, de pár hozzászólással korábban inkább arra "buzdítottatok", hogy CSS, és HTML tanulás után inkább JS-el ismerkedjek, majd ha már mind a három nyelv profin megy, akkor jöjjön a SASS avagy LESS.
[ Szerkesztve ]
-
Jim-Y
veterán
Szia,
Szerintem jó sorrendben tanulod a dolgokat, nincs vele gond.
Pár megjegyzés:
- majd inkább a Javascriptet értsd meg alapjaiban jól, mint a JQuery-t vagy az Angular-t lévén mindkettő a vanilla JavaScripten alapszik, így én azt mondanám, hogy egy 20-as időbeosztás skálán 3 JQ - 3 Angular - maradék sima JavaScript legyen. De ez az én véleményem, ami a tapasztalatomon alapszik. Library-k/Framewrokök jönnek-mennek de a szülő nyelv az mindig ugyanaz.
- majd ha elértél a végére, akkor szerintem a PHP-re se fektess feleslegesen sok energiát, inkább csak annyit, hogy a nyelven keresztül meg tudd tanulni a programozás alapjait. OOP ilyesmik.. a szokásos stack. Helyette ha már az alapok megvannak, akkor próbálj majd ki minél több szerver oldali nyelvet.De amúgy szerintem teljesen jó az összeállítás, hajrá, jó lesz az
[ Szerkesztve ]
-
DNReNTi
őstag
Csak hogy kötekedjek: már korábban is írtam, előbb kell majd szerveroldallal foglalkoznod mint CSS preprocessor-ral, hiába csábító az ismerete. A többi mondanivalómat már Jim összefoglalta.
Off: Jé, ez az 1000. szakmaim, nagyon építő lett.
but without you, my life is incomplete, my days are absolutely gray