A ‘(X)HTML’ kategória arhívuma

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

Írta: | 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 »

Top 10 WordPress SEO tipp

Írta: | 2007. november 02. | kategóriák: (X)HTML, Alapok, CMS, SEO, Web | 22 megjegyzés

Mostanság elég sokat van foglalkozva a keresőmotor optimalizálással. Olvasván egy ismerősöm blogját, találtam egy érdekes bejegyzést néhány jó WordPress SEO tanáccsal. Ez adta az ötletet, hogy kicsit jobban körüljárjam a témát, így hát megszületett a top 10 SEO trükk a WordPresshez (természetesen ez csak személyes vélemény, de az biztos, hogy hasznosak).

1. Az első helyet a permalink struktúra helyes megválasztása kapta. Alapból egy szám, az nagyon keresőmotor ellenes. A legtöbben ezt használják: %category%/%postname% A probléma az, hogy ez esetben két helyen is elérhető lesz ugyanaz a bejegyzés. Ennek kijátszása nagyon egyszerű, mégis nagy előnyt nyújt. A teendő, hogy kicseréled a permalink szerkezetet úgy, hogy az egy állomány kiterjesztésnek tűnjön: /%category%/%postname%.php A php helyett ajánlott az oldalad témájának legfontosabb kulcsszavát írni.

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (második rész)

Írta: | 2007. október 21. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Ebben a leírásban a sablon fájlok kerülnek nagyító alá. A sablon kód fájljai egy vagy több PHP fájlból állnak. Akárhogyan is extrém eset az, ha csupán az index.php állomány áll rendelkezésre. A WordPress a hivatkozásból próbálja eldönteni, hogy melyik sablon a legrelevánsabb és hívódik meg, mint afféle parser a kérésre. Első lépésként azt nézi, hogy milyen kategóriájú a kérés: pl. Keresés, Arhívum, Bejegyzés, stb. Ha megvan a típus, akkor megpróbálja meghívni a kellő sablont, viszont, ha az nem létezik, akkor lejjebb ugrik a hierarchiában, így eljutva az index.php oldalig, ha nincs más létező állomány.

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (első rész)

Írta: | 2007. október 19. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Janoszen weboldalán találtam rá egy érdekes leírásra, ami ötletet adott a leíráshoz. A téma: WordPress sablon készítése. Ahhoz, hogy egy sablon tudjál készíteni, kell tudjál HTML-t, CSS-t és PHP-t is. Ajánlott olvasmány a WP dokumentációja és a WordPress codex is.
A WordPress sablonok két fő részből állnak: a programozási része, PHP fájlok, és a design része, CSS fájl(ok) és a hozza tartozó képek. A sablon a wp-content/themes/ mappaban kell legyen. Pontosabban a megadott mappában kell létrehozd a sablon nevével annak mappáját. A sablon mappájában két fájl a kötelező: style.css és index.php. A többi rád van bízva, hogy mit is csinálsz és hogyan csinálod. Ha plusz függvényeket is szeretnél használni, amiket te definiálsz, akkor használnod kell a functions.php állományt is. Az említett fájlban kell definiáld a függvényeket és szükség szerint megírd azokat.

Elolvasom a teljes bejegyzést »

Ha nem tud valamit az ember!

Írta: | 2007. szeptember 18. | kategóriák: (X)HTML, Blogolok, Web | 4 megjegyzés

Ahogyan azt a cím is sugalja, nem egy szokványos leírás következik, hanem inkább egy személyesebb jellegű bejegyzés. Az utóbbi időben több helyen is találkoztam olyan emberekkel, akik nem tudtak valamit. Fura? Nem, szerintem senki sem tud mindent. A probléma nem is itten kezdődik. Akkor fajul problémává a dolog, amikor X személy nem talál valamit, ha egyáltalán kereste, és a kényelmes utat választva egy fórumon keres megoldást. Valójában ez sem probléma önmagába. A kérédés ami foglalkoztat viszont az, hogy miért keres valaki választ kérdésére, ha azt úgysem hallgatja meg.

Elolvasom a teljes bejegyzést »

Ikon a weboldalnak, favicon!

Írta: | 2007. szeptember 17. | kategóriák: (X)HTML, Blogolok, Design | 2 megjegyzés

Favicon kockaEgyik barátom ma felkeresett a következő problémával: – Alpár, sok féle képpen próbáltam már, de nem sikerűlt ikon tenni a weboldalamnak. Hogyan lehet? Nem túl nehéz, de mégis elterjedt probléma. Úgy gondoltam, készítek egy leírást, ami alapján bárki, könnyedén kiteheti saját oldala ikonát? Itt is van a kód, ahogyan be tudod illeszteni a megfelelő képet az oldaladba:

<link href="http://webpillango.org/favicon.ico" rel="icon" />
<link href="http://webpillango.org/favicon.ico" rel="shortcut icon" />

A href paramétert a te ikonod elérési útjára kell cseréld 🙂 Azért írtam két verziót, mert nagyon jó, szinte tökéletes, a böngészők közti összeférhetőség. A kódot az oldal fejlécébe kell beilleszteni, vagyis a head tagok közé.

Elolvasom a teljes bejegyzést »

DIV elemek és az overflow

Írta: | 2007. augusztus 20. | kategóriák: (X)HTML, CSS | 2 megjegyzés

Bizonyára sokunkat idegesíti a tény, hogy egy vagy több, a kelleténél szélesebb elem vagy a böngészők nem jó összeférhetőségi hibája szétnyomja az oldalunkat. Példáúl másképp kezeli az IE és a Mozilla a padding értékeket, ezért másként jelenik meg egy elem a két böngészőben. A megoldás a következő stíluselemmel orvosolható: overflow. A feltétel az, hogy minden esetben meg kell adjuk a pontos szélességet, illetve magasságot, hogy a böngésző tudja, milyen méretektől kell elrejtse vagy görgesse a DIV vagy egyéb elem tartalmát.

Elolvasom a teljes bejegyzést »