Mostanában mivel nagyon sokan kerültek Flauntra, ezért gondoltam hasznosnak fogjátok vélni ezt a kis trükköt. Mivel a fanhostingos oldalaknál általában kell kitenni valamiféle reklámot, ezért most erről fog szólni ez a kis tutorial. A reklámot még egyszerűen beillesztjük középre a fejléc alá, de ha egy összetettebb designt akartok készíteni, akkor gondot jelenthet a pontos beállítása. Ez az egyszerű trükk segíteni fog titeket a pontos elhelyezésben, ráadásul 100%-osan mindenkinél működőképes.

 

Először is, amikor elkészíted a fejlécet, alapból úgy építsd fel, hogy az adott reklám kapjon helyet rajta. A mi esetünkben ez egy 728×90-es reklám lesz, én is ezt használom (sőt, csak ez az egy választásom van, így mindig bele kell kalkulálnom a fejlécbe). A legegyszerűbb elrendezés, ha a fejléced alá készítesz egy egyszerű csíkot, amibe belefér a reklám. Sokat segít, ha Photoshopodban alapból ráillesztesz a fejlécedre egy reklám méretű téglalapot is, mert akkor könnyebb dolgot lesz később a kódolásnál. Láthatjuk ezt a következő mintában is:

 Reklámmal//Reklám nélkül

 VIGYÁZZ! mert itt most a fejlécre rakott táblázatunk a háttérben fog megjelenni. Tehát a tényleges fejléc méretei megegyeznek a reklám fölötti résszel. Mutatok erre is egy példát. Ha hasonlóan készíted el a fejléced, mint én, akkor két részünk lesz. Az egyik a fejléc háttér, melyet CSS-el illesztünk be, a másik pedig maga a fejléc, ami már nem tartalmazza a reklám téglalapját:

Először is, szükségünk lesz a weboldalunk fejlécének pontos méreteire, különben nem fog működni. A CSS-ben megadott infókra kell támaszkodnunk:

#header{
margin: 0px auto;
background-color: transparent;
width: 1100px;
}

Ha tehát szélességként 1100 pixelt adtunk meg, akkor a következőkben is e szerint fogunk eljárni, ugyanis egy pont ilyen széles táblázatra lesz szükségünk, melyet a fejléc kódja alá illesztünk be. Így biztosan nem fog csúszkálni senkinél sem, akkor meg pláne nem, ha középre igazítjuk. Tehát, a reklámot egy egy cellás táblázatba fogjuk elhelyezni.

<div align="center"><table cellpadding="0" cellspacing="0" border="0" height="110" width="1100">
<tr>
<td class="ad" valign="top">
reklám helye
</td></tr></table></div>

Pontosan ezt a táblázatot illeszd be, majd írd át a szélességét és magasságát, és illeszd bele a reklámod kódját is. Így lesz már egy táblázatunk, ami illeszkedik a téglalapunkra, amit a reklámnak szántunk. Ez mind szép és jó, de a reklám ettől még nem kerül a neki szánt fekete téglalapba, cssupán meg lesz a helye. A többit CSS-el kell megformálnunk. Láthatjuk a táblázatkódban, hogy a cella adatainál megadtam ezt is:

class="ad"

Ez alapján a CSS-ben kell készítenünk hozzá illő kódot is, mellyel pontosan betájolhatjuk a reklámot.

.adbox{
padding-top: 11px;
padding-left: 8px;
}

padding-top meghatározással a táblázat felső részétől való távolságot határozhatod meg, padding-left -el pedig a bal oldalról való távolságot. Így néhány próbálkozás után biztos vagyok benne, hogy a reklámod a helyén lesz. Először lehet, hogy nem lesz egyszerű, de ha megértitek, akkor már összetettebb fejléceket is tudtok készíteni táblázat kód és CSS segítségével. Ha kérdésetek még ezután is lenne, akkor alább feltehetitek :)


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *