- Milyen billentyűzetet vegyek?
- Melyik tápegységet vegyem?
- Házimozi belépő szinten
- Házimozi haladó szinten
- Intel Core i5 / i7 / i9 "Alder Lake-Raptor Lake/Refresh" (LGA1700)
- Hobby elektronika
- OLED TV topic
- Kiemelkedően csendes ASUS VGA jött a Noctua közreműködésével
- ASUS notebook topic
- Melyik hordozható audiolejátszót (DAP, MP3, stb.) vegyem?
Új hozzászólás Aktív témák
-
DNReNTi
őstag
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. -
Jim-Y
veterán
É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.
-
Zedz
addikt
DNReNTi, Jim, ti frontendesek vagytok?
-
Jim-Y
veterán
É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...
-
Zedz
addikt
válasz
DNReNTi #1391 üzenetére
"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?
-
DNReNTi
őstag
Á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.
-
adam_
senior tag
válasz
DNReNTi #1391 üzenetére
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.
-
DNReNTi
őstag
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).
-
adam_
senior tag
válasz
Sk8erPeter #1388 üzenetére
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.
-
adam_
senior tag
válasz
Sk8erPeter #1388 üzenetére
-
Sk8erPeter
nagyúr
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. -
adam_
senior tag
válasz
Sk8erPeter #1386 üzenetére
Sk8erPeter, DNReNTi Köszönöm így már jó. Nem az első "félreírás" ebben a könyvben.
-
Sk8erPeter
nagyúr
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.
-
adam_
senior tag
[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!
-
DNReNTi
őstag
válasz
fordfairlane #1380 üzenetére
Az IE8 globális használata jelenleg 2.87%. 5 éves. Nem kell, hogy problémát okozzon, el kell felejteni. Specifikus eseteket most nem veszek számításba, pl egy intranetes portál, egy cégnél ahol a legutóbbi informatikai fejlesztés 2002-ben volt.
-
martonx
veterán
válasz
DNReNTi #1376 üzenetére
"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."
És tegyük hozzá, hogy a legtöbb szívás toronymagasan az almás fossal (értsd Faszari, vagy mi a neve) van.Bocsánat, csak önmagában már attól is undorodok, amikor az OSX-es bármelyik szutykot be kell kapcsolnom. Érdekes a wines, android-os, linux-os cuccok valahogy kézre állnak, de az almás izék borzalmasan taszítanak, és amikor minden mindenen tök jól néz ki, szól a menedzsment, hogy de ipad-en / macbook-on / iphone-on miért néz ki szarul, akkor....
-
DNReNTi
őstag
"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.
-
adam_
senior tag
válasz
martonx #1374 üzenetére
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 200pxHolott Chromeba, Mozillába hibátlanul fut. Najó, ideje frissítenem az IE-em.
-
adam_
senior tag
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.
-
Sk8erPeter
nagyúr
válasz
fordfairlane #1369 üzenetére
Ez a hsz. volt az egész előzménye, a kolléga félreértette a kérdést (erre később ő is rájött), és belinkelte a Git honlapját, a srác meg erre válaszul írta, hogy legalább most megismerte...
Háteznemgyüttle?
Szerk.:
(#1370) DNReNTi:
Na várjál, most akkor mégsem vontad vissza az előző hsz.-edet, ami nem volt válasz a kérdésre?Amúgy meg a fejlesztőkörnyezetekhez is szokott lenni Git-támogatás, és akkor is használhatod a Git-funkciókat grafikus felületen.
DE én azt javaslom, hogy ELŐSZÖR mindenki kezdje azzal, hogy megismerkedik a konzolos használattal, mert az első probléma esetén nagy bajban lesz, amikor nem oldható fel a gond mondjuk a GUI-n keresztül. -
DNReNTi
őstag
válasz
fordfairlane #1369 üzenetére
É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.
-
Sk8erPeter
nagyúr
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+GitWindows-ra való változat a Gitből:
http://git-scm.com/download/win -
DNReNTi
őstag
-
adam_
senior tag
válasz
Sk8erPeter #1364 üzenetére
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..
-
adam_
senior tag
válasz
DNReNTi #1361 üzenetére
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?
-
DNReNTi
őstag
válasz
DNReNTi #1361 üzenetére
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.
-
adam_
senior tag
válasz
DNReNTi #1359 üzenetére
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".
-
adam_
senior tag
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!
-
fordfairlane
veterán
-
adam_
senior tag
válasz
fordfairlane #1354 üzenetére
Nekem is érdemes volt!
-
DNReNTi
őstag
válasz
fordfairlane #1354 üzenetére
Wow. Ma is megérte felkelni.
-
fordfairlane
veterán
válasz
Sk8erPeter #1353 üzenetére
Pontosan. A //-rel kezdődő beágyazásnak megvan az az előnye, hogy ha a host oldal https-es, akkor a beágyazás is az lesz, és nem fog nyafogni a böngésző, hogy secure oldalba nem secure tartalom van beágyazva.
-
adam_
senior tag
Egy Youtube videót szeretnék beágyazni az oldalalom, JSFiddle szépen meg is jeleníti a kódot, de ha élesbe beszúrom a honlap kódjába, akkor ott nem hoz be semmit, csak egy üres részt, "szürke színnel, ami a háttér színe". Próbáltam esetleg clear beszúrással is, de úgy sem jó. Itt a kódrészlet: [link] Hozzáteszi még, hogy" a fájlt, vagy könyvtárt nem sikerült megtalálni" egy kis ablakban az éles nézetben.
A régi hosszú "object" kódos youtube beágyazással sem jó.
-
DNReNTi
őstag
válasz
Sk8erPeter #1348 üzenetére
"azért nem kéne durvának lennie az eltérésnek, hogy még a szélességek sem stimmelnek"
Tudom sarkos, de simán lehet ha box-sizing fix-et használ, és azt a Dw figyelmen kívül hagyja, így mondjuk az 500 px szélességhez a live view hozzáadja a paddingot, a böngészők meg nem. Így el tudom képzelni, más esetben elég para.Egyébként meg egyetértek.
Szerk: elírás
-
Sk8erPeter
nagyúr
Igazából Zedz mondta ki a kulcsszót, valószínű, hogy arról van szó, hogy böngészőmotorbeli eltérések vannak - az 5.5-nél már WebKitet használtak, de lehet, hogy nem követték már a Blink-vonalra való átállást... bár az általad írt drasztikus változások tényleg furcsák, ennyire azért nem kéne durvának lennie az eltérésnek, hogy még a szélességek sem stimmelnek. Sajnos pont emiatt nem alkalmas ez az eszköz sem arra, hogy a komplett frontendet ebben tervezd meg. (Ne kérdezd, mi alkalmas rá, nem tudok ilyenről a kézi bűvészkedésen, mindenféle böngészőben való tesztelésen kívül.)
-
Zedz
addikt
Nem használok DW-t, de így elsőre valami olyasmit tippelnék, hogy szimplán máshogy alapján építi fel a weboldalt. Ez tetten érhető a böngészők között is, tehát például megadsz XY értéket egy elemnek, az mondjuk Chromeban tökéletesen fog kinézni, Explorerben pedig már szét van csúszva az egész. Más motor, máshogy épít.
-
adam_
senior tag
válasz
DNReNTi #1344 üzenetére
Valamint még egy "technikai észrevétel". A DW CC-ben az élő nézetben valamikor teljesen más mutat (pl header szélességnek) a honlap megjelenítésnek, mint amit chrome vagy mozillában látok. Ezért is már csak mentést követően ezekbe a böngészőkbe nézem az oldal megjelenését. A "Live-nézet" DW-ben egyszerűen néha bugos lenne?
-
DNReNTi
őstag
Furcsa állatfaj, az első néhány alkalommal, az tuti. Ezért is jobb csak ott float-ot használni, ahol muszáj. Itt nem lenne muszáj. Szintén szóba került ma már párszor a display: inline-block; használata. Esetedben is megspórolt volna némi kínlódást.
Szerk:
(#1343) Zedz
Éppen ezt írtam itt. -
Zedz
addikt
válasz
Sk8erPeter #1336 üzenetére
Nem az <a> tagre gondoltam, hanem a <nav>-ra. Írtad, hogy például menü szélesség megadásához kellett <ol>, <ul>, de mivel a <nav> is block szintű, ezért nem értem, hogy miért tartsam meg a listát. Mert ha a szokásos menü design-t szeretném elérni - tehát az egymás mellett lévő menüpontok -, akkor több dolgom van a lista gatyába rázásába, mintha csak simán adnék egy paddinget a <nav> <a> elemeire. Például itt.
-
DNReNTi
őstag
válasz
Sk8erPeter #1335 üzenetére
Én értem, de ettől még szerintem a megoldás - annak ellenére, hogy én se így használom - nem rossz, annak ellenére sem, hogy egy inline elemet váltok inline-block-ká. Ha fordítva nézzük, akkor meg egy block elemből (li) csinálok inline-t.
Na mindegy, folytathatnánk szerintem ezt reggelig, igazad van: mindenki úgy csinálja, ahogy akarja.
Szerk:
Na jó még egy dolgot csak hozzáteszek:
Egy sima egy szintű menünél ráadásul mind a HTML mind a CSS kód rövidebb. -
Sk8erPeter
nagyúr
Ha blokkszintűvé varázsolod az <a> taget, akkor annak is adhatsz blokkszintű stílusformázást, csak mondom, szerintem ez kicsit erőltetett megoldás, valaminek "álcázni" egy elemet.
Persze nyilván van, amikor az alapértelmezett stílust pont, hogy felül kell bírálni, bizonyos elemeket floatolni vagy inline-ná tenni, épp azért, hogy a megfelelő módon jelenjenek meg, ne az alapértelmezett módon (mint ahogy pont a listaelemeket is egymás mellé kell úsztatnod floattal), de ebben az esetben szerintem jobb eleve a jó megközelítést alkalmazni.
De hát ízlések és pofonok különböznek. -
Sk8erPeter
nagyúr
válasz
DNReNTi #1333 üzenetére
Szerintem meg ez erőltetett, mert így inline elemet átvariálsz inline-block-ká, minek, ha van rá megfelelő elem, meg ha így logikus (plusz a normálisan strukturált felépítést szerintem a keresőrobotok is értékelik, bár szerencsére sosem kellett mélyen tanulmányoznom a SEO-irományokat). Mindegy, mindenki úgy csinálja, ahogy akarja.
-
Zedz
addikt
válasz
Sk8erPeter #1332 üzenetére
Köszönöm a terjedelmes választ, így már látom a logikát a lista mögött. De ha már felvetődött a téma akkor szeretném kicsit boncolgatni, csak hogy minden világos legyen. Írtad, hogy szükségünk van block szintű elemekre, például a teljes menü szélességének megadásakor. Ezért az ul, ol teljesen megfelel számunkra. De a nav is block szintű elem, annak is lehet szélességet adni, és pl nav#menu a -ként bármit rá lehet húzni magára az a elemre is. Vagy így az egészet rosszul gondolom?
-
DNReNTi
őstag
válasz
Sk8erPeter #1332 üzenetére
Logikus az tény, de ha valaki ragaszkodik a listless megoldáshoz, lehet inline-block az a tag, akkor pedig megkapja a blokkelemek áldásos tulajdonságait, így például, hogy lehet adott szélessége. Így akkor megint felesleges a lista. Mondom ezt elkötelezett lista-menü felhasználóként.
Szerk:
(#1331) Sspot
Már akartam szólni, mert untam bemásolgatni.Ennek folyományaképp:
(#1330) adam_
JsFiddle?Szerk:
Na jó nem b*ziskodok, de legközelebb tényleg használd a fiddle-t. Csak tippelni tudok, mivel a tartalmi div-ek floatolva vannak, és nincs clearfix, így az az eredmény, az egészet magába ölelő konténer (#side1) 0px magas, tehát mintha egy üres div lenne. -
Sk8erPeter
nagyúr
"Amúgy miért listával csináljátok a menüket a nav tagen belül? Akkor nem kell ilyenekkel szórakozni, a böngésző is tudja már, hogy ez bizony egy menü.
"
Az <a> tag - gondolom erre az alternatív megoldásra gondoltál, hogy csak ezeket használod list-itemek helyett - egy inline (szövegközi) tag, tehát alapértelmezetten csak olyan stílusok érvényesek rá, mint a többi inline-szintűre... hiába adsz meg neki mondjuk 300px szélességet, ha az csak az általa kitöltött helyet "foglalja" (pl. 100px-nyit). Egy menü elemeinek meghatározásához pedig a legtöbbször valamilyen - legalább minimális - szélességet meg szeretnél határozni.
Ezért tehát blokkszintű elemekre van szükséged. Például ilyen az unordered vagy ordered list (<ul>, <ol>). A menüelemek egyenként pedig szemantikailag pont megfelelnek egy lista egy-egy elemének (hiszen a menüpontok felsorolása is egy lista), ezért értelemszerűen az a jó, ha azt a taget használod a definiálásukra, amivel éppen listaelemeket határozol meg (<li>).
Lehetnek alternatív megoldások, de ez a logikus.
Nyilván nem véletlen, hogy a népszerű template-ek, front-end keretrendszerek, mint pl. a Bootstrap is a <nav>-on belüli <ul>-t használják menükészítésre.(#1328) Zedz:
"Először még listáztam én is, de nav óta már nem használom"
Akkor szokj vissza a használatára.(#1325) DNReNTi:
Nem csak "beidegződés", hanem van logika a használatában, lásd fentebb. -
adam_
senior tag
válasz
DNReNTi #1327 üzenetére
<div id="side1">
<div class="content" id="leftContent">
<h4> Tour in Africa </h4>
<img src="img/leftSideImg.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div class="content" id="rightContent">
<h4>Lion Safari</h4>
<img src="img/africa-animal-cat-1066.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>Csináltam egy side1 divet, ami felöleli a tartalmakat, és ezt a side1 ID-s divnek css-ben megadtam a width:100%-os értéket és fehér szint, viszont továbbra is közte van az a pici szürke rés.
-
DNReNTi
őstag
"Hogyan tudnám a két sideot egységesen fehér háttérrel ellátni?"
Igazából már elláttad. Mind a kettő tökéletesen fehér, de mivel 48% szélesek, így 4% az oldalszélességből "kimarad" és ott az alatta lévő objektum látszik. Ez most valszeg a body, ahogy te is gondoltad. Megoldás az lehet, ha ezeket belehelyezed egy 100% széles fehér hátterű konténerbe. -
adam_
senior tag
A tartalmi résznél kép a két hasáb között valamiért nem teszi fehérré a lapot, gondolom a body osztály színbeállításait nézi. Itt a kód a content részhez:
<div class="content" id="leftContent">
<h4> Tour in Africa </h4>
<img src="img/leftSideImg.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
<div class="content" id="rightContent">
<h4>Lion Safari</h4>
<img src="img/africa-animal-cat-1066.jpg" height="200" alt=""/>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>Itt a hozzá tartozó CSS:
.content {
background-color:#FFF;
}
#leftContent {
float:left;
text-indent:25px;
text-align:justify;
font-size:15px;
width:48%;
border-left:solid 1px #A6A6A6;
}
#leftContent img {
float:left;
padding-right:5px;
padding-left:5px;
}
#rightContent {
float:right;
text-indent:25px;
font-size:15px;
text-align:justify;
width:48%;
border-right:solid 1px #A6A6A6;
}
#rightContent img {
float:right;
padding-right:5px;
padding-left:5px;
}
.content h4 {
color: #ec8000;
text-weight:bold;
text-align:center;
}Ha egyszerűen a content részt teszem fehérré, akkor se teszi egyszerre a left és a right side-ot fehérré, mindig közte marad a kis rés, ami a body osztály színbeállításait nézi. Hogyan tudnám a két sideot egységesen fehér háttérrel ellátni?
-
DNReNTi
őstag
A kérdés teljesen jogos, mivel a nav tag-nek nem kötelező listát tartalmaznia, tehát tökéletesen jó megoldás lenne az is ha így használnánk:
<nav>
<a href="#">Menü 1</a>
<a href="#">Menü 2</a>
...
</nav>Magam részéről én még csak nem is gondolkoztam ezen.
Szvsz elsőrorban beidegződés, mint a float, használja mindenki ha kell ha nem.
A menü végül is egy lista, ráadásul (szintén szvsz) olvasmányosabb is listaként a kód. De ha mondjuk többszintű menük készítesz, akkor a fenti példa már elvérzik, be kell vezetni új osztályokat, akkor meg már minek vezetnéd be ha ott a jó öreg lista. Plusz: lehet vele ügyeskedni, ahogy a korábbi példámban írtam. Igaz, egy sima menü esetében eleve elkerülhető ez az ügyeskedés ha a fenti példát használod.
-
adam_
senior tag
válasz
PumpkinSeed #1315 üzenetére
Köszönöm, így már jó!
Az miért van, hogy html-ben megírom menüfunkcióként a listámat, style formázás után mégis fordítva jeleníti meg a benne található elemeket. Gondolok itt arra pl, hogy a "Home" menü lenne az első, de valamiért azt teszi legutoljára, és a "Contact" fület pedig az első helyre.
Valamint még egy "technikai észrevétel". A DW CC-ben az élő nézetben valamikor teljesen más mutat a honlap megjelenítésnek, mint amit chrome vagy mozillában látok. Ezért is már csak mentést követően ezekbe a böngészőkbe nézem az oldal megjelenését. A "Live-nézet" DW-ben egyszerűen rossz lenne?
-
DNReNTi
őstag
válasz
PumpkinSeed #1315 üzenetére
"<div id="clear"></div>"
Wat?Egy: nincs definiálva a CSS-ben, kettő: mér' id? A clearfix legyen már osztály, ha már ebben a formában használjuk. Meg amúgy is: ne az img tag kapjon már globális float-ot, főleg, hogy még konténer is van neki. És végül: az egész elintézhető ennyivel: display: inline-block;
-
adam_
senior tag
Sziasztok! Van egy #wrapper id-val ellátott div rész a honlapon, a header fölött. Ezen található bal oldalt egy logó, mellette egy szöveg, és jobb oldal vízszintesen a menüsor. Így néz ki htmlben:
<div id="wrapper">
<div id="wrapperLogo">
<img src="img/lion.jpg" width="150" height="100" alt=""/> </div>
<h2> Lion Tour </h2>
<nav>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>és vizuálisan pedig így: [link]
Hogyan tudnám a logó mellette szöveget a logó mellé középre hozni? Próbáltam paddinggelni h2-re, viszont akkor a menübart is viszi lefelé. Hogyan oldhatnám meg, hogy csak a szöveg mozogjon a megfelelő helyre?
Előre is köszönöm a segítségeteket!
-
Zedz
addikt
válasz
honda 1993 #1310 üzenetére
Optimális esetben már alapból úgy építed fel az oldal HTML kódját, hogy ne okozzon gondot az esetleges mobil CSS hozzá adása. Amúgy nem olyan elvetemülten nehéz szerintem, csak pepecselős meló. Nézz utána a media queryknek.
Ezzel a módszerrel több felbontásnak megfelelő CSS-t is tudsz készíteni.
-
DNReNTi
őstag
válasz
honda 1993 #1310 üzenetére
"Esetleg előfordulhat hogy a HTML kód is bekavar?"
Naná. Optimális eset alatt azt értem, hogy a HTML a modern szabványoknak megfelelő, letisztult, olvasmányos ésszerűen felépített kód, nem pedig egy toldott-foldott, valami 8 éves editorral összekattintgatott táblázatos layout, tele inline formázással. -
honda 1993
senior tag
válasz
Sk8erPeter #1303 üzenetére
Jólvan, már annyiszor mondtad hogy nem jól írom ezt a bizonyos szót hogy már megjegyeztem.
Szóval mostmár nincs szügségem arra hogy kijavíts.
Nyugi csak vicc volt ha esetleg nem esett volna le.
DNReNTI : Miért emelted ki azt hogy optimális esetben?
Esetleg előfordulhat hogy a HTML kód is bekavar? -
DNReNTi
őstag
válasz
honda 1993 #1308 üzenetére
Szerintem egyelőre ne fogj hozzá. Egyébként optimális esetben jóformán csak a CSS-t kell átírni, tehát nem nagy meló.
-
honda 1993
senior tag
-
martonx
veterán
válasz
honda 1993 #1301 üzenetére
Majd amikor észreveszed, hogy az oldalad minimum 20%-ban (és egyre növekvő százalékban) mobilról néznék, majd gyorsan érdekelni fog.
Sőt akkor az olcsó tabletekről még nem is beszéltünk az 1024X600-as felbontásukkal. -
Zedz
addikt
válasz
Sk8erPeter #1303 üzenetére
Kezdem azt hinni, hogy lassan összehaverkodtok!
-
PumpkinSeed
addikt
válasz
Sk8erPeter #1303 üzenetére
Igazából nekem az idő során teljesen ráállt az ujjam a PH mobilon való nagyítás scrollozás stb-re.
Amúgy az miért van, hogy a böngésző összehúzásakor megy a reszponzív design meg tök jól néz ki, de mobilon iPhone 4S, pedig az eredeti nézet jelenik meg. Most ezt így kód nélküli konklúzióként vontam le eddigi "alkotásaimat" nézve.
-
#81999360
törölt tag
válasz
Sk8erPeter #1303 üzenetére
Nem tudom, hogy miért van erre szügség. Mindig belekötni szegénybe...
On: (#1301) honda 1993:
Az hogy egyelőre (mellesleg az sem egyenlőre, hanem egyelőre) nincs rá szükséged, nem jelenti azt hogy nem kellene megtanulni. Webes témában szerintem jó, ha mindenről van némi fogalmad. -
Sk8erPeter
nagyúr
válasz
honda 1993 #1301 üzenetére
"ha majd
szugsegemlesz ra"
Nem adom fel, addig foglak javítgatni, amíg legalább ezt az egy szót meg nem tanulod. Legalább nemcsak webfejlesztéssel próbálkozol, hanem egy kicsit a magyar nyelv tanulgatásával is, rádfér.
Tehát: szükség. Vágod? Szükség. SZÜKSÉG!!!!444NÉGYNÉGY!! K-val! KÁVAL!Na, mindjárt jön a "nincs jobb dolgod"-duma...
Amúgy hogy ON is legyek, ez az "Engem nem igazan erdekel a reszponziv webdizajn [...] Ugyanis szerintem sokkal jobb az egyszeru desktop nezet" nem túl profi hozzáállás.
Nem tudom, neked mekkora tégla lehet a telefonod, de azért sok oldalt kényelmetlen nézni a teljes nézetben egy átlagos okostelón (ilyen 4" az már egész átlagosnak számít), pl. a PH-t is rázoomolva kell nézni a desktop-nézetben, és ide-oda scrollozgatni az oldalon. -
honda 1993
senior tag
válasz
martonx #1298 üzenetére
Engem nem igazan erdekel a reszponziv webdizajn ( legalabbis egyenlore meg nem)
Ugyanis szerintem sokkal jobb az egyszeru desktop nezet, bar lehet hogy ez csak szerintem van igy.
Nyilvan ha majd szugsegem lesz ra akkor majd utananezek.Sk8erPeter "Ikszdé!
Látom megtetszett. " Van ez igy.
Új hozzászólás Aktív témák
Hirdetés
- Samsung Galaxy Watch6 Classic - tekerd!
- Milyen billentyűzetet vegyek?
- Melyik tápegységet vegyem?
- Házimozi belépő szinten
- Házimozi haladó szinten
- gban: Ingyen kellene, de tegnapra
- Milyen légkondit a lakásba?
- Intel Core i5 / i7 / i9 "Alder Lake-Raptor Lake/Refresh" (LGA1700)
- WoW avagy World of Warcraft -=MMORPG=-
- Autós topik
- További aktív témák...
- Thermaltake Toughpower SFX Platinum 1000W
- Gigabyte B650M Aorus Elite AX ICE + 3 év garancia
- Sony DSC-HX300 digitális fényképező + 3 extra akksi + 8GB memóriakártya + Hama Star 700 állvány
- BESZÁMÍTÁS! LENOVO LOQ 15APH8 15 notebook - R7 7840HS 16GB DDR5 1TB SSD RTX 4060 6GB WIN11
- BESZÁMÍTÁS! ASUS TUF A15 FA507NV 15 notebook - R7 7735HS 32GB DDR5 512GB SSD 1TB SSD RTX 4060 6GB W
- Szinte új! 3 Hónapos! Playstation 5 Slim Disc (Lemezes) Kiadás! Garancia: 2027.05.15
- AKCIÓ! Apple Mac Studio M2 ULTRA 2023 64GB 1TB SSD számítógép garanciával, hibátlan működéssel
- HIBÁTLAN iPhone 14 Pro Max 256GB Deep Purple -1 ÉV GARANCIA - Kártyafüggetlen, MS3011
- GYÖNYÖRŰ iPhone 13 256GB Pink -1 ÉV GARANCIA - Kártyafüggetlen, MS3055
- Általános igazgatóhelyettes tábla üvegből eladó
Állásajánlatok
Cég: FOTC
Város: Budapest