Kérlek támogasd egy szavazattal a WebPillangót!

Ha úgy érzed, hogy segítségre találtál a WebPillangón vagy a fórumon, vagy ha csak segíteni szeretnél, minden nap támogathatsz egy szavazattal (amíg a verseny tart).

Szólhatsz ismerőseidnek, szavazhatsz az iskolából, egyetemről, munkahelyről és otthonról is. Minden nap tudsz szavazni annyiszor, ahány internethozzaférésed van.

Új, minőségi leírásokkal hálálom a szavazatokat!

Rég nem írtam minőségi leírásokat, mivel nagyon kevés az időm. Viszont azt megígérhetem, hogy minden 100 szavazatot egy új leírással fogok meghálálni!. A barátaidnak se felejts el szólni :)



Nagyon szépen köszönöm!


A ‘CSS’ kategória arhívuma

Firebug: Firefox, Internet Explorer és társai

Írta: Tupacko | 2010. március 06. | kategóriák: (X)HTML, CSS, Design, JavaScript, Letöltések | Nincs megjegyzés

Minden webfejlesztő rémálma, tisztelet a kivételnek, hogy az elkészült weboldalt Internet Explorer összeférhetővé tegye. Bár a Microsoft webböngészőjének újabb változatai már eléggé standard követőek és szépen jelenítik meg a weboldalak túlnyomó többségét, mégis szükség van a weboldalak trükkös kódokkal való teleszúrkálására, mivel sokan használnak régebbi böngészőket.

Elolvasom a teljes bejegyzést »

10 hasznos dolog weboldal fejlesztőknek

Írta: Tupacko | 2009. október 21. | kategóriák: (X)HTML, CSS, Speciális, Web | 9 megjegyzés

Összegyűjtöttem néhány eszközt, ami szükséges lehet, de minden esetre megkönnyíti a weboldal fejlesztők és weboldal tulajdonosok dolgát. Röviden szó lesz böngésző független designolástól, logógeneráláson keresztül a legtöbb fejfájást okozó dolgokról.

Elolvasom a teljes bejegyzést »

Internet Explorer height probléma

Írta: Tupacko | 2009. június 08. | kategóriák: (X)HTML, CSS, Design | 3 megjegyzés

Bizonyára már többen is belefutottak abba a problémába, hogy míg a legtöbb böngésző helyesen kezeli azt a megszorítást miszerint egy elem magassága nulla, addig az Internet Explorer különféle bajokat okoz. Hol is vehetjük hasznát egy nulla magasságú elemnek? Például van, hogy több float-olt elemet el szeretnénk választani az oldal egy lebegés mentes részétől: a tartalom és az oldalléc lebeg és elszeretnénk választani a lábléctől.

Egy elméleti megoldás az elválasztási problémára, hogy készítünk egy CSS osztályt, ami magassága nulla és clear: both tulajdonsággal bír. A gond az, hogy bár a Firefox és az IE 8 helyesen kezel minden esetet, ahol a height paramétert valamiféleképpen lenulláztuk, az IE 6 és IE 7 különbözően viselkednek.

Elolvasom a teljes bejegyzést »

Accessibility és SEO: alternatív szövegek

Írta: Hutchington | 2008. december 01. | kategóriák: (X)HTML, CSS, SEO, Web | 5 megjegyzés

A probléma

Egy weboldal grafikai tervezésénél, ha a SEO és Accessibility szempotokat is figyelembe veszünk, nem használunk olyan szöveges elemeket, melyeket majd képként kell megjelentíteni. Nem használunk például élsimítást a szöveghez, hogy az a valóságban is szövegként (pl: <h1>Lorem Ipsum</h1>) jelenhessen meg.

Ez azért fontos, ha a keresők ráfutnak az oldalra, akkor a hasonló elemeket valóban szövegnek ismerje fel, mert ugye ha az egy kép (főleg alternatív szöveg hiányában), akkor nem “látja”. Mitöbb a látássérülteknek készült olvasóprogramok sem tudják megfelelően kezelni,  magyarán nem tudja felolvasni a látássérült ember számára.

Ám nem mindíg tudjuk elkerülni ezek használatát, például egy a fejlécben levő logó esetében.

Elolvasom a teljes bejegyzést »

CSS: menü villogás kivédése

Írta: Hutchington | 2008. november 23. | kategóriák: (X)HTML, CSS, Design, Web | 10 megjegyzés

A probléma

Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy külön kép. A probléma az, hogy például egy a:hover vagy a:active állapotváltozásnál, ha a felhasználó a gomb fölé viszi az egeret, eltünik a háttere amíg a hover állapothoz kapcsolódó képet le nem tölti.

[A régi szép időkben, amikor az ilyen egyszerű menüket JavaScript-el csinálták, volt egy opció erre amit preload image-nek hívtak, ám a jelen megoldás egyszerűbb, és szemantikailag, illetve SEO szempontjából is helyes kódot kapunk.]

A menü különféle állapotai

Elolvasom a teljes bejegyzést »

Online betütípus összehasonlítás

Írta: Tupacko | 2008. május 22. | kategóriák: Blogolok, CSS, Design, Web | 8 megjegyzés

A Typetester egy nagyon hasznosnak bizonyuló web 2.0 alkalmazás, ami nagyban felgyorsíthatja a weboldalkészítés művészetét. Dióhéjban, a Typetesterben három oszlopban, valós időben, grafikus felhasználói felületen kereszűl, változtathatjuk a szöveg kinézetét: betütípus, méretek, elő és háttér színek, stb. A formázások eredményét egy CSSként kaphatod vissza, mindössze egy kattintásba kerül.

A Typetester

Elolvasom a teljes bejegyzést »

Elemek újraméretezés az ablakméret változásakor

Írta: Tupacko | 2008. május 04. | kategóriák: (X)HTML, CSS, JavaScript, Web | 13 megjegyzés

Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.

Példa

Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.

Elolvasom a teljes bejegyzést »

Darabolás mentes hivatkozás képeken

Írta: Tupacko | 2008. május 03. | kategóriák: (X)HTML, Alapok, CSS, Design | 2 megjegyzés

Ez egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.

1. lépés

Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.

1
2
3

<div id="header">
  <a href="index.html" title="" id="logoLink"> </a>
</div>

Elolvasom a teljes bejegyzést »

Wordpress menu span hack

Írta: Tupacko | 2008. január 15. | kategóriák: Blogolok, CMS, CSS, Design, PHP | 2 megjegyzés

A minap felkerült egy írás, ahol dinamikusan lehet gombot készíteni CSS segítségével. DeX hozzászólása kapcsán:

Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?

arra gondoltam, ha már az active-ot hover-re cserélem, használhatom menünek is az egész CSS kódot, a minimális modosításokkal. A CSSben mindössze annyi a tennivaló, hogy az active modosítókat kicseréljük hoverre. Így a link fölé görgetéskor aktíválodik az új kinézet és nem a link lenyomásakor. Miután készen vagyunk a CSS résszel, nyugodtan használhatjuk weboldalainkban.

Mi van akkor, ha a kódot nem mi írjuk? Én arra az esetre gondoltam, amikor a WordPress által kilistázott oldalakat/kategóriákat formázom menüként. A megoldás egy kis ügyesség, okosság. A probléma orvoslását keresve az alábbi megoldást találtam a legmegfelelőbbnek.

Elolvasom a teljes bejegyzést »

Dinamikus gomb készítése CSSt használva

Írta: Tupacko | 2008. január 13. | kategóriák: (X)HTML, CSS, Design | 16 megjegyzés

Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

Elolvasom a teljes bejegyzést »

« Előző bejegyzések