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ó

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 }
}

122 hozzászólás

  1. 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; }
    }

    • 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.

    • 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. 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;

    • 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. 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/

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

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

  4. 2013. szeptember 4. szerda - 12:10

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

  5. 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?

    • 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. 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

    • 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. 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. 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.

    • 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. 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?

    • 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. 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!

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

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

    • 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?

    • 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. 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. 2013. február 19. kedd - 13:06
    • 2013. február 19. kedd - 13:37

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

  13. 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?

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

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

  14. 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. 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.

    • 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. 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. 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. 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.

    • 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.

    • 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.

    • 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

    • 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. 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;

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

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

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

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

    • 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.

    • 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”?

    • 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. 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?

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

      Sehogy.

    • 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. 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! 🙂

    • 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.

    • 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. 😀

    • 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.

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

      Megvan 😀
      Ezt kerestem:

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

  22. 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

    • 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 !!!

    • 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. 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.

    • 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. 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. 🙂

    • 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.

    • 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.

    • 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”. 🙂

    • 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. 2012. november 24. szombat - 20:07

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

    Üdv. Raim

    • 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. 2012. november 22. csütörtök - 13:02

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

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

      Nem muszáj, lehet pixelben is.

    • 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. 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. 2012. november 19. hétfő - 19:55

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

  29. 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. 2012. november 12. hétfő - 18:53

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

  31. 2012. november 10. szombat - 18:48

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

  32. 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…)

    • 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.

    • 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. 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.

    • 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. 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. 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?

    • 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.

    • 2012. november 7. szerda - 22:09

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

  36. 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.

    • 2012. november 7. szerda - 10:10

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

    • 2012. november 7. szerda - 10:43

      Nem hiszem. Nem foglalkozom programozással.

    • 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. 2012. november 4. vasárnap - 15:31

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

    • 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!)

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

      így sem jó :S

    • 2012. november 7. szerda - 10:45

      De mi a gond egyáltalán?

    • 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. 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. 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.

    • 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. 2012. november 3. szombat - 20:59

    Jó lett. Egy új tutorial kellett. 🙂

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...