Van csomó oldal ahonnan lehet inspirálódni, illetve nem árt követni külföldi webdesign blogokat.
Őszi hangulatú weboldal 2.rész
Elkészült a mindenki által annyira várt videó, ahol a korábban Photoshopban elkészített weboldal mintából megírjuk a HTML és CSS kódot.
Videó
86 hozzászólás
-
-
-
2014. július 17. csütörtök - 19:41
Nézegettem más oldalakat, de ha nekiálltam tervezni egyet, az katasztrófa lett 😀 Jobb ha senki nem látja.. 😀
-
-
2014. február 18. kedd - 20:00
Szia
Nekem a szovegek kilognak a container-en kivulre. Mit irhattam rosszul?
Koszi-
-
2014. május 30. péntek - 18:12
Koszi a valaszt. Sikerult kijavitani. 🙂
-
-
2012. november 4. vasárnap - 22:44
Szia
PS-ben egyes oldalrészek kijelőlése után melyik billentyűkombináció segítségével hozod elő azt az ablakot amelyik pontosan megmutatja annak az elemnek a méretét?
Válaszodat előre is köszi-
2012. december 18. kedd - 13:20
Hello!
Ha ki van jelölve, nyomj ctrl+c -t, ekkor vágólapra teszi, ha nyomsz egy ctrl+n -t akkor egy új képet hoz létre, ekkor akkora méretű lesz, mint a vágólapon lévő kép és a képméretnél ezek az adatok lesznek. De vigyázz arra, hogy ha átlátszó rész volt a szélén, akkor azt nem teszi ilyenkor hozzá!
-
-
2012. szeptember 23. vasárnap - 13:14
Megint én vagyok :$
most az a baj van ,hogy
http://dr-maps.allalla.com/hiba.jpg
ezen a képen a menüpontokat kéne középreigazítani..
és hiába adom a text-align: center; -t nem csinál semmitStyle.css
body {
background: #000;
font-family: Stencil Std,Tekton Pro,tahoma,arial,sans-serif,verdana;
font-size: 11px;
}
div#container {
width: 790px;
height: 590px;
padding: 5px;
background: url(‘http://dr-maps.allalla.com/bg_container.png’);
margin: 40px auto;
-moz-box-shadow: 0 0 20px #7e7e7e;
-webkit-box-shadow: 0 0 20px #7e7e7e;
box-shadow: 0 0 35px #7e7e7e;
}
div#header {
width: 790px;
height: 21px;
padding-top: 200px;
background: url(‘http://dr-maps.allalla.com/bg_header.jpg’);
text-align: center;
}
div#header a {
color: #a19498;
text-transform: uppercase;
font-family: trebuchet MS;
font-size: 20px;
font-weight: bold;
text-decoration: none;
margin: 0 65px;}
-
-
2012. szeptember 24. hétfő - 16:55
nem úgy értettem,hanem h felfelé közepreigazítani, azt hogy csináljam? mert a menüpontok a kis “átlátszó”doboz alján van,és nekem feljebbkéne vinni középre
-
-
2012. szeptember 22. szombat - 19:19
Nekem az a baj lépett fel, videóban “1:10” -től mikor a háttért aztán a bg_header.jpg -t mented, én kijelölöm + ctrl+c aztán nyitok egy újat ctrl+n , majd ctrl+v és csak egy fehér kép van .. mi a baj?
-
-
2012. szeptember 23. vasárnap - 11:16
Rendben,már megyen,köszönöm 🙂
-
-
2012. augusztus 21. kedd - 15:26
Kérlek nézzétek meg az enyémet is.
http://www.manofaktura.co.cc/other/cyrex_autumn
Köszönöm.-
2012. augusztus 21. kedd - 19:20
Jó lett. De a menü FF-ben furcsa. Túl nagy a padding.
-
-
2012. augusztus 14. kedd - 09:24
Hi Cyrex. 😀 a Paddingnél aztmondtad , mindegyiknél 20px 😀 a heightből 30px-t vontál le !? 😀 ez hiba vagy tényleg így szeretted volna méretezni a boxot ? 😀
-
2012. augusztus 3. péntek - 21:24
Köszönöm!
Dolgozom a problémán! -
2012. augusztus 3. péntek - 19:28
Köszönöm a választ!
De a korrigálás után sem működik!
http://kepfeltoltes.hu/view/120803/804796288V_g_lap02_www.kepfeltoltes.hu_.jpg -
-
2012. augusztus 3. péntek - 12:16
Ezt elfelejtettem!
http://kepfeltoltes.hu/view/120803/V_g_lap01_www.kepfeltoltes.hu_.jpg -
-
2012. augusztus 3. péntek - 12:15
Szia “Cyrex”!
Szeretném megkérdezni, hogy mit csináltam rosszul, mert ha megnyitom, akkor tiszta fekete hátteret kapok benne jobboldalt piros a fejléc betűk pirosak.
Addig nem akarok tovább menni, míg ez a hiba fent áll!
Köszönöm a választ! -
2012. június 25. hétfő - 16:55
Igen, minden utf-8.
(illetve nem tudom pontosan mit értesz azalatt, hogy a PHP-ben is megadtam-e)De most nyitottam egy sima txt-fájlt, átmásoltam abba a php-ból mindent és ezzel van ékezet.
Notepad++ szerint a kódolása ennek ANSI, de megadtam metába az utf-8-at.-
2012. augusztus 2. csütörtök - 20:36
“Notepad++ szerint a kódolása ennek ANSI”
ez úgy működik, hogy a notepad “encoding” menüje nem tájékoztató jellegű, hanem rá kell kattntani az utf8 BOM nélkül-re és akkor átváltoztatja (ezt azonnal látni is fogod mivel az ékezetek átváltoznak más karakterekké meg még más, egyébként láthatatlan micsodákká)
A php-ben meg küldhetsz a fájl elején egy headert:< ?php header("Content-Type: text/html; charset=UTF-8"); ?>
-
-
2012. június 24. vasárnap - 16:27
Közben sikerült rájönnöm miért van…
A chrome-al ellentétben az FF és az opera elég butuska állat.Ez volt:
Ez lett:
Viszont most a karakterekkel van gond.
Szintén FF és Opera (meg windows 8-as IE alatt):
Kezdőlap = KezdĹlap
Galéria = GalĂŠria*.php minden lap.
Esetleg erre valami ötleted?
-
2012. június 24. vasárnap - 16:29
** ami kimaradt:
” \index.css ” ről /index.css -re kellelt változtatni az eléréseket, tehát a dőlés iránya volt a hiba…
A karakterkészlet: utf-8
-
-
-
2012. június 23. szombat - 16:54
Hello!
A css tutorial videók segítségével készítettem egy weboldalt, ami google chrome-ban nézve tökéletesen úgy jelenik meg, ahogy azt én fejben elképzeltem, sőt még IE-ben is jónak mondom, de Operában és Firefoxban katasztrofális a helyzet.
Felismerhetetlenül szétesik.Ennek mi lehet az oka?
Kb ugyan azokat a kódokat használtam, amiket te.
Egyébként a lapok betöltéséhez az egyszerű PHP oldalfelépítéses tutorialt használtam, op-al inklúdolja a lapokat a keret. -
-
2011. július 18. hétfő - 13:42
Üdv!
Először is gratulálok a videókhoz!
Kérdésem az lenne felétek hogy ha a css-ből megadom az elérési utat a képnek de nem jeleníti meg.
pl:dic#container {
background :url(../pic/bg_header.png);
width: 1024px;
height: 395px;}
Wampservert használom!
Próbáltam más free oldal ott megjelenít mindent.
Pontról-pontra végigkövettem a munkafolyamatot és ugyanúgy írtam mindent de nem akarja a jót.
Ha valaki tud valami megoldást az megköszönném.-
2011. július 18. hétfő - 16:52
Elírtam a dolgot!
Ez a helyes:div#header {
width: 1024px;
height: 398px;
background-image:url(../pic/bg_header.jpg);}
-
2011. július 18. hétfő - 21:46
ha a css fájlod külön mappában van akkor okésnak kéne lennie, de ha a css is csak kintvan a gyökérben, akkor vedd le ezt a részt: “../” …mert ez visszalép…írd le a mappák elrendezését meg minden…abból meg lehet állapítani h mi a gond.
-
2011. július 20. szerda - 10:42
A nagy igyekezetembe nem zártam le a containert a html-be,így nem tudtam css-be formázni.
-
2012. augusztus 1. szerda - 18:47
Egyébként a backgroundnál kihagytad a két aposztrófot.
-
-
2011. június 17. péntek - 22:23
Szia!
Az lenne a kérdésem, hogy Opera böngésző alatt a boxshadow-t hogy tudom beállítani?
Firefox alatt jó és Chrome alatt is, de Opera alatt nem :S-
2012. augusztus 21. kedd - 19:32
-o-box-shadow: szerintem ez az.
-
-
2011. június 13. hétfő - 23:06
Kedves Cyrex!
Azt megkérdezhetem, hogy a dreamweaver-rel hogy állsz? esetleg lehetséges lesz ebben a témában is tutorial, illetve ugyan ez illustratorral. Előre is köszönöm a választ!
-
-
2011. március 14. hétfő - 12:34
meg mi ez a <link rel="chortcut icon" href…. nem is mondod …asdasdas
-
-
2011. március 9. szerda - 18:25
helloka van egy aprócska kérdésem, ahogy látom, te egész jól vágod ezt az egész webes dolgokat! Akkor miért nem saját oldalad van, azaz nem bunkóságból. XD Azaz mert wordpreselsz, ha teis tudnál csinálni egy sajátot?
-
-
2011. március 9. szerda - 21:06
A lényeg, hogy találd meg a magadnak megfelelőt! 😀
-
-
2011. március 9. szerda - 17:07
Helló
A tutoriál jó lett. A gépen a karakter kódolás jó, de ha felteszem internetre, akkor mindig baj van az ékezetekkel. Próbáltam megoldani, de nem jött össze.
Szerinted hogyan lehetne megoldani?
Köszi a segítséget előre is!
Üdv.: BeluDavid
link:
http://beludavid.weboldala.net/tutorial
http://beludavid.atw.hu-
-
2011. március 9. szerda - 17:19
De az http://okhost.eu -n van egy másik oldal is amit én szerkesztek, de az oldalt nem én csináltam ha nem letöltöttem és minden jó.
De nem tudom mi a különbség a kettő oldal kódja között.
link:
http://belusuli.weboldala.net
-
-
2011. február 3. csütörtök - 23:11
Hali!
Már az elején nem másolta a CS5 ki a contentnek a layer effektjeit az új lapra, megoldottam, de nem értem neked hogyan másolja át az effekteket? Nekem csak egy üres réteg másolódik át. Előre is köszi!-
-
2011. február 9. szerda - 08:23
Ok, köszi így müködik!
-
-
2011. január 23. vasárnap - 16:51
Szia!
Köszi a videókat! Már várom a többit! Sokat segítettek! -
2011. január 10. hétfő - 21:07
Helló Cyrex ! Nagyon jók a tutorialjaid ,igényes és ami legfontosabb érthető! 🙂
Lenne egy kérésem vagy inkább kérdésem ,olyan tutorial videot nem tervezel ahol WordPress CMS -rendszerére készítesz el egy sablont?
Szerintem népszerű lenne…
Előre is köszönöm válaszod-
-
2011. január 11. kedd - 11:43
Szia! Hát aki nem tud egy cms rendszert használni illetve felinstalálni az megérdemli a sorsát 😛 De azért köszi hogy visszaírtál
-
-
2011. január 11. kedd - 11:55
Rendben köszi a Gyors választ ! 🙂
-
-
2011. január 10. hétfő - 20:12
10px-el kevesebb lett a height a news divnél 😛
-
2011. január 10. hétfő - 20:24
Igen, ezt utólag én is észrevettem, de szerencsére nem befolyásolta az eredményt. Mondjuk jó lenne megtanulnom kivonni és összeadni rendesen
-
2011. január 11. kedd - 17:52
hát meglehet de am jó lett naon főleg hogy mostmá azt is tudom hogy hogy kell olyan fix szövegdobozt csinálni vagy mit
-
-
2011. január 10. hétfő - 18:38
Lécciii enyémet is értékeljétek, bár én nem csináltam küldöm logo-t…
Léciike 🙂
-
2011. január 9. vasárnap - 17:56
Szia…tök jó lett az oldi…még nem töltöttem fel a tárhelyre, ezért csak a png képet mutatom meg…a menüt még ne nézd, azon még alakítok…
http://kepfeltoltes.hu/110102/template_www.kepfeltoltes.hu_.png
Egyébként az lenne a kérdésem h h lehet azt megcsinálni, hogy ha vki bejelentkezett, csak akkor lásson bizonyos menüpontokat…tehát regisztrált, bejelentkezett, és utána a menüsorból eltűnne a regisztráció, és a bejelentkezés menüpont, de előjönne a kijelentkezés, és még pár egyéb menüpont…ezt h lehet megoldani?…gondolom változókkal…szval ebben majd hosszabb segítségre lenne szükségem, mert végignéztem a html+css “tanfolyam”-ot, de erre nem láttam bennük megoldást…vagy csak nem vettem észre…lécci segíts!…jah és a lapomat a menü kivételével légyszi értékeld!…köszi!!!
-
2011. január 10. hétfő - 18:36
Én is értékelni szeretném 🙂
4,5 🙂Ha ennyire jól nyomod 🙂
Márpedig eléggé, akkor egy még jobb “logó”-t, “fejléc-“et is összekovácsolhatsz 🙂 😉 -
-
2011. január 10. hétfő - 19:01
Nekem megvilágosodott.. 😛 🙂
Én csak értékeltem mester 🙂
-
2011. január 10. hétfő - 19:09
Egyébként én is kezdő szinten vagyok… a html + css ben…
De addig is a desingel eléggé jól lehet gyakorolni a photoshopban pár dolgot 🙂 -
-
2011. január 10. hétfő - 19:19
Huuu már nagyon sokat tanultam tőled… 🙂
Köszy, már várom 🙂 -
2011. január 10. hétfő - 23:47
Kosz szepen 🙂 erre sztem nagy erdeklodes is lesz 🙂 es lehet tudni h kb mikor?
-
-
2011. január 8. szombat - 16:20
ÜDV Cyrex! Nagyón jók ezek a tutorialok, én így képzelek el egy jó tutorialt, grat hozzájuk.Hasonlóképpen szeretném kialakítani a weboldalamat és a kérdésem viszont a következő lenne, hogyan írjam meg azt, hogy ha rákkatintok az egyes menü pontokra akkor csak a pl. content DIV tartalma változzon? írjam meg külön-külön a HTML oldalakat vagy kilehet valahogyan sakkozni? persze csak HTML+CSS-t használok énis, esetleg ha valami scriptel ha lehetne vagy FLASH.
-
2011. január 9. vasárnap - 13:02
Ez érdekes…
Erre én is kíváncsi vagyok 🙂Köszy Pepe a kérdést 😉
-
-
2011. január 10. hétfő - 05:23
Fuha koszi szepen a valaszt, de azt hiszem maradok annal a megoldasnal,hogy kulon kulon megirom az oldalakat ha rakattintok az egyes menupontokra es akkor csak a div tartalma fog valtozni a korites valtozatlan marad tehat atmasolom, vagy ez a megoldas nem valami megfelelo?
-
2011. január 10. hétfő - 05:33
Vagy esetleg ha nem tul nagy keres lehene egy ilyen video konkretan erre az oszi hangulatu weboldalra. Egyebkent mijen progival veszed fel a videokat ?
-
-
2011. január 6. csütörtök - 17:36
Nagyon köszy, sokat segítettél 🙂
De lenne egy kérdésem…
[mint mindig] 😛Azt szeretném, kérdezni, hogy van-e valami olyan beálítás css-ben, hogy a ne legyen az, hogy a képre ha bal egérrel simán rákatt, nyomvatartod, és ilyenkor a kép simán kihúzható a böngészőből…
És ugye most nem a jobb egér kattra gondoltam, na meg az minek ha css-ben dolgozunk 🙂Válaszodat előre is köszönöm 😉
Tisztelet: Brien 😉
-
2011. január 6. csütörtök - 19:47
És ez mire lenne jó? Mert én pl. rendszeresen használom ezt a funkcióját a Firefox-nak, direktbe a böngészőből be lehet húzni a Photoshopba a képet anélkül, hogy le kellene menteni vagy screenshotot csinálni róla.
Ha annyira zavar, akkor tedd be háttérképképként a képet és akkor szerintem nem lehet “elhúzni”. Vagy lebegtess fölé egy láthatatlan DIV-et, bár nem tudom, hogy az megoldja e. Vagy csináld flash-ben az egész oldalt, akkor biztos, hogy senki sem fogja elmozgatni a böngészőben
-
2011. január 7. péntek - 18:51
Köszy a választ, igen ha belegondolok semmi értelme 🙂
Értem, annyit nem ér meg, am én is úgy csinálom sokszor a photoshopban 🙂
Igazad van, nem tudom, konkrétan nem zavar 🙂Egyébként én is felépítettem 1 hasonló oldalt mint te, csak gyakorlás képen köszy még 1× 😉
by: Brien
-
-
2011. január 4. kedd - 19:29
Üdv.
Nagyon szépen köszönöm a videót.
Nagyon hasznos volt! -
2011. január 4. kedd - 15:14
Helló!
Én elakadtam ott, hogy a hátteret lementem. Megcsinálom úgy, ahogy a videóba mondod(kijelölöm -> ctrl+c -> ctrl+n- > ctrl+v. De mégse a háttérképet rakja be az új dokumentumba hanem egy sima fehér réteget. Ennek mi lehet az oka?-
-
2011. január 4. kedd - 16:22
Köszi tényleg így működött 🙂
-
2011. január 4. kedd - 17:45
Jaj 😀
Van még mit fejlődni:D
Már a kódolásnál járok, de a képek valamiért ismétlődnek és elvannak csúszva kicsit. Ennek mi lehet az oka?
Bocsi h ilyenekkel zaklatlak:S -
2011. április 16. szombat - 10:49
Helló!
Én is így jártam, de nálam a ctrl+c, ctrl+shift+c kombinációk nem is aktívak, akármit csinálok. Apropó: az elkészült képet milyen formátumba kell menten? A videóban már csak két réteg és egy plusz content-réteg van. Össze lettek fésülve a többiek? -
-
-
2011. január 4. kedd - 11:36
Szia
Nagyon hasznosak a videóid végre eltudom készíteni ez alapján a saját normális honlapomat Photoshopot sikerült megtanulnom elég magas szinten az évek során de neked köszönhetően most megtanulhatom a html+css használatát. Köszönöm a jó minőségű és érthető videóidat. -
2011. január 4. kedd - 11:30
Nagyon hasznosak a videók szerintem, sokat lehet tanulni belőlük.
Várom az új videókat majd 🙂 -
2011. január 4. kedd - 08:16
Szia
az előző videó alapján nekem így sikerült:
http://kepup.vacau.com/images/589template.jpgNagyom jók a videóid,igen hasznosak.
Köszönöm szépen ezt a videót is 🙂
Keresés a blogon
Kategóriák
Legújabb hozzászólások
-
Bootstrap carousel
Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...
-
HTML5 + CSS3 menü
Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...
-
Responsive menü
Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...
-
Scrollbar színezgetés CSS-sel
Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...
-
Bootstrap carousel
Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...
-
A flexbox model
Lesz. Folyamatban van....
-
Scrollbar színezgetés CSS-sel
Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...
-
A villanyszerelés örömei panelben
A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...
-
A villanyszerelés örömei panelben
Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...
-
Scrollbar színezgetés CSS-sel
Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...
-
HTML + CSS űrlap
Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....
-
HTML + CSS űrlap
Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...
Hali. Azt akarom kérdezni, hogy te honnan veszel ötleteket? Mert én többször is próbáltam saját oldalt tervezni, de sose sikerült. 1 volt ami jó volt de 1 évembe telt, és nagyon sokat változtattam mindig.