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.

Köszönöm így már jó. Nem tudom, mi volt az eredeti probléma.

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 ]

Még kapcsolódva a példához egy picikét. Most pl. flexboxos megoldásokkal próbálom formázni a konténerek elhelyezéseit,ez mennyire ajánlott a floatolás helyett, mellett?

Ő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!

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 ]

[link]

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 ]

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 ]

Padding-el.

"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

.. és köszi a transition: 1s; tulajdonságot is, így picivel szebb az áttűnés.

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

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 ]

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

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é

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

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.

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é

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

Koszonom.

XD alias IKSZDé

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.

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

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 ]

Szerintem előbb tanulj JS-t, mint CSS preprocesszorokat. Már csak azért is, mert a LESS/SASS nélkül még el lehet lenni sima CSS-el, de JS nélkül nem.

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

Szuperek vagytok! akkor next stop is JS!, majd kis PHP-zás, hogy a szerver oldalhoz is legyen rálátásom.

[ Szerkesztve ]

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 ]

É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

Köszi, akkor ezt túltárgyaltuk.

Most már teljesen világos, hogy miért nem javasolt ezt még használni.

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?

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ű.

Óóó 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.

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.

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 ]

Én azt mondanám, hogy minimális HTML+CSS tudás kell hozzá, mert t.k mindent készen kapsz. Neked csak a megfelelő HTML elemeidre kell egy megfelelő CSS osztályt tenned.

Bátran vágj bele.

Ö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)
- PHP

Most 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 ]

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 ]

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