Honlapkészítés, keresőoptimalizálás, honlap optimalizálás, seo, online marketing hírek

sitebuild (50 unread)

BoxModellek - hatan, mint a gonoszok -

frissítés megvolt, dizájncsere megvolt

Posted: July 12th, 2009, 11:30am CEST by admin

az eredeti dizájn
a módosított dizájn, ami látható tölthető,

legközelebbi bejegyzés köv. héten, várható téma : időzítések (setTimeout,setInterval) javascript, addig is Gmail for Mobile HTML5 Series: Using Timers Effectively az ajánlott olvasnivaló
dizájncsere

Posted: July 11th, 2009, 8:47pm CEST by admin

work in progress … alakul …
Fluid CSS elrendezések IIb. A befelé növekvő doboz - a megoldás

Posted: March 14th, 2009, 1:23pm CET by txn
A probléma tehát adott, az előző bejegyzésben megkezdett fluid CSS elrendezés megalkotása zátonyra futott. A viewport felosztása ugyan problémamentesen lezajlott, egyszerűen kívánt arányban %-os szélességértéket kaptak a leendő tartalmat tároló blokkok, azonban a fluid CSS elrendezés felépítéséhez szükséges további elemek: margók,keretek,behúzások beillesztésekor probléma lépett fel. Egyrészt előbbi elemeknek vagy nem adhatunk meg %-os értéket : border, vagy megadhatunk ugyan, de akkor a dizájnolhatóságot csapjuk agyon (én még nem kaptam változó margin,border,padding tulajdonságokkal rendelkező psd-t dizájnertől), ha viszont fix érték(ke)et állítunk be: kinyírjuk a fluid CSS-elrendezést (lásd előző bejegyzés), szükség volt tehát a nagy ötletre, amit kedvenc CSS-könyvünk le is szállít számunkra.

A konkrét probléma tehát, a leendő tartalmat tároló blokk elemeknek – legyenek azok float-olt, abszolút, vagy statikusak- nem állíthatunk be border,padding,margin tulajdonságot, mert ezzel azok szélesség dimenziói megváltoznának.

Ellenben, ha mindeme tulajdonságokat egy tartalmazó elem széles elemnek, egy statikus blokknak, adnánk meg, majd ezt az elemet helyeznénk a leendő tartalmat tároló blokk elembe – aminek a továbbiakban nem állítunk be padding,border,maring értéket, így a szélessége fix marad-, lényegében az elem befele növekedne, ellenben ugye az eredeti CSS box modellel, ami kifelé növekszik : a width CSS tulajdonság a tartalom szélességét állítja be, ehhez adódnak hozzá a padding,border,margin szélességek.

Tehát a megoldás, a bejegyzés címét is adó, a befelé növekvő doboz, először a minta:
HTML
<BLOKK><div class=”oi”> TARTALOM </div></BLOKK>
vagy
<INLINE><span class=”oi”> TARTALOM </span></INLINE>
CSS
SZELEKTOR { width:SZÁZALÉK; min-width:+ÉRTÉK; }
SZELEKTOR *.oi { margin:+ÉRTÉK; border:WIDTH STYLE COLOR;
padding:+ÉRTÉK; background:STYLES; display:block; }

a könyv az ‘Outside-in Box’ terminus technikus-t vezette be, ezért a ‘oi’ class név. A minta táblára és magasságra nem, csak szélességre alkalmazható, viszont így is megoldja a fenti problémánkat – és az előző bejegyzésben szereplő ie6,7 egyedi viselkedésését ill. bug-ját- .

Előbbi mintával kisegítve, folytathatjuk a szépreményű, fluid CSS elrendezés felépítését, tehát
```
#wrapper {
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
}
#nav {
    float: left;
    min-width: 170px;
    width: 20%;
}

#main {
    float: left;
    min-width: 170px;
    width: 80%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav">
    <p>
        Szélessége 20% a konténer elemének
    </p>
</div>
<div id="main">
    <p>
        Szélessége 80% a konténer elemének
    </p>
</div>
</div>
</body>
```
ból, kiindulva, a fenti mintát az előbbi kódhoz hozzáadva,
```
#wrapper {
    font-family: verdana, arial, sans-serif;
    font-size: 18px;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
}
#nav {
    float: left;
    min-width: 180px;
    width: 20%;
}
#main {
    float: left;
    min-width: 180px;
    width: 80%;
}

#nav .oi, #main .oi{
	background-color:gold;
	border:5px solid silver;
	padding:10px;
	margin:15px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="nav">
    	<div class="oi">
            <p>
                Szélessége 20% a konténer elemének - border:5px; padding:10px; margin:15px;
            </p>
		</div>
    </div>
    <div id="main">
    	<div class="oi">
            <p>
                Szélessége 80% a konténer elemének - border:5px; padding:10px; margin:15px;
            </p>
		</div>
    </div>
</div>
```
a példafájlon megtekintve, majd a böngésző ablak méretezésével játszva, látható hogy immáron tetszőleges margin, padding, és border CSS tulajdonság beállítására van lehetőség az elrendezés szétesése nélkül, megelégedéssel nézhetjük ie netrenderel-t is, tevékenységünk – ill. az elrendezés – legalábbis eddig, böngészőfüggetlen.

Az alapok tehát megvannak, a következő bejegyzésekben kiterjesztjük lehetőségeinket ill. finomítjuk a mintát.

foly. köv. , hajrá CSS
Fluid CSS elrendezések IIa. A befelé növekvő doboz - a probléma

Posted: March 9th, 2009, 7:26am CET by txn
Ebben a bejegyzésben ‘from scratch’, nulláról kezdünk el felépíteni egy fluid-alkalmazkodó css elrendezést ill. megismerkedünk azzal a mintával, ami egyáltalán lehetővé teszi, hogy egy ilyen elrendezés ne csak elméletben, hanem a gyakorlatban is tervezhető (design) / kivitelezhető (sitebuild) legyen.

Aki esetleg hiányolná a pragmatizmust, a gyakorlatba való átültethetőséget a mintából, tekintse meg a netvibes kezdőlapot, és kövesse szemmel, a google vagy youtube widget-et megjelenítésében beálló változásokat, miközben átméretezi a webböngészőt, ergo a fluid layout tervezési elvei, túl az előző bejegyzésben szerepelteken:

“különböző eszközök megjelenítési képességeihez automatikusan adaptálódik (hozzáigazul), megjelenítési képességek alatt azok (esetlegesen egymástól eltérő) betűtípusait, megjelenítési dimenzióit (szélesség x magasság) ill. nagyítási lehetőségeit értem”

közvetlenül a gyakorlatban kamatoztathatóak : widget gyártáskor. Másrészt megtekinthető hova lesz a téma kifuttatva, azaz hova érkezünk meg pár hónap múlva, előbbi dizájn minden egyes elemére és annak megvalósítására, a későbbiekben egy-egy jegyzet elejéig, vissza fogunk még térni.

Alkalmazkodó CSS elrendezés megtervezésekor/kivitelezésekor, ellentétben a szokványos megközelítéssel, kívülről-befelé haladunk, elsőnek meghatározzuk a viewport szélességértékét, majd ezt a szélességet osztjuk fel százalékos arányban a lehetséges tartalomblokk elemek között ill. meghatározzuk előbbi tartalomblokk elemek lehetséges minimális, maximális szélességét, ennek megfelelően :
```
#wrapper {
	font-family: verdana, arial, sans-serif;
	font-size: 18px;
	margin: 0 auto;
	max-width: 1000px;
	overflow:hidden;
}
#nav {
	float: left;
	min-width: 170px;
	width: 20%;
} #main {
	float: left;
	min-width: 170px;
	width: 80%;
}
```
ill. előbbieket szemléltetve , következő lépés lenne a margók(margin), behúzások(padding), keretek(border) hozzáadása az elrendezéshez, azonban ha előbbi CSS tulajdonságok valamelyikét beállítjuk a tartalomblokk elemek egyikén -vagy másikán is- , pl.
```
#nav {
    float: left;
    min-width: 170px;
    width: 20%;
    border:1px solid black;
}
```
látható, hogy a tartalomblokk elemek ebben az esetben már férnek el egymás mellett. Adódna a megoldás, a tartalomblokk elemek százalékos szélességének csökkentése:
```
#nav {
    float: left;
    min-width: 170px;
    width: 19.8%;
    border:1px solid black;
}
```
1-1 px mindkét oldalon, (1000-.8×1000-2) = .198X1000 , de ha a konténerelem szélessége nem 1000px, hanem pl., 100px (vagy 1000-nél kisebb) a fenti megoldás már nem helyes, 100px-re pl.
```
#nav {
    float: left;
    min-width: 170px;
    width: 18%;
    border:1px solid black;
}
```
18%-kot kéne beállítani, (100-.8×100-2)=.18×100, hasonló a probléma nemcsak a border, de margin ill. padding esetében is, habár e két utóbbira adhatunk meg %-kos szélességértéket, máskérdés hogy változó margin,padding értékek, dizájnolhatóság és látvány szempontjából sem túl szerencsések.

További problémát jelent ie6,7 floatolt elem kezelése is, ie7 az 50%-ra állított szélességű elemeket mindképp egymás mellé helyezi, margin,padding,border beállítástól függetlenül (feltételezve, hogy mi is erre gondoltunk), kár hogy ezzel a viselkedésével magára maradt, ie6 ellenben a float-olt elemeket nem pozicíonálja minden esetben közvetlenül egymás mellé.

A következő bejegyzésben, mindeme problémákat orvosló minta kerül bevezetésre, ami annyira alapnak fog bizonyulni, hogy az összes fluid CSS elrendezés reá fog épülni.

hajrá CSS
Fluid CSS layouts - Alkalmazkodó CSS elrendezések I.

Posted: March 1st, 2009, 3:17pm CET by txn
A pozicionálások témakört befejezvén, az elkövetkező bejegyzésekben a CSS elrendezésekkel, és azok holdudvarával fogunk részletekbemenőleg foglalkozni.

Elöljáróban és zárójelben, amennyiben a ‘fluid layouts’-ra egy megfelelő vagy már bevezetett/elfogadott magyar terminus-technicus-t bekommentálna valaki azt előre is megköszönném, egyelőre az alkalmazkodó elrendezést fogom használni – ami elég faramuciul hangzik – ilyenkor mindenki gondoljon a ‘fluid layouts’-ra …

Alkalmazkodónak mondhatunk egy elrendezést akkor, ha a következő alapfeltételeknek képes megfelelni :
- különböző eszközök megjelenítési képességeihez automatikusan adaptálódik (hozzáigazul), megjelenítési képességek alatt azok (esetlegesen egymástól eltérő) betűtípusait, megjelenítési dimenzióit (szélesség x magasság) ill. nagyítási lehetőségeit értem
- akadálymentesség
- modularitás
- könnyű testre szabhatóság
- nyílt forrású javascript könyvtárak használatán alapultság
előbbi tulajdonságok mindegyikéről bővebben lesz még szó a későbbiekben, ebben a bejegyzésben ‘csupán’ megtekintjük azt az alapot, amit a későbbiek során kibővítünk ill. építkezni fogunk.

Az alap és forráskódjának megtekintése után, lássuk mire is képes még az elrendezés a fentieken túl
- amennyiben változik a látótér (viewport) szélessége (a megjelenítő eszközök egymástól különböző felbontásban dolgoznak), automatikusan képes annak nagyságától függően egy sorba vagy oszlopba szervezni tartalmát (vagy a tartalmát felépítő elemeket)
- képes követni a látótér szélességének növekedését (adott pontig, túl széles oszlopszélesség már az olvashatóság rovására menne)
- az elrendezés egyes építőblokkjai képesek követni a látótér szélességének csökkenését, szintén csak egy adott pontig, azon túl a csökkenés már az elrendezés olvashatóságát akadályozná meg
- táblázatmentesség
Előbbi tulajdonságok képezik azon tulajdonságok minimális halmazát, aminek egy alkalmazkodónak mondott elrendezésnek meg kell tudnia felelni. A példafájlban szereplő elrendezés képes erre, erről előbbi linkre kattintás után, a böngésző ablakának átméretezésével győződhetünk meg.

Természetesen számos más tulajdonság is előtérbe kerülhet -ahogy fog is a későbbiekben-, egy adott elrendezés megvalósításakor, előbbi példafájl a ‘minimális’ követelményeknek felel csak meg, ill. csak azokat a HTML elemeket(markup) ill. CSS tulajdonságot(style) tartalmazza, amik képessé teszik eme megfelelésre, képességeit a további bejegyzések alkalmával fogjuk majd bővíteni.

folyt. köv.

ui: itt hívnám fel a figyelmet a fentiekhez kacsolódó rrd cikksorozatra: webdesigner leszel s katona vadakat terelő juhász címmel
Pozicionálások a gyarkorlatban, haladó VII. : Középre igazítás

Posted: February 22nd, 2009, 5:53pm CET by txn

Középre igazításkor alapvető feladat, hogy egy elemet annak legközelebbi őt tartalamazó pozicionált ősének vertikális közepére igazítsuk. Túl az előbbin, cél még, hogy a középre igazítás automatikus legyen, azaz a tartalamzó elem magasságának változásákor, ne kelljen az elemet folyamatosan kézzel újra és újra középre igazítsuk. E két célnak próbálnak megfeleni a bejegyzésben szereplő minták.

Essünk is túl a már szokásos a feketelevesen, ie6-ie7 netrenderer-el által generált kimenet, a render-ből generált képből kiderül, -hasonlóan a korábbi jegyzetekben szerepelt mintákhoz- ie6 képtelen az abszolút pozicionált elemek középre igazítására, ie7 alatt kezdtek a dolgok rendbe jönni, de még itt sincs lehetőségünk méretezett elemek középre igazítására, kizárólag széthúzott abszolút pozicionált elemekkel tehetjük ezt meg (height:auto), ie8,opera,safari,chrome,fx2-3 (utolsó publikus verziók), a jegyzetben szereplő minták egyformán jelennek meg.
Középre igazított inline elem
SZELEKTOR { line-height:+ÉRTÉK; }
Középre igazíott méretezett abszolút elem
SZELEKTOR { position:absolute; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0;
top:0; bottom:0; }
Középre igazított tartalamzó elem széles abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:±ÉRTÉK; margin-bottom:±ÉRTÉK;
top:0; bottom:0; }

Mindezeket a példafájlon megszemlélve, a tanúságok, szűk keresztmetszet: ie6-7 ergo, inline elemek gond nélkül középre igazíthatóak (első minta böngészőfüggetlen), abszolút elemeket mechanikusan középre tolhatunk, de böngészőfüggetlen automatikus méretezésre vagy középen tartásra ne is számítsunk amíg ie6 köztünk van.

A minták működéséről, láthatjuk, hogy a pozicionálásnak három lehetséges módja van, elsőnek az inline, a tartalmazó elemnek konkrét méret legyen beállítva, majd adjuk meg a line-height tulajdonságának ugyanezt az értéket, legyen px vagy % stb, a többi a böngésző dolga, adhatunk meg kisebb vagy nagyobb értéket is, ezzel az inline elem vertikális pozicióját tudjuk befolyásolni az-az eltolás hozható létre, ekkor egy overflow:hidden tulajdonság is kerüljön beállításra különben ie6 széttolhatja a tartalmazó elemet, megváltoztathatva az eredetileg beállított magasság értéket.

Abszolút pozicionálások, látható a két módozat közti különbség, vagy a height-nek adunk meg konkrét éréket és a margin-top,-bottom értékeknek auto-t, vagy vice-versa. Első esetben a konténerelem magasságának változásait nem követi az elem, utóbbi esetben ahogy változik a konténer úgy változik a középre rendezett elem magassága is.

Sajna statikus vagy tartalommagas elemet nem tudunk középre rendezni, a már középre igazított abszolút elemeken belüli elemek középre igazításakor a
Középre igazított tartalamzó elem széles abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:±ÉRTÉK; margin-bottom:±ÉRTÉK;
top:0; bottom:0; }

mintát kell mégegyszer felhasználnunk.

hajrá CSS
Pozicionálások a gyarkorlatban, haladó VI. : Alulra igazítás majd eltolás

Posted: February 15th, 2009, 10:58am CET by txn

Nézzük is mire is számíthatunk: ie6-7 render egymás felett, netrender-el , egyedül talán a tartalommagas abszolút pozicionált elem néz ki hasonlóan, de böngészőfüggetlenségről ez esetben nem beszélhetünk (azért ne írjuk le végleg a bejegyzésben szereplő mintákat, hiszen ie6 kivételével minden böngészőben ie7-8, opera, safari, chrome azonosan működnek). További megkötést jelent, hogy statikus tartalommagas elemet alulra igazításhoz nem használhatunk, ennek pozícióját a böngésző ill. az elem normál szövegfolyambeli pozíciója határozza meg.

A minták minden egyéb tekintetben szimmetrikusak a fentre igazítás mintáival, a margin-top,top és a maring-bottom,bottom értékek cserélődnek fel, lássuk is :
Alulra igazított méretezett statikus blokk
BLOKK-SZELEKTOR { position:static; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0; }
Alulra igazított méretezett abszolút elem
SZELEKTOR { position:absolute; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }
Alulra igazított tartalomszéles abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }
Alulra igazított széthúzott abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:0;
top:0; bottom:0; }

A példafájlon megfigyelhető, ha a már igazított konténerelem tartalmát alulra akarjuk igazítani, a konténerben lévő elemen az alulra igazítás mintáját még egyszer alkalmaznunk kell, azaz :
Alulra igazított tartalomszéles abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:auto; margin-bottom:0;
top:auto; bottom:0; }

Az esetleges eltolást ebben az esetben, a margin-bottom tulajdonságnak adott konkrét értékek hozzák létre, azaz minden ahogy fent, kivéve, hogy

margin-bottom:±ÉRTÉK;

hajrá CSS
Pozicionálások a gyarkorlatban, haladó V. : Felűre igazítás majd eltolás

Posted: February 14th, 2009, 3:39pm CET by txn

S02E01 ….
Folytatván az igazítások ill. a pozicionálások a gyakorlatban, haladó minták leírását, a bal, jobb, középre igazítás után a felűre igazítás mintája következik. Egyből a lényeg : a netrenderer által generált ie6-7 összehasonlító ábrát megszemlélve : a következtetés, ez a minta bizony korántsem nevezhető böngésző függetlennek, ennek ellenére alapszinten, az abszolút pozicionálást ebben az esetben kerülve, s -egyelőre- jobb híján be kell érnünk vele.
Felűre igazított méretezett statikus blokk elem
BLOKK-SZELEKTOR { position:static; height:+ÉRTÉK;
margin-top:0; margin-bottom:auto; }
Felűre igazított tartalomszéles statikus blokk
BLOKK-SZELEKTOR { position:static; height:auto;
margin-top:0; margin-bottom:0; }
Felűre igazított méretezett abszolút elem
SZELEKTOR { position:absolute; height:+ÉRTÉK;
margin-top:0; margin-bottom:auto;
top:0; bottom:auto; }
Felűre igazított tartalomszéles abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:auto;
top:0; bottom:auto; }
Felűre igazított széthúzott abszolút elem
SZELEKTOR { position:absolute; height:auto;
margin-top:0; margin-bottom:0;
top:0; bottom:0; }

Azaz, amennyiben nem akarunk konkrét magasságot beállítani, hagyjuk a height tulajdonságot : auto – értéken. Statikus helyett abszolút pozicionálás, túl a nyilvánvaló position tulajdonságbeli különbségen, abszolút pozicionálás esetében : a top, bottom tulajdonságok jelennek meg , értékük minden esetben ill. esetenként megegyezik a margin-top,-bottom tulajdonságokéval. Tartalom ill. széthúzott (tartalmazó elem magas) abszolút pozicionálás esetén, margin-bottom,bottom auto, ill. nulla értéket vesz fel.

Széthúzott abszolút pozicionálásról, ie6 esetében le kell mondanunk, és ahogy a példafájlon is látszódik statikus blokk elemeket egy adott konténerben minden különösebb nehézség nélkül értsd. a böngésző megteszi magától, egymás alá rende(re)lhetünk.

Eltolás: nagyon egyszerűen lehetséges a már igazított elemeken eltolást kieszközölni: egyszerűen a mintákban szereplő: margin-top:0 helyére margin-top: +-Értéket kell behelyettesíteni .

hajrá CSS
Nyáriszünet

Posted: August 6th, 2008, 9:07pm CEST by toxin

nincs vége csak nyári szünet, szeptemberben folytatom
Pozicionálások a gyarkorlatban, haladó IV. : Középre igazítás majd eltolás

Posted: June 8th, 2008, 12:27pm CEST by toxin
Előző bejegyzésben középre igazított elemeken, ebben a bejegyzésben megpróbálunk horizontálisan eltolást kieszközölni. Amennyiben szemrevételezzük ie6-7 e bejegyzésben szereplő mintákról készült, IE NetRenderel által megjelenített, renderelését láthatjuk, hogy közelebbi barátságba, nem pozicionált őshöz való igazítás esetén: széthúzott statikus blokkal, míg pozicionált ős esetén a Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolásasa mintában szereplő tábla elemmel (<table><tr><td> TARTALOM </td></tr></table>) érdemes kerülni, a többi minta ezeken a böngészőkön nem, csak majd ie8 alatt lesz támogatott.

Következzenek akkor az eltolást létrehozó általános minták:

Középről eltolt inline elem
INLINE-SZELEKTOR { margin-left:±VALUE; }
BLOKK-SZELEKTOR { text-align:center; }
Középről eltolt széthúzott statikus blokk elem
BLOKK-SZELEKTOR{ position:static; text-align:center;
width:auto; margin-left:±ÉRTÉK ;
margin-right:±ÉRTÉK ; }
Középről eltolt méretezett abszolút elem
SZELEKTOR{ position:absolute; text-align:center;
width:+±ÉRTÉK ; left:±ÉRTÉK ; margin-left:auto;
right:0; margin-right:auto; }
Középről eltolt széthúzott abszolút elem
SZELEKTOR{ position:absolute; text-align:center;
width:auto; left:0; margin-left:±VALUE;
right:0; margin-right:±ÉRTÉK }

Utoljára, bónuszként, a lassan az igazítás/eltolás témában svájci bicska szerepét betöltő tábla elem, amennyiben tartalom széles elem, középre igazítás utáni eltolására van szükségünk (böngésző függetlenül)
Tartalom széles középről eltolt abszolút pozicionált táblaelem
HTML minta:

<table><tr><td> TARTALOM </td></tr></table>

CSS minta:

TÁBLA SZELEKTOR{ margin-left:±VALUE; margin-right: auto;
position: absolute; right: 0;
text-align: center; width: auto;}

A minták nagyrészt megegyeznek az előző bejegyzésben szerepelttel, kivéve persze, hogy megjelennek benne az eltolást létehozó CSS tulajdonság-érték párok:
- inline elem esetén, margin-left-nek adhatunk egy pozitív ill. negatív értéket, ezek sorban balra ill. jobbra fogják az adott inline elemet eltolni
- középen eltolt méretezett abszolút elem esetén, a left CSS tulajdonságnak adhatunk pozitív/negatív értéket előbbivel balra, utóbbival jobbra tolhatjuk az adott elemet
- középen eltolt széthúzott abszolút elem esetén, elsőnek állítsuk a bal/jobb margókat egyforma értékre – pozitív érték összenyomja, negatív érték széthúzza az elemet – majd balra tolás létrehozása érdekében, növeljük a bal margót és ugyanennyivel csökkentsük a jobbat, jobbra tolás esetén vice versa.
Táblázat felhasználása esetén a margin-left-nek adott pozitív-negatív értékek hozzák létre a balra-jobbra eltolást.

Ahogy már láthattuk abszolút elemet ie8-ig nem használhatunk középre igazításhoz, csak a statikus széthúzott és a tábla minta működőképes. Linkre kattintva a szokásos példafájl magyar, táblázattal felturbózott kiadása is megtekinthető .

Következő részben a nem kevésbé izgalmas, nem ill. pozicionált ős tetejéhez történő igazításról és igazítás utáni eltolásáról lesz szó.

Hajrá CSS, mindenKi a szabadba
Pozicionálások a gyarkorlatban, haladó IV. : Középre igazítás majd eltolás

Posted: June 8th, 2008, 12:27pm CEST by toxin

Előző bejegyzésben középre igazított elemeken, ebben a bejegyzésben megpróbálunk horizontálisan eltolást kieszközölni.
Pozicionálások a gyarkorlatban, haladó III. : Középre igazítás

Posted: June 7th, 2008, 10:59am CEST by toxin

Balra igazítás és tolás után, – a várható téma- előbbiek fordítottjai a jobbra igazítás és tolás következne, de ehelyett a középre igazításról fogunk ‘beszélni’, lévén előbbiek a balra tolás/igazításnak a megfordítottjai, csak a margin-left/right ill. left/right tulajdonságok értékeinek fel/megcseréléseiben különböznek tőlük(ilyenre szokták volt írni, hogy : házifeladatnak) .

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.

Ha az IE Netrenderel-el – firefox extension is van már hozzá – megnézzük a példafájlról ill. a lehetséges, és a majd ie8 alatt mind jól megjelenített , mintákról készült, ie6 által lerenderelt lapot , láthatjuk, hogy lehetőségeink jelen pillanatban eléggé behatároltak, mindenesetre lássuk őket:

Középre igazított méretezett statikus blokk elem
BLOKK-SZELEKTOR { position:static; text-align:center;
width:+ÉRTÉK; margin-left:auto;
margin-right:auto; }
Közpre igazított tartalmazó elem széles statikus blokk elem
BLOKK-SZELEKTOR { position:static; text-align:center;
width:auto; margin-left:+ÉRTÉK;
margin-right:+ÉRTÉK; }
Középre igazított méretezett elem
SZELEKTOR { position:absolute; text-align:center;
width:+ÉRTÉK; left:0; margin-left:auto;
right:0; margin-right:auto; }
Középre igazított tartalmazó széles elem
SZELEKTOR { position:absolute; text-align:center;
width:auto; left:0; margin-left:+ÉRTÉK;
right:0; margin-right:+ÉRTÉK; }

A könyvben: “An element can’t be shrinkwrapped if it is centered” szerepel, ezért, a Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolása idevonatkozó mintáját beszúrom ide:
Középre igazított tartalom széles tábla elem HTML minta
<table><tr><td>TARTALOM</td></tr></table>
CSS minta
SZELEKTOR { position:static;
width:auto; margin-left:auto; margin-right:auto; }

a fenti mintákat egy kicsit elemezve: tartalmat text-align:center CSS tulajdonság-érték pár megadásával tudunk beállítani, statikus elem középreigazításakor használhatunk fix, vagy dinamikusan változó szélességet, előbbi esetén a jobb-bal margókat:auto-ra utóbbi esetben egy fix értékre kell beállítani, zérus értékre állítás esetén lesz az elem tartalmazóelem széles. Abszolút pozicionált elemet használva, ekkor az elemet legközelebbi pozicionált őséhez képest igazíthatjuk középre, előbbi értékekhez még egy left,right:0 CSS tulajdonság-érték párt is hozzá kell adnunk.

Horizontálisan tartalom szélesre egy elemet, ezek szerint, csak táblázat felhasználásával tudunk beállítani(lásd utolsó minta). ie6 képtelen abszolút elemeket középre igazítani , ie7 már elboldogul az abszolút széthúzott elemmel középre igazított méretezettel továbbra sem, ie8b1: már helyesen jeleníti meg őket, Firefox2-3rc2,Opera-Safari (utolsó elérhető verziók, win) szintén.

A példafájlon látható hogy méretezett statikus elem esetén a margók mérete, míg fix margóbeállítás esetén az elem szélessége fog dinamikusan változni. Amennyiben százalékot állítunk elem, vagy margószélességnek, ezek a befoglaló elem szélességének megadott százalékos arányában, dinamikusan fognak átméreteződni.

Következő bejegyzésben a már középre igazított elemen fogunk eltolást kieszközölni :
Hajrá CSS
Pozicionálások a gyarkorlatban, haladó III. : Középre igazítás

Posted: June 7th, 2008, 10:59am CEST by toxin

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.
Pozicionálások a gyarkorlatban, haladó III. : Középre igazítás

Posted: June 7th, 2008, 10:59am CEST by toxin

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.
Pozicionálások a gyarkorlatban, haladó III. : Középre igazítás

Posted: June 7th, 2008, 10:59am CEST by toxin

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.
Pozicionálások a gyarkorlatban, haladó II. : Balra tolás

Posted: May 31st, 2008, 8:09am CEST by toxin

Ezt megelőző mintát kiterjesztve, a balra igazított elemen lehetséges eltolást is eszközölni, ekkor a margin-left CSS tulajdonságot, nem, ahogy az előző mintában, zéró értékre, hanem valamilyen ettől különböző negatív vagy pozitív értékre állítjuk be. Pozitív értékre állítás esetén az adott elem a jobbra/befelé fog elmozdulni, negatív érték beállítása esetén ellenkező irányba: balra/kifelé.
Pozicionálások a gyarkorlatban, haladó I. : Balra igazítás

Posted: May 25th, 2008, 3:00pm CEST by toxin

Némi kihagyás után (költözés) akkor jegyzetgyártás, folyt. köv.: A mostani és az elkövetkező tizenegy bejegyzésben, különféle CSS tulajdonság kombinációk, és pozicionálási modellek felhasználásával - az eddigi minták kombinálásával: haladó - , az elemeket: balra, jobbra, középre, fel, le igazítjuk - legközelebbi vagy pozicionált ősükhöz, méretezve vagy tartalom/tartalmazó elem szélesen - ill. rajtuk igazítás után eltolást eszközölünk. E bejegyzésben szereplő minta segítségével, egy elemet és annak tartalmát szülőeleme, vagy legközelebbi pozicionált ős eleme bal oldalához fogjuk igazítjuk. - A színpad az enyém :) -
Pozicionálások a gyarkorlatban VI. : Abszolút elemek középre igazítása vertikálisan és horizontálisan

Posted: May 4th, 2008, 7:33am CEST by toxin

Alábbi minta ie7 vagy az alatti verziószámú ie böngészők alatt nem működőképes, lévén ezek nem támogatják egy elem egyidőben történő jobbra-balra, fel-le igazítását. Az ezt megelőző bejegyzés kiegészítéseként vagy kiterjesztéseként lehetséges egy abszolút pozicionált elemet tartalmazóeleme közepére igazítani a következő minta használatával: Vertikálisan középre igazított abszolút elem SELECTOR { position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; } Horizontálisan középre igazított abszolút elem SELECTOR [...]
Pozicionálások a gyarkorlatban V. : Abszolút elemek igazítása vertikálisan és horizontálisan

Posted: May 3rd, 2008, 12:43pm CEST by toxin

A Pozicionálás margókkal V. : Abszolút és rögzített pozíciójú elemek eltolása margók segítségével címmel megkezdett bejegyzés kvázi folytatásaképpen, ebben a bejegyzésben többek között a left,right,top,bottom CSS tulajdonságokat - emlékeztetőül a fenti bejegyzésben ezeket alapértelmezetten: auto-n hagytuk - fogjuk állítgatni acélból, hogy egy adott abszolút elemet tartalmazóeleme belsejének: tetejéhez, jobb-bal oldalához vagy aljához igazítsuk. Lényegében [...]
Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolása

Posted: May 2nd, 2008, 10:59am CEST by toxin

Témához kapcsolódó előző bejegyzésben szerepelő statikus blokk elemeknek egyik hátrányos tulajdonsága volt, hogy tartalomszélesre nem lehetett őket méretezni, emlékezzünk tartalmazóelem szélesek(width:auto) vagy fix szélességűek(width:+ÉRTÉK) voltak. Hasonló problémák merülnek fel az inline elemekkel kapcsolatban is, méretezni a normál szövegfolyamban ezeket nem lehet, csak ha pozicionáljuk vagy úsztatjuk őket. Előbbi szempontból vizsgálva, az e bejegyzés témáját [...]
IETester - IE5.5/6/7/8b1

Posted: May 1st, 2008, 11:48am CEST by toxin

Mindenképp figyelmet érdemlő, a weblabor blogmarkjában tegnap talált alkalmazás, ami a különböző ie verziók által lerenderelt weblapot képes egy ablakon belül megjeleníteni. pl. az előző bejegyzés példafájlja ie6,7,b1 alatt a következőképp fest , elérhető: IETester
Pozicionálások a gyarkorlatban III. : Statikus blokk elemek eltolása és igazítása

Posted: May 1st, 2008, 11:29am CEST by toxin

A Pozicionálás margókkal I bejegyzésben már vizsgálódtunk a statikus blokk elemek pozicionálásának témakörében, akkor az elemek szélességét auto-n, alapértelmezésen hagytuk ezzel lehetőségünk nyílt jobb-bal margójuk egymástól független állítására : behúzására vagy kitolására. Ebben a bejegyzésben szereplő mintában, a statikus blokk elemek konkrét szélességet kapnak, ezáltal, és megfelelő margóbeállításokkal, tartalmazóelemük jobb-bal oldalához igazíthatjuk őket ill. [...]
Pozicionálások a gyarkorlatban II+. : Statikus soron belüli elemek igazítása horizontálisan és vertikálisan

Posted: April 28th, 2008, 8:34am CEST by toxin

Az előző bejegyzésben megkezdett témát befejezendő, folytassuk is. Két lehetőségről nem esett még szó: * egy sornál nem hosszabb szöveget vertikálisan középre tudunk igazítani ill. a böngésző megteszi ezt helyettünk, abban az esetben ha a szöveg magasságánál nagyobb line-height-et adunk meg * vertical-align:±ÉRTÉK , segítségével is lehetőségünk van vertikális eltolás beállítására
Pozicionálások a gyarkorlatban II. : Statikus soron belüli elemek igazítása horizontálisan és vertikálisan, v0.1

Posted: April 20th, 2008, 3:34pm CEST by toxin

A bejegyzésben elsőnek a horizontális igazítást nézzük át, majd a sokkal izgalmasabb vertikális igazítással -és az inline formázási kontextussal (inline formatting context) - fogunk foglalkozni.
Elemi csoportok, reloaded

Posted: April 13th, 2008, 6:46pm CEST by toxin

Előző bejegyzés hatására fejbekólintott a megvilágosodás, ezért a Elemi csoportok (atomic groups) bejegyzés tartalmát módosítottam (bevezető, kép alatt), uff
Pozicionálások a gyarkorlatban I. : Relatívan pozicionált elemek eltolása

Posted: April 13th, 2008, 11:48am CEST by toxin

A margók általi pozicionálási lehetőségeket kimerítettük, új sorozatot kezdünk, megvizsgáljuk milyen további eszközök állnak rendelkezésünkre ahhoz, hogy megváltoztassuk egy elem megjelenítési pozícióját.
Pozicionálás margókkal V. : Abszolút és rögzített pozíciójú elemek eltolása margók segítségével

Posted: April 12th, 2008, 12:31pm CEST by toxin

E bejegyzésben szereplő minta segítségével blokk elemmé varázsolhatunk egy tetszőleges elemet, aminek kedvünk szerint állíthatjuk horizontális és vertikális dimenzióit - ráadásul egymástól függetlenül - illetve azok típusát is megváltoztathatjuk, tartalom szélessé tehetjük az egyiket és méretezhetjük a másikat, ki-ne vágyott volna ilyenre titokban. Nyissuk is ki Rodolfó bűvészdobozunkat, mert ez egy olyan trükk amivel sokakat elkápráztathatunk...
CSS naked day !!

Posted: April 9th, 2008, 7:49am CEST by toxin

Törekedjünk a szemantikailag helyes, struktúrált weboldal kialakításra. A vizuális megjelenés feladata a weboldal funkcionalitásának támogatása, nem pedig helyettesítése
Pozicionálás margókkal IV. : Úsztatott elemek eltolása margók segítségével

Posted: April 9th, 2008, 7:43am CEST by toxin

Az úsztatott elemeken alkalmazott különböző margóbeállítások, a statikus inline és blokk elemekhez hasonló hatást fognak elérni, pozitív margóbeállítások eltávolítják az elemeket egymástól, negatív margóbeállítások épp ellenkezőleg, közelítik azokat.
Pozicionálás margókkal III. : Statikusan pozicionált táblák behúzása és eltolása margók segítségével

Posted: April 6th, 2008, 9:13am CEST by toxin

Ebben a bejegyzésben közölt minta segítségével, a normál szövegfolyamban elhelyezkedő, tartalomszéles ill. méretezett táblázatoknak tudunk eltolást ill. behúzást beállítani.
Pozicionálás margókkal II. : Statikus elemek pozicionálása a margók segítségével

Posted: April 5th, 2008, 2:55pm CEST by toxin

Jelen bejegyzésben tárgyalt minta segítségével, a normál szövegfolyamban (normal flow-ban) elhelyezkedő statikus elemeket tudjuk egymáshoz/egymástól közelíteni-távolítani.
Pozicionálás margókkal I: margók kitolása, behúzása az elem pozíciójának változtatása nélkül

Posted: April 2nd, 2008, 8:11am CEST by toxin

Remélhetőleg mindenki sikerrel átvészelte Április elsejét :) , a lap meg a WordPress motor frissítését... A pozicionálási modellek elméleti szakaszának lezárásával, gyakorlati problémák illetve azok megoldásai következnek (sőt általánosságban is lezártuk az elméleti részt, mostantól gyakorlatban azonnal kamatoztatható megoldásokról-módszerekről szóló bejegyzések fognak következni, ill. esetleg a szelektorokról,doctype-okról,CSS mértékegységekről, hasLayout-ról lehet-lesz még bejegyzés valamikor). Ezen bejegyzésben arról a mintáról lesz szó aminek segítségével statikus elemek jobb-bal margóit ill. széthúzott abszolút (stretched absolute) elemek margóit -kivéve ie6- egymástól függetlenül tudjuk kitolni-behúzni, az elem pozíciójának megváltoztatása (offset) nélkül.
Pozicionálási modellek VII. Úsztatott - Relatív pozicionálási modell

Posted: March 29th, 2008, 11:07am CET by toxin

A pozicionálási modellek utolsó áttekintő jegyzetében: az úsztatott(float-olt) modell és a relatív modell összekapcsolásáról lesz szó Ebben a modellben lehetséges válik az úsztatott elem pozíciójának megváltoztatása anélkül, hogy ez bárminemű befolyást gyakorolna a többi elemre (beleértve az inline ill. az úsztatott elemeket), továbbá lehetségessé válik az úsztatott elemet egy saját rétegzési kontextusba helyezni, ezáltal meghatározni az elhelyezkedését a z-tengely mentén.
Pozicionálási modellek VI. - Úsztatott / float-olt pozicionálási modell

Posted: March 24th, 2008, 12:58pm CET by toxin

Mielőtt elmerülnénk az úsztatott pozicionálási modell részleteiben, nézzük pár szóban mi történik ilyenkor, az-az ha egy elemen a következő általános mintát alkalmazzuk...
Pozicionálási modellek V. - Relatív pozicionálási modell

Posted: March 23rd, 2008, 2:59pm CET by toxin

Saját rétegezési kontextusba akarsz helyezni egy float-olt vagy normális szövegfolyambeli elemet, vagy lehetséges legközelebbi pozicionált őssé akarod tenni, esetleg megakarod változtatni a pozícióját anélkül, hogy eltávolítanád a szövegfolyamból(ezzel megváltoztatva eredeti megjelenítését,formáját). Igen, akkor a te választásos a relatív pozicionálási modell lesz.
Pozicionálási modellek IV. - Fix pozicionálási modell

Posted: March 22nd, 2008, 4:11pm CET by toxin

Kezdjük is egyből a példafájl-on való kattintással, és egy kis lapgörgetéssel, láthatjuk, hogy a fix pozicionálású modellt használó elemek külön rétegbe kerültek és pozíciójuk a látótérhez képest rögzült (kivéve ie6 alatt ahol ez a modell nem elérhető, csak hatása reprodukálható egy kis nagy trüközéssel). Lássuk akkor ezen modell további tulajdonságait:
Pozicionálási modellek III. - Abszolút pozicionálási modell

Posted: March 15th, 2008, 3:12pm CET by toxin

Az előző két bejegyzésben a rétegezési modell(static-context) és az elemi csoportok(atomic groups) fogalmának megismerésével megalapoztuk a pozicionált elemek konkrétabban az abszolút, relatív és a fix a pozicionálási modellek használatát. Ez a bejegyzés, ezek közül az elsővel: az abszolút pozicionálási modellel foglalkozik.
új wordpress téma került fel

Posted: March 10th, 2008, 10:40pm CET by toxin

végre sikerült egy pofásat kibányászni, nem 10perc volt , dolgozom a bekonfigurálásán … , riszpekt mindenkinek aki sajátot használ
Elemi csoportok (atomic groups)

Posted: March 9th, 2008, 12:14pm CET by toxin

Előző bejegyzésben a rétegezési kontextus egyik tulajdonsága a következő volt : "mindegyik kontextus kívülről zárt, atomi: a kontextusban lévő lévő elemek(statikus, pozicionált, float-olt) közé, z-tengelyről beszélünk, külső (ős, szomszédos) pozicionált elem rétegzési kontextusa nem rétegződhet be." . Hogy mit is jelent ez a gyakorlatban, milyen problémákat lehet vele orvosolni, erről lesz szó ebben a bejegyzésben.
Rétegzési kontextus (stacking-context)

Posted: March 8th, 2008, 12:22pm CET by toxin

Avagy ki-hogy ismeri : rétegezési sorrend(stacking order), rétegezési szint (stacking level), z-index, rétegezés(layering), kirajzolási sorrend (painting order). HTML dokumentumok minden egyes eleméhez tartozik egy z-index, amely a dokumentumra merőleges z-tengelyen határozza meg egy adott elem pozícióját
Pozicionálási modellek II. - Statikus pozicionálási modell

Posted: March 2nd, 2008, 11:02am CET by toxin

A statikus pozicionálási modell beállítása esetén az egyes elemek a normális szövegfolyamban (normal-flow) helyezkednek el, beállítani az position:static CSS tulajdonság megadásával tudjuk, általános minta:
Doboz modell VI. vs Pozicionálási modellek I.

Posted: March 1st, 2008, 6:37pm CET by toxin

A CSS hat különböző pozicionálási modellt tartalmaz, használatukkal lehetséges: áthelyezni egy elemet minden tartalmazott elemével együtt, megváltoztatni egy elem pozícióját az őt tartalmazó elemhez, látótérhez(viewport) képest, lehetséges visszatenni egy elemet a saját rétegébe, illetve eltávolítani a szövegfolyamból (flow), vagy megváltoztatni a pozícióját a z-tengely mentén. Az előbbi kettőről lesz szó ebben a bejegyzésben, az utóbbiakat [...]
bbPress fórum a lapon

Posted: March 1st, 2008, 12:33pm CET by toxin

Offolások elkerülése végett, felapplikálódott egy bbPress fórum, utolsó hozzászólások láthatóak az oldalsáv tetején, használja mindenki egészséggel, cikkel, lappal, css-el kapcsolatban (minden más téma, a kedvemtől függően törlésre kerülhet), közben már készül a következő cikk : Boxmodellek vs Pozicionálási modellek címmel, természetesen . http://boxmodels.toxin.hu/forum/register.php , ha nem lenne meg
Overflow CSS tulajdonság

Posted: February 27th, 2008, 9:29am CET by toxin

Overflow CSS tulajdonság határozza meg megjelenítését annak az állapotnak, amikor a tartalom nagyobb az őt tartalmazó doboznál, alapértelmezetten visible, lehet még hidden, scroll, és auto, elég egyértelmű szóval : w3c - megfelelő oldala :) . Amit viszont érdemes tudni róla, ill. össze tudtam szedni :
Hello Világ!

Posted: February 24th, 2008, 7:11pm CET by toxin

A tökéletes blog-ot elolvasva, érdeklődnék az itteni viszonyok tekintetében, van üröm-e az örömben, értsd szükséges-e bárminemű módosítás eszközölnöm a blogon, vagy minden rendben csak így tovább . A bejegyzések írása is kezd stabilan a heti programon részévé válni, az-az kijelenthetem, hogy aki velem tart a továbbiakban, az heti 3 frissítésre számíthat ill. mivel a [...]
Background CSS tulajdonság

Posted: February 24th, 2008, 5:05pm CET by toxin

Mivel nem kapcsolódik a dobozmodellekhez, és a -position-on kívül, bonyolultság sincs benne, két linket és egy rövid összefoglalást szúrok csak be ide, első link a w3c megfelelő oldalára mutat, második link pedig a sitepoint idevágó oldalára ami alatt a background egyetlen problematikus aspektusát fejtik ki a background pozicionálását.
Doboz modell V. - Alaptulajdonságok: margin,padding,border vs Box modellek

Posted: February 24th, 2008, 1:26pm CET by toxin

Margin, padding, border habár három különböző tulajdonságát határozza meg a box modelleknek, hatásuk eléggé hasonlít. Ezért célszerűbbnek - és egyszerűbbnek - láttam együtt vizsgálni őket ( ill. részletesebben a margin-t), és inkább hatásuk különbségével foglalkozni. Összefoglalva tehát ezen bejegyzésben megvizsgáljuk: margin, border, padding, hatását egy adott box modellű elemre, szülőelemére, valamint a körülötte lévő egyéb elemekre.
Doboz modell IV. - Alaptulajdonságok: height vs Box modellek

Posted: February 23rd, 2008, 5:54pm CET by toxin

CSS alatt a height tulajdonság határozza meg az egyes (box) elemek magasságát, azok így lehetnek: tartalom, tartalmazóelem és általunk beállított magasságúak. A height tulajdonsággal alkalmas az összes box modell magasságának meghatározására, kivétel az inline elemekét, ezek magasságát a font ill. a font-size határozza meg. Lássuk hogyan ...
Doboz modell III. - Alaptulajdonságok: width vs Box modellek

Posted: February 19th, 2008, 8:04am CET by toxin

CSS alatt a width tulajdonság áll rendelkezésünkre, ahhoz hogy meghatározzuk az egyes (box) elemek szélességét, amik így lehetnek: tartalom, tartalmazóelem és általunk beállított szélességűek. Ebben a jegyzetben ezt foglaljuk össze, a későbbi könnyű összehasonlítás céljából.
Doboz modell III. - Alaptulajdonságok: width vs Box modellek

Posted: February 19th, 2008, 8:04am CET by toxin

CSS alatt a width tulajdonság áll rendelkezésünkre, ahhoz hogy meghatározzuk az egyes (box) elemek szélességét, amik így lehetnek: tartalom, tartalmazóelem és általunk beállított szélességűek. Ebben a jegyzetben ezt foglaljuk össze, a későbbi könnyű összehasonlítás céljából.

← grafika honlapkeszites →

Honlapkészítés, keresőoptimalizálás, honlap optimalizálás, seo, online marketing hírek | tutorial.hu » sitebuild

Feeds

sitebuild (50 unread)

Posted: July 12th, 2009, 11:30am CEST by admin

Posted: July 11th, 2009, 8:47pm CEST by admin

Posted: March 14th, 2009, 1:23pm CET by txn

Posted: March 9th, 2009, 7:26am CET by txn

Posted: March 1st, 2009, 3:17pm CET by txn

Posted: February 22nd, 2009, 5:53pm CET by txn

Posted: February 15th, 2009, 10:58am CET by txn

Posted: February 14th, 2009, 3:39pm CET by txn

Posted: August 6th, 2008, 9:07pm CEST by toxin

Posted: June 8th, 2008, 12:27pm CEST by toxin

Posted: June 8th, 2008, 12:27pm CEST by toxin

Posted: June 7th, 2008, 10:59am CEST by toxin

Posted: June 7th, 2008, 10:59am CEST by toxin

Posted: June 7th, 2008, 10:59am CEST by toxin

Posted: June 7th, 2008, 10:59am CEST by toxin

Posted: May 31st, 2008, 8:09am CEST by toxin

Posted: May 25th, 2008, 3:00pm CEST by toxin

Posted: May 4th, 2008, 7:33am CEST by toxin

Posted: May 3rd, 2008, 12:43pm CEST by toxin

Posted: May 2nd, 2008, 10:59am CEST by toxin

Posted: May 1st, 2008, 11:48am CEST by toxin

Posted: May 1st, 2008, 11:29am CEST by toxin

Posted: April 28th, 2008, 8:34am CEST by toxin

Posted: April 20th, 2008, 3:34pm CEST by toxin

Posted: April 13th, 2008, 6:46pm CEST by toxin

Posted: April 13th, 2008, 11:48am CEST by toxin

Posted: April 12th, 2008, 12:31pm CEST by toxin

Posted: April 9th, 2008, 7:49am CEST by toxin

Posted: April 9th, 2008, 7:43am CEST by toxin

Posted: April 6th, 2008, 9:13am CEST by toxin

Posted: April 5th, 2008, 2:55pm CEST by toxin

Posted: April 2nd, 2008, 8:11am CEST by toxin

Posted: March 29th, 2008, 11:07am CET by toxin

Posted: March 24th, 2008, 12:58pm CET by toxin

Posted: March 23rd, 2008, 2:59pm CET by toxin

Posted: March 22nd, 2008, 4:11pm CET by toxin

Posted: March 15th, 2008, 3:12pm CET by toxin

Posted: March 10th, 2008, 10:40pm CET by toxin

Posted: March 9th, 2008, 12:14pm CET by toxin

Posted: March 8th, 2008, 12:22pm CET by toxin

Posted: March 2nd, 2008, 11:02am CET by toxin

Posted: March 1st, 2008, 6:37pm CET by toxin

Posted: March 1st, 2008, 12:33pm CET by toxin

Posted: February 27th, 2008, 9:29am CET by toxin

Posted: February 24th, 2008, 7:11pm CET by toxin

Posted: February 24th, 2008, 5:05pm CET by toxin

Posted: February 24th, 2008, 1:26pm CET by toxin

Posted: February 23rd, 2008, 5:54pm CET by toxin

Posted: February 19th, 2008, 8:04am CET by toxin

Posted: February 19th, 2008, 8:04am CET by toxin