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 »

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 »

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 »

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 »

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 »

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 »

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 »

Egyik 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 »

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 »