Mérei Tamás webdesigner

Tutorial: responsive webdesign alapok

Szerző:   |   2012-11-03

Meglepődve tapasztaltam, hogy ismét tudok hosszú videókat feltölteni a YouTube-ra, úgyhogy végre nem kell darabolnom. Ennek örömére készítettem egy hosszabb anyagot a reszponzív weboldaltervezés alapjairól.

A videóban elkészített oldalt ide kattintva tudod megnézni.

Videó

HTML forráskód


<div id="wrapper">
	<header>
		Responsive <span>Webdesign</span>
	</header>
	<nav>
		<a href="">elso</a> •
		<a href="">masodik</a> •
		<a href="">harmadik</a> •
		<a href="">negyedik</a>
	</nav>
	<section>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="1.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
		<article>
			<h1>Lorem ipsum</h1>
			<figure>
				<img src="2.jpg" alt=""/>
				<figcaption>
					kep leirasa par szoban...
				</figcaption>
			</figure>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie augue et nisl scelerisque nec consectetur est pharetra. Fusce imperdiet luctus justo, in sodales ante accumsan et. Vestibulum arcu sapien, aliquam ac porta ac, pellentesque id nibh. Pellentesque ut enim sed eros condimentum condimentum. Vivamus erat nisi, consectetur vitae gravida at, porttitor non diam. Proin non mauris eu felis sagittis tincidunt. Mauris eget elit arcu. Ut lectus magna, venenatis ac placerat vel, sodales ut sapien.</p>
		</article>
	</section>
	<aside>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas erat est, faucibus sit amet adipiscing ut, mattis in felis. Mauris metus mi, molestie non dignissim a, aliquam ut elit. In in lorem nisl, nec porta nunc. Vivamus vitae ullamcorper eros. Fusce sed sapien euismod lacus faucibus egestas ut a felis. Vivamus porta neque nec turpis porta sed semper enim hendrerit. Quisque ut est sem. Aenean in suscipit lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus elementum metus in diam tincidunt accumsan. Sed vitae est dapibus massa sollicitudin iaculis id non dui. Proin ut tellus quis sem tincidunt consectetur. Aenean in ullamcorper lorem.
	</aside>
	<div class="clear"></div>
</div>
<footer>
	<a href="">elso</a>
	<a href="">masodik</a>
	<a href="">harmadik</a>
	<a href="">negyedik</a>
</footer>

CSS forráskód


* { padding: 0; margin: 0; border: 0 }
body {
	background: url('bg.png') #ab5927;
	font-family: arial;
	font-size: 100%;
	color: #f0c9b1
}
a { color: #FFB400; }
div.clear { clear: both; }

div#wrapper {
	width: 800px;
	margin: 20px auto;
	border-radius: 10px
}
header {
	font-size: 360%;
	font-weight: bold;
	color: #fff;
	font-family: "trebuchet MS";
	text-shadow: 2px 2px 2px #6d2a15
}
header span { color: #000 }
footer {
	width: 760px;
	margin: 20px auto;
	font-size: 85%;
	background: rgba(129,63,21,0.5);
	padding: 20px;
	text-align: center
}
footer a { margin: 0 15px; }
nav {
	padding: 10px 0;
	margin: 20px 0;
	color: #000;
	box-shadow: 0px 0px 5px #6d2a15;
	background: #ffb400;
	background: -moz-linear-gradient(top,  #ffb400 0%, #ff8500 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb400), color-stop(100%,#ff8500));
	background: -webkit-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -o-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: -ms-linear-gradient(top,  #ffb400 0%,#ff8500 100%);
	background: linear-gradient(to bottom,  #ffb400 0%,#ff8500 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb400', endColorstr='#ff8500',GradientType=0 );
}
nav a {
	color: #000;
	text-decoration: none;
	margin: 0 10px;
	font-family: "trebuchet MS"
}
nav a:first-child { margin-left: 20px }
nav a:hover { text-decoration: underline }
section {
	width: 558px;
	float: left;
	margin: 0 20px 0 0;
	padding: 0 20px 0 0;
	font-size: 80%;
	border-right: 2px dotted #c57240
}
section article { margin: 0 0 20px 0 }
section article p {
	text-align: justify;
	line-height: 140%
}
section article h1 {
	margin: 0 0 10px 0;
	font-size: 150%;
	color: #ffb400;
	font-family: "trebuchet MS";
	text-shadow: 1px 1px 1px #6d2a15
}
aside {
	float: right;
	width: 200px;
	font-size: 80%
}
figure {
	padding: 10px;
	background: #c57240;
	margin: 0 0 20px 0
}
figure img { max-width: 100% }
figure figcaption {
	font-style: italic;
	font-size: 80%;
	margin: 6px 0 0 0
}
@media only screen
and (min-width : 480px)
and (max-width : 800px) {
	div#wrapper { width: 600px }
	header { font-size: 320% }
	section { width: 408px }
	aside { width: 150px }
	footer { width: 560px }
}
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	div#wrapper { width: 400px; }
	header { font-size: 200%; }
	section { width: 400px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { width: 360px }
}
@media only screen
and (min-width: 240px)
and (max-width: 320px) {
	div#wrapper { width: 300px; }
	header { font-size: 200%; text-align: center }
	header span { display: block }
	nav { text-align: center }
	nav a { margin: 0 3px }
	nav a:first-child { margin: 0 3px }
	section { width: 300px; padding: 0; margin: 0; border: 0 }
	aside { display: none }
	footer { display: none }
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

122 hozzászólás

  1. blackdog476
    2014. február 9. vasárnap - 11:49

    Szia cyrex! Nagyon nem akarok belemenni, de hátha tudsz segíteni! Van az ATW-n egy weblapom, de nem megy rajta ez a responsive webdesign! (www.danix99.atw.hu/html11997733/index.php)
    firefox böngészőben próbálom, a tiédet rendesen lekicsinyíti.
    Már próbáltam különböző méretekkel is (pl “and (min-width : 800px) and (max-width : 1000px)” ) de nem megy :/ minimum 800 max 1000nél átkéne változnia a szöveg színének kékről pirosra “szerver adatai” rövidennél, valamint a kép alatti szövegnek el kéne tűnnie, de nem megy :/

    @media only screen
    and (min-width : 800px)
    and (max-width : 1000px) {
    div#container header p { display: none; }
    div#bold { color: red; }
    }

    • cyrex
      2014. március 27. csütörtök - 16:52

      Lokálba működik? Ott is kipróbáltad? Ha ott sem akkor elírtál valahol valamit.

    • Donatus
      2014. március 29. szombat - 19:43

      ATW-nél a frameset miatt elvileg nem működik a reszponzivitás. Keress normális szolgáltatót.

  2. O. Arpi
    2014. február 6. csütörtök - 19:45

    Dear Balázs, A webdesign videónál background picture is van, és szín is.
    Ez nem lehet, hogy elírás, mivel a background picture-nak eleve van színe.
    Lehet h hülyeséget kérdezek, mert eléggé kezdő vagyok, köszi !
    background: url(‘bg.png’) #ab5927;

    • cyrex
      2014. március 27. csütörtök - 15:41

      background-image van és background-color. Vagy, ha csak simán background-ot írsz akkor utána lehet képet és színt is megadni egyben.

  3. olah Arpi
    2014. február 4. kedd - 20:16

    Dear Balázs, Köszi a segítséget! Nézem a videóban megadott linket, de nem tűnik el a footer. Meg tudnád nézni, hogy neked eltúnek-e? Köszi, Oláh Árpi. A link : http://cyrex.hu/uploads/2012/11/responsive_layout/

    • cyrex
      2014. március 27. csütörtök - 16:46

      Eltűnik. Tamásnak hívnak egyébként.

  4. T.Kovács Tünde
    2013. szeptember 4. szerda - 12:10

    Köszönöm a videót, nagyon sokat segítettél! 🙂

  5. H. Péter
    2013. július 29. hétfő - 08:51

    Valaki tudna segíteni? Beállítom a különféle felbontású készülékekhez a css-t a következő felbontásokkal:
    and (min-width : 800px)
    and (max-width : 1280px)
    majd
    and (min-width : 480px)
    and (max-width : 800px)
    majd
    and (min-width : 320px)
    and (max-width : 480px)
    Az 1280*800-as felbontású táblagépen a 480*800-as felbontású beállítások jelennek meg, a 480*800-as felbontásún pedig a 320*480, és érdekes módon a 320*480-as felbontású telefonon a 320*480-as beállítások…
    Ha a második beállításban a 480*799-es méreteket adom meg akkor az 1280*800-as készüléken a megfelelő beállítás jelenik meg. Ezt a logikát követve, hogy a 480*800-as felbontású készüléken a 480*800-as beállítások jelenjenek meg a 320*480-as felbontást 320*479-re állítom, viszont már nem történik változás, ugyanúgy a 320*480-as beállítások jelennek meg…
    Tehát mit kell csinálni, hogy a megfelelő beállítások jelenjenek meg az egyes készülékeken?

    • H. Péter
      2013. július 29. hétfő - 09:45

      Közben rájöttem, hogy nem mindegy az sem, hogy hogyan tartom a készüléket a kezemben állva vagy fekve…, mert akkor valóban jó. De ha elforgatom álló helyzetbe akkor már az eggyel kisebb készülékekre írt beállítás lesz az aktív. Azt hogyan lehetne megcsinálni, hogy függetlenül attól, hogy fekve vagy állva fogom a kezemben a készüléket, akkor is ugyanazok a beállítások legyenek fekvő illetve álló készüléknél?

  6. _dan
    2013. május 24. péntek - 16:03

    Helló!

    Big up! Sokat segítenek a videóid. Esetelge tudsz abban segíteni, hogy fenti megoldás IE7 IE8-ban is működjön? Nekem sehogy nem jön össz….

    Köszi D

    • cyrex
      2013. május 26. vasárnap - 18:58

      Az IE 7-8 nem támogatja a CSS media query-ket úgyhogy ott nem fogod tudni ezeket működésre bírni. Biztos van rá valami JS hack, de mi értelme ezzel szenvedni mert media query-t mobil eszközökre történő optmalizálásnál használunk, és nincs olyan mobil amin IE8 fut úgyhogy ez a probléma jelentőségét veszti.

  7. imre400
    2013. március 20. szerda - 10:44

    Szia Cyrex!
    Nagyon jók a videóid! Web-programozó szakon tanulok immáron 2 éve
    de sok újdonságot láttam a bemutatóidba aminek hasznát is veszem. Köszönöm! 🙂
    Csak így tovább!
    Üdv.: Imi

  8. Gábor
    2013. március 10. vasárnap - 17:07

    Szia!
    Nagyon szuperek a videók és hatalmas segítség. Köszi. Lenne egy – két kérdésem. Először is, hogy a rengeteg videón, tutorialon túl, milyen könyvet tudnál ajánlani, egész kezdő szinttől? Most vetettem magam bele a webdesign világába és a honlapszerkesztéshez nehezen találok alap könyveket. Másik, pedig Notepad++-ban megírom jól a tageket, de a megjelenítésnél az ékezetes betűket bénán jeleníti meg, míg sima jegyzettömbből normálisan. Eddig nem sikerült megtalálni a beállítást.

    • cyrex
      2013. március 20. szerda - 12:28

      Nézd végig a HTML+CSS videókat, ott megtalálod a megoldást a karakterkódolás problémára.
      Ne vegyél könyvet, a neten mindent megtalálsz. A youtube roskadásig van jobbnál jobb oktató anyagokkal.

  9. FLaci
    2013. március 10. vasárnap - 15:10

    Szia, azt szeretném kérdezni, hogy van-e valami megoldás arra, hogy ha nincs elég tartalom az oldalon, akkor az oldalsáv ne csússzon be az oldal bal oldali részébe?

    • cyrex
      2013. március 20. szerda - 12:31

      Használj jQuery plugint, ha optimális helykitöltést akarsz. Ilyesmire gondolok pl.:
      isotope.metafizzy.co/index.html

  10. Segíts
    2013. március 3. vasárnap - 18:43

    Szia! Lenne egy kérdésem.
    Létrehoztam az oldalam és szerintem nagyon jó lett, amit neked köszönhetek. Nagyon ügyesen csinálod a tutorial videókat és ezért én is megértettem. Amint létrehoztam az oldalam, hogyan tudok neki linket adni? Más személy, hogy tudja megtekinteni az oldalt? pl: http://www.valami.hu . Mivel jelenleg valami ilyen cím áll file:///C:/…….index.html
    Várom válaszod!

    • cyrex
      2013. március 3. vasárnap - 19:58

      Veszel domain nevet + tárhelyet és feltöltöd.

    • Segítség
      2013. március 4. hétfő - 15:41

      Tehát fizetni kell érte? Nem lehet úgy megoldani, hogy ne kelljen érte fizetni? Mennyibe kerül a tárhely és a név?

    • cyrex
      2013. március 4. hétfő - 16:40

      Vannak ingyenes tárhelyek. Egyszerűbb, ha egyből a gugliba írod be és akkor nem kell várnod a válaszra.

  11. Cody
    2013. február 19. kedd - 15:33

    Most már jó. Csak siettem el aztán nem láttam, hogy nincs benne a doctype, html, head, title, body rész..

  12. Cody
    2013. február 19. kedd - 13:06
    • cyrex
      2013. február 19. kedd - 13:37

      Ezzel nem sokra megyek. HTML + CSS-ről csinálj screenshotot.

  13. Cody
    2013. február 19. kedd - 11:38

    Helló.
    Csinálok az asztalon egy mappát aminek a neve test. Megnyitom a Notepad++ -t, csinálok egy index.html file-t plusz egy style.css file-t lementem mind a kettőt a test nevű mappába de ha megnyitom az index.html-t akkor nem teszi hozzá a css szerkesztést. Ezt, hogy lehetne megcsinálni?

    • cyrex
      2013. február 19. kedd - 12:49

      Ne az asztalon csináld, hanem mondjuk a C gyökérben.

  14. tichi43
    2013. február 14. csütörtök - 20:01

    Nagyon jó lett az új oldal, és a videóid is igényesek. Bár nem ártana több…

  15. shirfy
    2013. február 13. szerda - 22:58

    Nem szeretnék spammelni, de van egy javascript file, amivel a css-t dinamikussá lehet tenni változókkal, mixin-ekkel, funkciókkal. Ezzel megkönnyítve és gyorsabbá téve az írását.
    Például:

    div.shadowed_silver{
    	box-shadow:1px, 1px, 10px, 5px, #ccc;
    	-moz-box-shadow:1px, 1px, 10px, 5px, #ccc;
    	-webkit-box-shadow:1px, 1px, 10px, 5px, #ccc;
    }
    div.shadowed_white{
    	box-shadow:3px, -5px, 5px, 5px, #fff;
    	-moz-box-shadow:3px, -5px, 5px, 5px, #fff;
    	-webkit-box-shadow:3px, -5px, 5px, 5px, #fff;
    }
    

    helyett lehet így írni:

    .b-shadow(@x, @y, @blur, @spread, @color){
    	box-shadow:@arguments;
    	-moz-box-shadow:@arguments;
    	-webkit-box-shadow:@arguments;
    }
    
    div.shadowed_silver{
    	.b-shadow(1px, 1px, 10px, 5px, #ccc);
    }
    div.shadowed_white{
    	.b-shadow(3px, -5px, 5px, 5px, #fff);
    }
    

    Elsőre lehet, hogy bonyolultnak tűnik, de igazából egyszerű és nagyon sok lehetőség nyílik meg a használatával. A css átláthatatlan szintakszisa helyett fa struktúrával is írhattok eztán. Akit érdekel az a http://lesscss.org oldalon rátalál, elég jó tutorial is van róla.

    • cyrex
      2013. február 14. csütörtök - 08:07

      Ez jó cucc, nagy projektnél nekem is volt már hozzá szerencsém.

  16. Icanhascode
    2013. január 29. kedd - 23:21

    Nagyon köszönöm a tutorialt. Az oldalamon feltüntettem a te oldaladat mint a design forrása 🙂

  17. Dk
    2013. január 28. hétfő - 14:20

    Szia. Nekem az lenne a kérdésem, hogy mivel lehet így a source kódot kiírni az oldalamra?

  18. martin
    2013. január 3. csütörtök - 17:55

    Heló
    Tetszik a videód,az a problémám hogy(nem ennél a honlapnál hanem saját)
    Ha Ctrl+Görgővel ránagyítok szétcsúszik az oldal.Néztem ez az oldal nem csúszik szét pedig van bent százalék és px-es értékmegadás is.Ez mitől lehet?Amúgy ez nem böngésző hiba kipróbáltam.

    • Gábor
      2013. május 5. vasárnap - 22:43

      Ezzel én is találkoztam már, és arra jutottam, hogy csak akkor csúszik szét, ha valamelyik elemen van border. A megoldásom pedig az volt, hogy border helyett outline-t használtam.

    • cyrex
      2013. május 5. vasárnap - 23:10

      Elvileg nem kellene szétcsúsznia, mert zoomoláskor mindent arányosan növel.

      Az outline fizikailag nem tesz hozzá az elem méretéhez ellentétben a border-el. Tehát az outline: 10px nem fogja megnövelni 10px-el az elem szélességét oldalanként, hanem rá fog lógni az elem körülötti lévő tartalomra.

    • Gábor
      2013. május 6. hétfő - 14:30

      Azt tudom, de csak így sikerült megoldani 😀
      Itt tesztelgettem http://clas.atw.hu/test ,szépen látszik, hogy kicsinyítésnél elcsúszik, nagyításnál nem (borderrel).
      Miután levettem az 1px-es border-t, és és a szélességet meg a magasságot is 2-2 pixellel megnöveltem már nem csúszott szét, majd ráraktam egy outlinet és nem volt gond. A miértet azóta sem értem :S

    • cyrex
      2013. május 10. péntek - 20:12

      Őszinte leszek: fogalmam sincs miért csinálja ezt. De, ha esetleg rájössz, engem is érdekelne 🙂

  19. Garfield
    2012. december 21. péntek - 22:42

    Üdv!
    Nagyon tetszenek a videóid és ezek alapján csináltam is egy oldalt.
    Viszont fölmerült az a problémám hogy a színátmeneteket minden böngésző máshogy jeleníti meg. Ha jól emlékszem az egyik videódban erre a problémára választ adtál csak sajnos nem találom azt a videót.
    itt van a színátmenet amire szükségem lenne(mozillában jeleníti meg jól):
    background: -moz-linear-gradient(top, #000 0%, #706A6A 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#9A9595), to(#5A5858));
    background-color:#E0E0E0;

    • cyrex
      2012. december 21. péntek - 22:52
    • Garfield
      2012. december 22. szombat - 22:20

      Köszönöm!
      IE alatt viszont így se működik :((

    • Driftking
      2012. december 23. vasárnap - 15:05

      Állítsd be, hogy támogassa az IE9-et. Régebbi verzió alatt képekkel kell megoldanod.

    • cyrex
      2012. december 23. vasárnap - 15:40

      Elvileg, ha az egész cuccot kimásolod amit generál, akkor működnie kell a régi IE verziók alatt is. Amúgy meg pár nap múlva 2013-at írunk, egyre kevésbé érzem jelentőségét az IE optimalizálásnak.

    • SWDsoft
      2013. január 19. szombat - 20:58

      Szia Cyrex!
      Az utolsó hozzászólásod felkeltette a figyelmem! Miért mondod hogy nem látod értelmét IE-re optimalizálni? Talán belátja a Microsoft hogy esélyük sincsa a többivel szemben, és törlik ezt a remek böngészőt a “köztudatból”?

    • cyrex
      2013. január 19. szombat - 22:13

      A windows XP lassan kimegy a divatból, vele együtt az IE6 is. A statisztikák szerint is egyre kevesebben használnak régi IE-t, illetve a forgalom egyre nagyobb részét képezik a mobil eszközről érkező userek amiken eleve HTML5 támogató böngészők futnak. Én most már csak IE9 alatt szoktam megnézni az oldalakat amit csinálok, nem érdekelnek a régi verziók. Sokkal fontosabbnak tartom, hogy mobil eszközön is élvezhető legyen az oldal, mint azt, hogy egy 10 évvel ezelőtti böngészőn.

  20. Tóth Tamás
    2012. december 20. csütörtök - 18:58

    Hello
    Azt szeretném kérdezni tőled hogy hogy lehet megcsinálni azt hogy egy weblapról elindítsunk egy bat file-t és szerkesszük a weblapról?

    • cyrex
      2012. december 20. csütörtök - 20:09

      Sehogy.

    • SWDsoft
      2012. december 21. péntek - 15:17

      Max PHP-ban tudsz futtatni fájlt az exec(); függvénnyel. De kliens oldalra sehogy sem fogsz eljutni 😀

  21. Tom007
    2012. december 13. csütörtök - 12:28

    Hali. Azt akarom kérdezni tőled hogy ha van egy ügyfeled aki weblapot/honlapot kér akkor a tartalmat hogy írod le? Mi alapján, és hogyan könnyebb? Kikérdezel tőle mindent és lejegyzeteled? Én már összehoztam
    1-2 oldalt gyakorlásképpen (sima HTML+CSS). Azóta már sokat tudok ebből a témából. Én szeretnék embereknek honlapot készíteni. Mit tanácsolsz hogy kezdjem, a többit értem csak azt nem hogy a weblap Tartalmát hogy intézed el?
    – Blogodon csak azt olvastam hogy a végén mégsem az lesz amit az ügyfél eredetileg kért mert mindenki másféleképpen mondja el. Ezt elolvastam már nem is egyszer mert megfogott! 🙂

    • cyrex
      2012. december 13. csütörtök - 15:59

      Felteszed az alapvető kérdéseket. Ha valaki nem tud mindegyikre egyértelmű választ adni, vagy nem érti a kérdést akkor elkezded magyarázni, hogy mi mit jelent és mész tovább. Addig kérdezel amíg el nem jutsz egy olyan állapothoz ami alapján már el tudsz kezdeni dolgozni. Nem olyan bonyolult ez.

    • Tom007
      2012. december 13. csütörtök - 16:16

      Kösz szépen! Majdcsak belejövök még jobban saját tapasztalatok alapján. 😀

    • Tom007
      2012. december 13. csütörtök - 20:09

      Bocsi bedudnád linkelni azt amit irtam hogy megfogott és többször elolvastam már rég volt és most nem találok oda..Szerintem nagyon rejtett helyen van. Már 2 órája keresem mobilon.

    • Tom007
      2012. december 13. csütörtök - 22:38

      Megvan 😀
      Ezt kerestem:

      cyrex.hu/2010/01/17/te-mennyiert-csinalsz-weboldalt

  22. Bolgár Xénia
    2012. december 11. kedd - 03:04

    Kedves cyrex!

    Köszönöm az oktató videókat. Nagyon örültem, hogy megtaláltalak:D
    1 hete kezdtem el foglalkozni a weboldal készítéssel. jelenleg itt tartok: http://deelylahhu.web-server.hu/ Ne nevessen senki:)
    Nos, ennyit hoztam össze egyenlőre. Mindent tőled tanultam:)
    De lenne egy fontos kérdésem. És arra szeretnélek kérni téged,hogy írj nekem egy email-t, vagy jelölj meg kérlek facebookon, hogy feltudjam venni veled a kapcsolatot. Nem találtam sajnos az oldalon sehol az email címed, vagy telefonszámod.
    Üdv.: Delilah

    • Tom007
      2012. december 13. csütörtök - 12:46

      Miért kéne nevetni? 🙂
      Szerintem 1 hetes kezdéshez képest nagyon jól néz ki !!!

    • Bolgár Xénia
      2012. december 13. csütörtök - 17:03

      Hát kösz:)
      Most már felraktam a másikat is. Sajnos fórumot nem tudok összehozni. Valahogy utána kell járnom. Ugyanezen a címen tudod megjeleníteni.

  23. Ökrös Zoltán
    2012. december 8. szombat - 23:12

    Szia Tamás,
    Csatlakozom az előttem szólókhoz. Én nem vagyok szakmabeli, de a munkáid és útmutatásaid segítségével nagyon sokat tanultam. Azt gondolom így már én is jobb oldalakat tudok majd csinálni. Néhány kérdésem lenne. A media query-ben megadott csökkenés a forráskódod alapján csak a 2. szintre csökken Firefox-ban. 9.0.1, de Safari alatt működik. A Firefox verziója nem jó, vagy mi lehet a hiba? A Notepad++-ban a többablakos módot használod, amit szeretnék én is beállítani, de nem akar sikerülni. Röviden leírnád ezt nekem. A harmadik kérdés, hogy melyik plugin-t használod az oldalon az ellenőrzésre? Firefox – Web Developer? Még annyit, hogy az itt leírtak alapján csökkenthető egy JQuery slideshow mérete is akár? Válaszaidat előre is köszönöm.

    • cyrex
      2012. december 8. szombat - 23:51

      Nekem firefox-ban is jól váltja a méreteket. Fogalmam sincs hányas verzió, most raktam fel az aktuális legfrissebbet.

      A notepad-ben így tudsz megnyitni fájlt a másik ablakban:
      http://kepfeltoltes.hu/121208/6562418821_www.kepfeltoltes.hu_.jpg
      A fülön jobb gomb, majd mozgatás a másik nézetbe.

      Nem használok Firefox-ot fejlesztéshez, csak krómot, mostanában ez esik jobban kézre. A króm beépített inspector-át használom kód turkálásra.

      Mivel a jQuery slideshow méreteit is CSS-ben adod meg, így azt is olyan méretűre alakítod a media query-k segítségével amilyenre csak szeretnéd 🙂 De én pl. el szoktam tüntetni mindenféle mozgó elemet az oldalról a mobilos méretnél. Az a halálom, mikor eleve kifolyik a szemem a kis kijelzőt olvasgatva és mellé még mozog is valami az oldalon 🙂

  24. KMartinR4
    2012. december 8. szombat - 18:58

    Szia, cyrex!

    Én szeretnék egy véleményt kérni az oldalamról, ha nem gond. 🙂 A te tutorialjaid alapján hoztam össze már vagy egy éve.
    Azóta többszöri átalakításon esett át, de az alapja úgy-ahogy megmaradt.
    Link: http://kmartinr4.nezzed.hu/

    Illetve még egy olyan kérdés, hogy neked melyik a kedvenc böngésződ? Nekem a Firefox. 🙂

    • Ps
      2012. december 8. szombat - 21:35

      A “Vendégkönyv” elég fura.
      – Nem szólhatsz hozzá, mert rajta vagy a kitiltottak listáján! Bárminemű kérdés esetén jelezz az adminisztrátornak.

    • cyrex
      2012. december 8. szombat - 22:25

      Nekem a betűk kicsit nagynak tűnnek nagy felbontásnál. De amúgy a forráskódja szép.

    • KMartinR4
      2012. december 14. péntek - 08:12

      Hali, a Vendégkönyves hibát javítottam. Az volt a baj, hogy a rank sessiont úgy vizsgáltam, hogy 0 az értéke vagy sem. Csak a 0 a PHP-ban egyenlõ a ninccsel is. :\
      Most már csak akkor vizsgálom az értékét, ha létezik.

      A betûméretet is javítani fogom.
      A forráskódért pedig köszi, ez az egyik “mániám”. 🙂

    • KMartinR4
      2012. december 14. péntek - 20:09

      Most már a betűméretet is változtattam. Most már jónak tűnik, vagy még mindig csökkentsem? 🙂

  25. Raim
    2012. november 24. szombat - 20:07

    Szia Cyrex. Csak megszeretném kérdezni hogy, hogy Privátban van minden videód? 🙂

    Üdv. Raim

    • cyrex
      2012. november 24. szombat - 22:29

      Töröltem a google + accountomat, erre az összes videóm privát lett. Csak úgy tudtam publikusra állítani, ha újból létrehoztam g+ accot. Tiszta röhej.

  26. White#Angel
    2012. november 22. csütörtök - 13:02

    A betűméretet feltétlen %-ban kell megadni?

    • cyrex
      2012. november 22. csütörtök - 19:56

      Nem muszáj, lehet pixelben is.

    • KMartinR4
      2012. november 25. vasárnap - 14:26

      Nekem a betűmérettel kapcsolatban annyi lenne a kérdésem, hogyha pt-ben adom meg, akkor minden felbontásban ugyanakkora lesz?

  27. Ádám
    2012. november 21. szerda - 19:54

    Elképesztően hasznosak a videóid, rengeteget tanultam már belőlük. Remélem a jövőbe sok-sok remek videót teszel még közzé. Köszönöm a munkádat. 🙂

  28. Selene
    2012. november 19. hétfő - 19:55

    cyrex a regisztrációsnál tudsz segíteni írtam ott kérdést!

  29. Tomi92
    2012. november 16. péntek - 10:47

    Hali, tetszik az a sablon amibe írod a forráskódokat. Nagyon jól ki lett találva! 😀

  30. Maximuse
    2012. november 12. hétfő - 18:53

    Üdv!
    Melyik online css generátort használod?

  31. White#Angel
    2012. november 10. szombat - 18:48

    Áhhhh már értem, hogy miért fér ki telón a weboldalan 🙂

  32. KMartinR4
    2012. november 8. csütörtök - 20:32

    Csak egy vélemény: Cyrex, az oldaladat megtervezhetnéd 1600 pixel és szélesebb felbontásra is. Mivel még 1280-1360 pixel felbontásban viszonylag könnyen olvasható az oldalad, de 1600 pixel szélességnél már elég nehezen. (1920-as felbontásban pedig kb. sehogy…)

    • cyrex
      2012. november 8. csütörtök - 21:17

      Nagyítsd fel az oldalt. Én minden oldalt felnagyítva nézek ekkora felbontásnál.

    • KMartinR4
      2012. november 9. péntek - 18:58

      Én is felnagyítom, ha kicsinek találom. Én egyébként 1280 pixelbe nézem. Csak a böngészők legtöbbje olyan, hogy ha felnagyítod, akkor az összes többi oldal is nagyobb lesz.

      Ezeket állítgatni pedig idegesítő tud lenni. (Én Firefox-ot Dragon-t használok egyébként.)

  33. Logicfok
    2012. november 8. csütörtök - 16:56

    Szia cyrex ténleg nagyon jó a videó sok minent még nem értek belőle de szeretném megtanulni tudnál nekem valamit ajánlani ahonnan lehet megtanulni minden kódot, h mi mit jelent HTML,PHP,CSS -ben.Nagyon szépen megköszöném.

    • cyrex
      2012. november 13. kedd - 17:09

      Szerintem itt az oldalon nem nagyon találsz olyan HTML+CSS témát amiről ne lenne anyag. A PHP más téma, ahhoz programozással foglalkozó oldalakon, blogokon keresgélj, vagy a youtube is roskadásig van oktatóanyagokkal.

  34. csabaadi
    2012. november 8. csütörtök - 08:44

    Üdv!
    Köszi szépen a videót nagyon hasznos volt. Már régóta nézegettem de ilyen érthetően még nem magyarázta el senki számomra 🙂 A későbbiekben esetleg láthatunk olyan videókat melybe a gridek szerepéről is beszélsz és még egy kérdésem lenne. Melyek azok a határok amiket ajánlasz mobilhoz, táblához és géphez ? Köszönöm előre is!

  35. KMartinR4
    2012. november 7. szerda - 14:48

    Szia, Cyrex!

    Nekem az lenne a problémám, hogy az oldalam mobilon nem funkcionál! :S Android 2.2 van a telefonomon, de ha valami jQuery-vel szépített elemre kattintok (hírek, menü), akkor kilép a böngésző.

    A menüt azóta megváltoztattam, most már “click” eseményre reagál és egy “toggle”-val jeleníti meg az almenüket. Azonban így sem működik. Próbáltam már a mobil jQuery-t is, de az sem segített.

    Neked mi lenne a tipped?

    • cyrex
      2012. november 7. szerda - 15:56

      Milyen böngészővel nézed? Mert az android beépített böngészője nem a legjobb.

    • KMartinR4
      2012. november 7. szerda - 22:09

      Azzal néztem, Maxthonnal, illetve Opera Minivel. Egyik sem kezeli jól…

  36. Bán Bence
    2012. november 4. vasárnap - 19:53

    Tisztelt Cyrex!

    Nagyon jó a videó. Sokat segített a weboldalam szerkesztésében. Olyan kérdésem lenne, hogy PHP-vel kapcsolatos videók még lesznek?
    Válaszod előre is köszönöm.

    • SWDsoft
      2012. november 7. szerda - 10:10

      Szia! Ha gondolod tudok neked segíteni PHP-ban.

    • cyrex
      2012. november 7. szerda - 10:43

      Nem hiszem. Nem foglalkozom programozással.

    • Bán Bence
      2012. november 10. szombat - 18:32

      Rendben van. Azért köszönöm. SWDsoft tudnál adni egy elérhetőséget ahol megbeszélhetnénk?

  37. beda
    2012. november 4. vasárnap - 15:31

    Nagyon jó tutorial . mindent igy csináltam de nem jó atw-s tárhelyet használok

    • KMartinR4
      2012. november 4. vasárnap - 21:18

      Állítsd át a kódolást “ISO-8859-2”-re. Az ATW nem kezeli jól az UTF-8 kódolást.

      (Megj.: Ne csak a “meta” tagekben állítsd át a kódolást, hanem a szövegszerkesztődben is!)

    • beda
      2012. november 5. hétfő - 21:58

      így sem jó :S

    • cyrex
      2012. november 7. szerda - 10:45

      De mi a gond egyáltalán?

    • beda
      2012. november 11. vasárnap - 20:56

      megnyitom mobilom de lehet nagyitani pedig beállitotam h ne lehessen és nem változik semmi mint ahogy beállitottam

  38. heyho
    2012. november 4. vasárnap - 14:20

    Szia Cyrex!
    Várható ,hogy készítesz PSD to HTML tutorialt?
    Nagyon jó lenne már egy kellően részletes és világos ilyesfajta tutorial magyar nyelven. Mondjuk egy bonyolultam webdesignal.
    Neharagudj ,hogy ide írtam ezt a kérdést de sajnos nemtaláltam elérhetőséget az oldalon.

  39. SWDsoft
    2012. november 3. szombat - 22:03

    Nagyon jó kis tutorial. Ha mobilra is tervezel oldalt, akkor érdemes a user_agent-ből megállapítani, hogy milyen eszközről érkezik a lekérés. Nyílván mivel ez egy webdesign blog, ezért nem a PHP a téma. Csak tippként megemlítettem.

    • cyrex
      2012. november 3. szombat - 22:43

      Amit írsz az egyébként jobb megoldás, mivel ott a HTML kimenetet is tudod befolyásolni, pl. fölösleges képeket eltüntetni. A media query-vel max ráteszel egy display: none beállítást, de attól még ugyanúgy le fogja tölteni a képet, csak nem jelenik meg.

      A responsive megoldásnak kis oldalaknál van értelme, egy komolyabb portálnál vagy webáruháznál mindenképp kell a külön oldal.

  40. Driftking
    2012. november 3. szombat - 20:59

    Jó lett. Egy új tutorial kellett. 🙂

Hozzászólás

Legújabb hozzászólások