Gyanítom ez az oka:
src="//www.youtube.com/..."
A "http:" szerintem kell az elejére, különben nem fog lokálisan menni.

but without you, my life is incomplete, my days are absolutely gray

Köszönöm így már jó.

Nincs baj a // kezdetű címekkel, sőt, de ne a file:// protokollon keresztül, simán megnyitva az állományt a böngészőben teszteld, hanem (lokális) webszerveren futtasd.

Sk8erPeter

Wow. Ma is megérte felkelni.

but without you, my life is incomplete, my days are absolutely gray

Nekem is érdemes volt!

Hogyan tudnám a képen alul látható madársziluettet a header sarkára fölülre "ültetni"? Én így próbálkoztam:[link]
Egyszer sikerült is a madarat jobb felső sarkára "ültetni", viszont gondolom a header abszolút poziciójának következtében az egész content rész a header alá csúszott, viszont a madár a helyén volt. Mi erre a legjobb módszer, mit rontok el?

Előre is köszönöm a válaszokat!

[ Szerkesztve ]

Én simán hozzátenném a logóhoz, mán' bele a képbe.

but without you, my life is incomplete, my days are absolutely gray

Az én módszeremmel nem lehetséges? Nem tudom melyik képbe/-hez tudnám hozzátenni. A felső rész áll egy wrapperből, amibe van a logó bal oldalt, mellette a szöveg, majd a menüsáv, ez alatt van a header, amiben a zebrás kép van. És én ezt a madarat a #wrapper jobb felső sarkába szeretném "ültetni".

[ Szerkesztve ]

Lehetséges úgyis, csak az egész nem ér annyit.
Egyébként ha mindenképp így kéne megoldani, beletenném egy relatív konténerbe mindkét képet, és azon belül pozicionálnám be abszolút értékekkel. Ez szerintem elég hákolós megoldás. Nem javaslom.

but without you, my life is incomplete, my days are absolutely gray

Bakker. Innom kell egy kávét. Azt se tudom már melyik a jobb meg a bal kezem. Szóval a jobb sarokba, oké A legjobb megoldás szerintem az lenne, ha lenne neki egy konténer az egymás mellé floatolt elemek mellett, és abba bepattintanád a képet. Másik megoldás az lehet, hogy a #wrapper kap egy position: relative; attribútumot és ezen belül helyezel el egy jobb felülre abszolút pozicionált konténert benne a képpel.

but without you, my life is incomplete, my days are absolutely gray

Na, összelegóztam pixelenként... [link] Köszi!

Másik kérdésem. Ha nekiállok egy másik oldal elkészítésének, viszont a stílus nagyjából ugyanaz mint az indexlapomon, akkor mi a legbeváltabb módszer a stílus átvitelére? Gondolok itt arra, hogy hozzak létre még egy css-t, pl. style2.css névvel, majd ctrl+c, ctrl+v az eredeti stíluslapról, és ahol kell módosítgatom az új lapnak megfelelően?

[ Szerkesztve ]

Miért nem húzod be az eredeti stíluslapot, ha már kb. ugyanaz?

Sk8erPeter

Igen, most úgy kezdtem el, egyszerűen belinkeltem a másik html-be az alap stíluslapot, és az alap stíluslap aljára tettem egy sor kommentet az aktuálisan szerkesztett html nevével, és az alá írom, ahol módosítás van. Nem tudom, hogy ez "szép" módszer-e és átlátható kódot eredményez..

[ Szerkesztve ]

"tettem egy sor kommentet az aktuálisan szerkesztett html nevével, és az alá írom, ahol módosítás van"
Eh. Verziókezelőrűl hallottunk i mán? Monnyuk errűl.

Egyébként... most mi is a cél?
Szerk:
Ja, látom már az előzményt. Tárgytalan a kérdésem. Sőt asszem az egész hozzászólásom.

[ Szerkesztve ]

but without you, my life is incomplete, my days are absolutely gray

Nem baj, nekem így is hasznos. Tudnillik még nem hallottam a Git-ről.

Ja, persze, jó az, így egy fájlban van, csak egyetlen letöltendő és feldolgozandó stíluslap, így a böngésző egy korábban letöltött változatot is tud használni a gyorsítótárból (amennyiben a fájl a szerveren azóta nem változott). Azért persze ne legyenek egymásnak ellentmondó stílusdefiníciók benne, mert akkor mindenhol elrontanád. Amúgy is jó, ha egységes az oldalak kinézete, de nem ússza meg az ember, hogy egyes aloldalakon további stílusdefiníciókat készítsen el (ahol pl. olyan elem van, ami a másik oldalon nincs).
Azért érdemes megjegyezni, hogy a komplexitás növekedése esetén a fejlesztés erejéig szokták azt is csinálni, hogy széjjelbontják tematizálva a stíluslapokat, külön-külön fájlokban vannak az egyes részegységek stílus-meghatározásai, így adott esetben könnyebb lehet a karbantartás, módosítgatás (nem egy darab nagyobb fájlban kell keresgélni és módosítgatni, plusz így akár más-más emberkék dolgozhatnak más-más fájlokon, így kisebb a merge conflict esélye verziókezelő használata esetén), és a production code esetén ezeket "aggregálják" egyetlen fájlba, meg minimalizálják a kódot (értsd: kiszedik a whitespace-eket (szóközök, tabulátorok, sortörések), ahogy a PH-n is van).

(#1367):
A Git egy elég népszerű és hasznos verziókezelő (legtöbb munkahelyen kb. kötelező az ilyenek használata), érdemes vele megismerkedni. Persze a megtanulása, megértése (már az, hogy egyáltalán mire és mitől olyan jó) nem egy egyórás folyamat, lévén, hogy elég komplex, így bőven rá kell szánni az időt.
Ha magyarul akarsz róla videót nézegetni, akkor ez segíthet:
http://nevergone.hu/hu/blog/100416/git-verziokezelo-linux-alatt
Kissé altató és fura hangja van az illetőnek, de pl. letöltve, 1.5x-es sebességgel nézve (VLC-ben) tök jó. Igazából konkrét példán mutatja be, hogy hogyan tudod legegyszerűbben használni.

Ez a step-by-step leírás a Git-telepítéshez meg szerintem nagyon jó:
https://confluence.atlassian.com/display/BITBUCKET/Set+up+Git+and+Mercurial
(A Mercurialra vonatkozó részt nyugodtan kihagyhatod, ha csak a Gittel akarsz megismerkedni!)
Meg ez:
https://confluence.atlassian.com/display/BITBUCKET/Set+up+SSH+for+Git

Windows-ra való változat a Gitből:
http://git-scm.com/download/win

[ Szerkesztve ]

Sk8erPeter

Én hoztam fel, elegánsabb megoldásként, mint hogy soronként vezeti kommentbe hol van változás és miért. Amúgy ha már a Git funkciókkal sikerült megismerkedni, akkor ajánlott vétel a SourceTree. Kicsit barátságosabb, vizuálisabb mint konzolba kottázni.

but without you, my life is incomplete, my days are absolutely gray

Folyamatosan tanulom a CSS3-at és hozzá a HTML5 nyelvet. A könyvben elég sokszor felmerül, hogy az IE ezt, meg azt nem értelelmezi CSS formázás kapcsán. Kérdezném, hogy aki Frontend fejlesztéssel foglalkozik már régebb óta, mi a tapasztalata, a fejlesztők ezzel hogyan "szembesülnek"? Egyszerűen úgy fejlesztenek, hogy azokat a CSS parancsokat kerülik, amelyek IE-nél problémásak, vagy egyszerűen az IE-t nem veszik figyelembe a frontend fejlesztésnél mert ezekből kiindulva elavult lenne?

Pl. most a background-clip és background-origin parancsoknál tartok, és ezeket egyáltalán nem értelmezi az IE, ami szerintem elég problémás a fejlesztésnél, amikor arról van szó, hogy minden böngészőn ugyan úgy jelenjen meg az oldal.

[ Szerkesztve ]

Hehe, milyen régi az a könyv, amiből tanulsz? Milyen őskövület IE-d van otthon? Itt tudod megnézni, hogy melyik böngésző mit, hogyan ismer:

canIuse

Jól látszik, hogy Ie9-től támogatja a kérdéses background-clip-et.

Én kérek elnézést!

Nem olyan régi könyv, elvileg 2014. szeptemberben lett kiadva.
Igen, IE8-at ír benne, hogy az nem értelmezi, kicsit levoltam maradva.

Nekem amúgy IE9-em van, az alábbi kódot mégsem értelmezi, ha megnyitom a fájlt:
background-repeat: no-repeat; background-origin: content-box;
background-position:-100px 200px

Holott Chromeba, Mozillába hibátlanul fut. Najó, ideje frissítenem az IE-em.

[ Szerkesztve ]

"aki Frontend fejlesztéssel foglalkozik már régebb óta, mi a tapasztalata, a fejlesztők ezzel hogyan "szembesülnek"?"
Igazából ma már sokkal jobb a helyzet mint évekkel ezelőtt. Már az emberek nagy része valamilyen modern böngészőt használ elenyésző azok száma akik valami kőkori IE-n vagy kortársán böngésznek. Elenyésző eléggé ahhoz, hogy - specifikus esetek kivételével - eltekinthessünk tőlük. Ugyan úgy ahogy nem optimalizálsz egy 5 évvel ezelőtti Firefox-ra, úgy felesleges egy 5 évvel ezelőtti IE-re (IE8) is. Másik hogy egy bizonyos szinten már használsz CSS preprocessort (LESS, SASS, SCSS) aminek a kimenete amennyire csak lehet cross-browser. Nyilván ez sem váltja meg a világot, de olyan attribútumoknál, amelyeknek böngészőfüggő prefixei vannak (-webkit-, -moz-, -ms-, -o-) legalább nem kell foglalkozni. Ezen kívül még van millió előnye, erre most nem térek ki.

"elég problémás a fejlesztésnél, amikor arról van szó, hogy minden böngészőn ugyan úgy jelenjen meg az oldal"
Kulcsprobléma. De mint fentebb írtam, azért ez már nem kezelhetetlen. Én az 5 legnépszerűbb böngészők legfrissebb verzióin tesztelek, illetve IE9-ig meg szoktam nézni minden rendben e. Ha valami egyszerű workaround van rá, akkor javítom. Vagy ott van a sokat emlegetett html5shiv, ami valamelyest "okosít" a korábbi IE verrziókon. A legújabb dili viszont még több problémát szült mint korábban a sz*r böngészők: mobilok, tabletek. Lassan elképzelhetetlen, hogy egy weboldalnak ne legyen mobil "változata", legjobb esetben ez egy adaptive, vagy responsive layout.

A (#1374) martonx által linkelt caniuse egy alap könyvjelző, ha frontendre fejlesztesz, nagy segítség. Imádnám ha lenne belőle JetBrains termékekhez plugin.

Témához kapcsolódik, saját tapasztalatom az, hogy most már a Firefox-szal több szívás van, mint a IE-vel.

but without you, my life is incomplete, my days are absolutely gray

[link] A divben található kép miért nem mozog a görgetés hatására a háttérképpel együtt? Holott overflow: scroll tulajdonságon van.

DNReNTi Köszönöm a tartalmas válaszodat!

[ Szerkesztve ]

Az overflow nincs hatással a háttérre.
A hiba az hogy megadtad:
background-attachment: local;
Nos e helyett ez kell:
background-attachment: fixed;

Így a háttér pozíciója fix. Magyarul "elgörög" a tartalommal együtt.

but without you, my life is incomplete, my days are absolutely gray

He? Az overflow:scroll;-nak semmi köze ahhoz, hogy a háttérkép hogyan mozgolódik, vagy épp nem. Ha jól értem, azt akarod, hogy a háttérkép fixen mindig ott legyen a háttérben, ahogy görgetsz, nem? Ha igen, akkor használd a background-attachment: fixed;-et:
http://jsfiddle.net/8dftm0u2/1/

Ja, és JSFiddle-ön kifejezetten nincs szükség a <html>, <head> és <body> tagekre, mert ezekkel kiegészíti a kódodat amúgy is.
Amúgy a <br/>-t lehetőleg kerüld, ha nem muszáj használni, mert nehézkes tud lenni, ha margót vagy térközt szeretnél megadni.

Szerk.: Nyehh, megelőztek. Elpöcsöltem a jsFiddle-demóval, hogy kicsit kijavítsam.

[ Szerkesztve ]

Sk8erPeter

Sk8erPeter, DNReNTi Köszönöm így már jó. Nem az első "félreírás" ebben a könyvben.

[ Szerkesztve ]

Szerintem meg nincs elírva. Megnéztem, azt írja az általad is kipróbált kódra (overflow:scroll; background-attachment:local;), hogy "A jobb oldali függőleges görgővel - a div tartalmával - együtt fog mozogni a háttérkép", és ez igaz. A fixedre meg ezt írja: "fixed (rögzített): a háttér a dokumentum görgetésétől függetlenül állandó helyzetben marad". Ez is pont így van.
Tehát amit eredetileg kifogásoltál, az pedig pont úgy van: a háttérkép pont a tartalommal együtt mozog, és NEM fix.
Csak a mi FRENETIKUS ÉS LENYŰGÖZŐ értelmezési képességünknek köszönhető, hogy tudtuk, mit szeretnél.

Sk8erPeter

A linkelt könyvre visszatérve. Ez csak HTML5 és CSS3 dolgokat tárgyal, jól teszem, ha elsőként a legújabb HTML és CSS szabvánnyal ismerkedem meg és nem a korábbi HTML és CSS változatok tanulásával kezdek?
Korábban már egyetemen tanultam HTML-CSS és egy kis Javascript programozást, igaz csak egy szemeszteren keresztül, azért is szeretném jobban elmélyíteni a tudásomat a témában.

Gondoltam aktuálisan, naprakész tudást szeretnék most megszerezni, és egyre inkább előtérbe kerülnek a legújabb HTML5 és CSS3 "fjúcsörök", ezért én is up-to-dateben készítem magam.

Ti erről mit gondoltok?

Még egy kicsit on-topic. Lehetőségem lenne egy Adobe-Zertifikátot letenni Németországban, és ezenkívül még szeretnék más modulokat is tanulni. Mit gondoltok erről a Zertifikatról, és a következő "modulokról", amelyek ezen az oldalon találhatóak: [link] . Hasznos, érdemes, esetleg munkafronton Magyarországon vagy a régióban milyen híre van ezeknek a papíroknak?

Én azt gondoltam elsőként a HTML és CSS nyelvet tanulom, majd Javascript és Jquery lenne hasznos? .. ha front-endes elképzeléseim vannak a jövőre nézve a munka területén? Bár engem nagyon érdekel a PS-os webdesign tervezős téma is, bár nem sokat konyítok még hozzá, de pl. szívesen foglalkoznék azzal is.

Előre is köszönöm a Nagyok véleményét.

[ Szerkesztve ]

Ha forntend területen akarsz elhelyezkedni, akkor alap, hogy oda-vissza vágod az aktuális HTML és CSS szabványokat. Szinte felesleges foglalkoznod a korábbi szabványokkal, ha véletlen bele is szaladsz olyanba, hogy deparched tag-et vagy attribútumot használsz, az IDE felhívja erre a figyelmed. CSS-en felül jó ha legalább egy CSS Preprocessor-t is vágsz. Amellett, hogy a saját munkád megkönnyíti, lényegesen jobb lehetőségeket ad a kezedbe. Ha ajánlhatok akkor a SASS/SCSS epikus! Ezzel majd akkor ismerkedj, ha már a CSS frankón megy, addig felesleges, hiszen ennek haszna, akkor van, amikor a tudásod eléri CSS határait. Ismerned kell a JavaScriptet, hiszen a UI design-hoz elengedhetetlen, hiába a CSS3 sok okossága, önmagában még mindig nem elég. A JS-hez kapcsolódik a JQuery, nem árt megismerni (sőt), de szerintem egyre inkább leáldozóban van neki. Ezeken kívül mindenképpen ismerned kell framework-öket, például Bootstrap vagy AngularJS. Ezzel nincs vége. Attól mert frontend fejlesztő leszel, még ismerned kell a szerver oldali lehetőségeket is, igaz nem olyan mélyen mint egy backend-es, de ha csapatban dolgozol, nem árt ha tisztában vagy, azzal amit a <?php ?> tag-ek között látsz. Ráadásul, ha megnézel egy hirdetést, kérik is, hogy ismerd, attól függetlenül, hogy te frontend-es vagy.

Hogy mit ér egy certification, azon kívül h jól mutat a CV-ben? Szerintem semmit. Ha jelentkezel egy állásra, referenciákat kérnek, az interjún próbafeladatot adnak, nem számít, hogy milyen papírjaid vannak. Ha a munkát el tudod végezni, fel vagy véve. Hiába van 15 különféle jogosítványod, ha nem tudod ellátni a rád bízott feladatot. Hasonló ez mint a nyelvvizsga, attól mer van nyelvvizsgád még nem biztos hogy beszéled az adott nyelvet. Szvsz, kár ezekbe beleölni az időt és az energiát (és a pénzt).

but without you, my life is incomplete, my days are absolutely gray

A pénz nem számít, ingyen tehetném le, ha leteszem. Természetesen csinálok / meg már csináltam is pár referencia oldalt, amit be tudok mutatni, és ezt is mutatni fogom majd a későbbiekben, ha munkafrontra kerülök.

Akkor aktuálisan összefoglalom "magamnak":
Elsőként HTML5 + CSS3-at tanulok, kurzuson és azon kívül is.
Majd Javascriptet. (Akkor egyenlőre a Jqueryket csak "ismereti szinten" fogom elsajátítani majd)
Ezt követően jönnek majd az általad említett Frameworkok és CSS Preprocessorokban való elmélyülés.
Majd végül kis PHP-zás.

A kurzus részemről pedig a tanulás szempontjából fontos, a papír csak "plusz" lenne.

Mennyire fontos még Frontendesként egy adott CMS rendszer alapos ismerete? Wordpress, Drupal? Munkaadótól függ, vagy alapból jó ha ért hozzá az ember? Mert Wordpress és Drupal ismereteim "alaposabbnak" mondhatóak már.

[ Szerkesztve ]

Ártani nem árt. Vannak cégek, ahol valamelyik népszerű tartalomkezelő egy jól megmoddolt változatát használják, így előny lehet, ha tudod, hogyan kell mondjuk WP-hez elkészíteni egy témát. Ismerek olyat, ahol Joomla (!!!) alapú weboldalakat készítenek, és súlyos pénzeket kérnek el érte. Cégnevet inkább nem írok.

Az előző hozzászólásomat még kiegészíteném mielőtt megjön martonx, meg Jim-Y. Természetesen a szerver oldal nem csak PHP lehet. Én azért példálóztam azzal, mert azt használom/ismerem.

but without you, my life is incomplete, my days are absolutely gray

"A JS-hez kapcsolódik a JQuery, nem árt megismerni (sőt), de szerintem egyre inkább leáldozóban van neki."

Leáldozóban van a jQuery, miért?

Ilyen CSS preprocessorokat már én is ki akarok próbálni egy jó ideje, csak még nem tudom melyiket érdemes alaposabban átnézni. Sokan a SASS mondják, de látom van még ez a LESS is. Összehasonlításokban is az előbbit ajánlják, neked van bármi tapasztalatod a LESS-szel?

Én a jQuery - t és a PHP - t nem eroltetnem, csak alap szinten. PHP nepszerusege durván csökken, a jQuery pedig kezd kimenni a divatból. Szerintem elsősorban a vanilla JS - re kéne majd rafekudnod, úgyis arra épül szinte minden. Ha az már jól megy, akkor esetleg megismerkedhetsz egy JS framework el, jelenleg 4 ismertebb van, angular, ember, backbone és reactflux. Utána mivel full frontendes szeretnél lenni megismerkedhetsz az ionic-al vagy/és a famo.us-al illetve a CSS preprocesszorokkal. És akkor még a build toolokrol nem is beszéltünk mint gulp, grunt, npm, make stb...

Lol, baze és megjosoltad xD ezt csak az előző hsz után olvastam :-)

DNReNTi, Jim, ti frontendesek vagytok?

Én enterprise környezetben egy hybrid html5 mobile appon dolgozom, de nem tartom magam frontendesnek, mert pl a HTML - hoz és a CSS - hoz csak nagyon alap szinten ertek, szóval magamat inkább web developernek nevezném. Mielőtt még valaki beszolna hogy az npm nem is build tool, azért írtam mert kisebb projekteknel az npm is simán lehet a build tool.

Mindkettő, és egyik sem. Én még nem határoltam el magam egyik oldalra sem, pedig el kéne, mert amíg mind a kettőt hajtom egyikben sem leszek kiemelkedő. Nem rég kaptam egy ajánlatot frontend pozícióba, talán egy picit közelebb is áll hozzám mint a szerver oldal. Ennek ellenére érdekel az is mi folyik a háttérben, így szívesen foglalkozok azzal is.

(#1394) Zedz
A JQuery pár éve istenkirályság volt, azóta viszont van HTML5 és CSS3, egy csomó alap dolog amire korábban JQ-t használtunk, már elérhető a használata nélkül, azok a dolgok pedig amikhez még mindig szükség van JS-re, az megoldható simán JS-el, feleslges overhead a JQ-t használni. Persze ezt nem lehet általánosítani, hasznos kis lib, de már közel sem annyira mint korábban.

LESS vagy SASS/SCSS?
Szerintem a LESS egyszerűbb, könnyebb vele kezdeni, viszont épp ezért kicsit korlátoltabb is. Az SCSS nekem jobban kézre áll, sokkal áttekinthetőbb, kiforrottabb, saját függvényeket (akár rekurzív, vagy feltételhez kötött) írhatok, változókat használhatok, ésatöbbi. Ezzel még ugyan ráérsz, de ha majd ott tartasz, én a SASS/SCSS-t javaslom, aztán hogy majd neked akkor melyik áll a kezedre eldöntöd, sok különbség amúgy nincs.

Pár cikk a témában (englisül): Zing, Hongikat, Udemy.

but without you, my life is incomplete, my days are absolutely gray