Dobozok/képek/elemek elhelyezése a profilon

Üdvözlök minden érdeklődőt!
Ebben a cikkben megmutatom hogyan tudjátok tetszés szerint pakolgatni a dolgokat a profilon akárhova, leírom hogyan tudjátok pozicionálni, vagyis áthelyezni a dolgokat, és azt hogyan lehet beállítani a rétegek sorrendjét, tehát a dobozok/elemek egymás alatt/felett hogyan, milyen sorrendben helyezkedjenek el.
Ahhoz hogy pozicionálni tudjunk dolgokat ez a kód kell:


position: absolute;
top: 200px;
left: 400px;

A top jelöli az oldal legtetejétől való távolságot, a left a bal oldaltól, a position: absolute azért kell hogy az oldal széleitől pozicionálja.

Most jön az a rész hogy ezt a CSS kódot beillesszük a HTML kódunkba, a HTML kód többféle lehet, kezdem egy sima kép kódjával, ha arra illesszük rá így néz ki a kód:

<img style="position: absolute; top: 200px; left: 400px; z-index: 99999;" src="http://users.ml.mindenkilapja.hu/users/srmark/uploads/CSS_mag_banner.png">

A kék rész természetesen a kép direkt linkje.
Ha egy dobozra akarjuk rátenni használjuk ezt a kódot:

<div style="position: absolute; top: 131px; left: 3px; z-index: 99999; height: 30px; width: 130px; border: 1px solid #000000; background: #FFFFFF url();">Ide jöhet a Tartalom</div>


Ha valamit ki akarunk emelni, hogy mindig legelöl legyen használjuk ezt a kódot:

z-index: 99999;

Ezzel a kóddal beállíthatjuk milyen sorrendben legyenek a rétegek, minél nagyobb a szám, annál előrébb van az elem/doboz.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

S-VIDEO

egy kis magyarázat képekkel:

kattints a képre a nagyobb méretért!


az első kép a rétegződést mutatja. minél nagyobb a z-index értéke annál közelebb van a kép, a flash, az objektum hozzánk. a kisebb számúak vannak hátrébb szóval takarásban.

rövid példa beillesztőkóddal:

1. háttérkép (amire mindent rárajzolhatsz)

<img id="hatter" style=" position: absolute; top: 0px; left: 0px; z-index: 15; width: 1000px; height: 1000px;" src="háttérkép linkje" align="top">


2. flash videó

<div style="position: absolute; top: 700px; left: 400px; z-index: 800; visibility: visible; "> ide még jön a videó embed beillesztőkódja</div>


3. videó takaró

<img src="ide jön a takarókép linkje" style="position: absolute; top: 700px; left: 400px; z-index: 1200; " border="0">


remélem sikerült érthetően leírnunk... :)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

VESTEL

Az alap szavazás dobozt ezzel a kóddal tudod elhelyezni akárhol:


<style type="text/css" rel="stylesheet">
#flash_div {
position:absolute;
top: 510px;
left: 510px;
z-index: 29;}
</style>

Ha nem akarunk külön chatboxot, cboxot és hasonlót elhelyezni az alap hotdogos üzenőfalat is mozgathatjuk ezzel a kóddal:


<style type="text/css" rel="stylesheet">
div#messageBoardBox {
position:absolute;
top: 800px;
left: 50px;
z-index: 1000;}
</style>


Végül pedig az alap havernak/ismerősnek jelölő doboz kódja:

<style type="text/css" rel="stylesheet">
#relationB {
position:absolute;
top: 300px;
left: 600px;
z-index: 1000;}
</style>