Van csomó oldal ahonnan lehet inspirálódni, illetve nem árt követni külföldi webdesign blogokat.
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.
Nézegettem más oldalakat, de ha nekiálltam tervezni egyet, az katasztrófa lett 😀 Jobb ha senki nem látja.. 😀
Szia
Nekem a szovegek kilognak a container-en kivulre. Mit irhattam rosszul?
Koszi
Koszi a valaszt. Sikerult kijavitani. 🙂
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
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á!
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 semmit
Style.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;
}
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
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?
Rendben,már megyen,köszönöm 🙂
Kérlek nézzétek meg az enyémet is.
http://www.manofaktura.co.cc/other/cyrex_autumn
Köszönöm.
Jó lett. De a menü FF-ben furcsa. Túl nagy a padding.
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 ? 😀
Köszönöm!
Dolgozom a problémán!
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
Ezt elfelejtettem!
http://kepfeltoltes.hu/view/120803/V_g_lap01_www.kepfeltoltes.hu_.jpg
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!
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.
“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"); ?>
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?
** 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
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.
Ü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.
Elírtam a dolgot!
Ez a helyes:
div#header {
width: 1024px;
height: 398px;
background-image:url(../pic/bg_header.jpg);
}
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.
A nagy igyekezetembe nem zártam le a containert a html-be,így nem tudtam css-be formázni.
Egyébként a backgroundnál kihagytad a két aposztrófot.
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
-o-box-shadow: szerintem ez az.
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!
meg mi ez a <link rel="chortcut icon" href…. nem is mondod …asdasdas
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?
A lényeg, hogy találd meg a magadnak megfelelőt! 😀
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
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
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!
Ok, köszi így müködik!
Szia!
Köszi a videókat! Már várom a többit! Sokat segítettek!
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
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
Rendben köszi a Gyors választ ! 🙂
10px-el kevesebb lett a height a news divnél 😛
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
Lécciii enyémet is értékeljétek, bár én nem csináltam küldöm logo-t…
Léciike 🙂
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!!!
É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 🙂 😉
Nekem megvilágosodott.. 😛 🙂
Én csak értékeltem mester 🙂
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 🙂
Huuu már nagyon sokat tanultam tőled… 🙂
Köszy, már várom 🙂
Kosz szepen 🙂 erre sztem nagy erdeklodes is lesz 🙂 es lehet tudni h kb mikor?
Ü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.
Ez érdekes…
Erre én is kíváncsi vagyok 🙂
Köszy Pepe a kérdést 😉
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?
Vagy esetleg ha nem tul nagy keres lehene egy ilyen video konkretan erre az oszi hangulatu weboldalra. Egyebkent mijen progival veszed fel a videokat ?
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 😉
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
Üdv.
Nagyon szépen köszönöm a videót.
Nagyon hasznos volt!
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?
Köszi tényleg így működött 🙂
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
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?
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.
Nagyon hasznosak a videók szerintem, sokat lehet tanulni belőlük.
Várom az új videókat majd 🙂
Szia
az előző videó alapján nekem így sikerült:
http://kepup.vacau.com/images/589template.jpg
Nagyom jók a videóid,igen hasznosak.
Köszönöm szépen ezt a videót is 🙂
Idővel helyrejön magától....
Üdv. Annyi lenne a kérdésem, hogy nemrég frissítettem a weboldalamon az SSL titkosítással kapcsolatos kulcsokat, certificate-okat, és minden böngészőb...
Nem vagyok programozó, de ezek nagyon alap dolgok. A WP-ben használt függvények nevei és paraméterei megtalálhatók a dokumentációban....
Szia Tamás! Valahol régebben írtad, hogy te webdesigner vagy és nem webfejlesztő (ahol már kódolás kell), mégis profin vágod a php-t. pl., hogy hívju...
Nem tudom, én nagy projektekbe csak alvállalkozóként megyek bele ahol órabérben lehet számlázni és a fővállalkozó garantáltan fizet. De azt is csak ak...
Köszönöm szépen!...
add_action( 'wp_print_styles', 'remove_css', 100 ); function remove_css() { wp_dequeue_style( 'wp-block-library' ); wp_deregister_style( 'wp-b...
Szia Tamás! Hogy lehet kigyakni a head-ből az új, 5.0.2-es wordpress Gutenberg CSS link-rel sorát? Ezt: Próbáltam egy csomó remove_action-t de ...
Az előleg hány százalék? Ha megcsinálod az egészet, és mégsem kell neki, akkor is bukod a teljes munkadíjat, nem? Vagy fázisonként fizettesz vele?...
A media object-ed tudod erre használni: https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp...
Kedves Tamás! Nagyon szuper ez a videód is. Szeretnélek megkérdezni, hogy Bootstrap 3-ban működik-e az, hogy a dobozok szöveges tartalmát nem a doboz ...
Ki az a Sanyi?...
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.