Archive április 2008

Pozicionálások a gyarkorlatban II+. : Statikus soron belüli elemek igazítása horizontálisan és vertikálisan ( 844 olvasás ) 0

ápr28

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

tovább … »

Pozicionálások a gyarkorlatban II. : Statikus soron belüli elemek igazítása horizontálisan és vertikálisan, v0.1 ( 4,270 olvasás ) 0

ápr20

Elöljáróban szeretném leszögezni, hogy ez a bejegyzés szigorúan ‘belső’ használatra készült – nem mintha a többi nem – , mind terminológiájában mind tartalmában, valószínűleg változni fog majd a későbbiekben, ezért adtam neki egy 0.1 kezdőverziószámot

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.

tovább … »

Elemi csoportok, reloaded ( 754 olvasás ) 0

ápr13

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 ( 780 olvasás ) 0

ápr13

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.

Mivel e bejegyzésben szereplő minta a relatív pozicionált elemekről szól, az esetleges meglepődések elkerülése érdekében, érdemes továbbolvasás előtt végigkattintani az e témához kapcsolódó bejegyzéseket .

Kétfajta típusú elemen lehetséges relatív pozicionált modellt alkalmazni, az első csoportba a statikus(static), a másodikba az úsztatott(float) elemek tartoznak. Mindkét típus azonos szinten lévő megjelenítési rétegben helyezkedik el: előbbiek a normál szövegfolyam, utóbbiak az úsztatott elemek rétegében. E bejegyzésben szereplő minta segítségével ezen elemek megjelenítési pozícióját változtathatjuk meg -jobb,bal,fel,le irányokban- úgy hogy közben, az előbbi bejegyzésben szereplő ‘Abszolút és rögzített pozíciójú elemek eltolása margók segítségével’ mintával ellentétben, a mintát alkalmazó elemek megjelenése (size, line breaks, line-spacing, stb. tulajdonsága ) nem, valamint a többi elem pozíciója sem módosul.

tovább … »

Pozicionálás margókkal V. : Abszolút és rögzített pozíciójú elemek eltolása margók segítségével ( 819 olvasás ) 0

ápr12

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 :D

tovább … »

CSS naked day !! ( 780 olvasás ) 0

ápr9

Pozicionálás margókkal IV. : Úsztatott elemek eltolása margók segítségével ( 846 olvasás ) 0

ápr9

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. Utóbbi esetben előfordulhat az elemek – inline és egyéb úsztatott elemek- közötti átfedés(overlap). Ahogy szó volt már róla, az úsztatott (float-olt) elemek megjelenítési rétege közös az inline elemekével, ebből kifolyólag az úsztatott elemek pozíciójának megváltoztatása befolyásolja azokét is, ellentétben az abszolút és fixen pozicionált elemekkel ahol ilyen hatás nem jelentkezik, ezek a pozíciója a többi elemtől függetlenül állítható. Úsztatott elemeken alkalmazott margóbeállítás nem befolyásolja azok megjelenítési dimenzióit, ezért úsztatott elemeken margókkal behúzás nem, csak eltolás hozható létre.

tovább … »

Pozicionálás margókkal III. : Statikusan pozicionált táblák behúzása és eltolása margók segítségével ( 932 olvasás ) 0

ápr6

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.

tovább … »

Pozicionálás margókkal II. : Statikus elemek pozicionálása a margók segítségével ( 828 olvasás ) 0

ápr5

Ebben a jegyzetben folytatjuk az előző bejegyzéssel megkezdett, pozicionálás a gyakorlatban avagy a bűvészkedés a margókkal c. sorozatunkat. A sorozat egyébként és előreláthatólag még tizenegy bejegyzéssel fog gazdagodni, ezek a következő témaköröket fogják részletezni ill. adnak majd általános megoldási mintákat a témakörök címében található problémákra:

  1. Statikus elemek pozicionálása a margók segítségével, a mostani cikk témája
  2. Statikusan pozicionált táblák behúzása és eltolása margók segítségével
  3. Úsztatott elemek eltolása margók segítségével
  4. Abszolút és fixen pozicionált elemek pozíciójának beállítása margók segítségével
  5. Relatívan pozicionált elemek pozíciójának megváltoztatása margók segítségével
  6. Statikus inline elemek igazítása horizontálisan és vertikálisan
  7. Statikus blokk elemek eltolása és igazítása
  8. Statikus tábla elemek igazítása vertikálisan és horizontálisan
  9. Abszolút elemek igazítása vertikálisan és horizontálisan
  10. Abszolút elemek középre igazítása
  11. Elemek igazítása egy konténer elem körül

heti 2-3 téma sebességgel fog-tud továbbra is haladni a blog, de a fentieken túl is sok-sok téma vár bejegyzésre szóval “Hajrá CSS :)”.

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, tipikus ‘jó tudni’ kategória, vágjunk is bele…

tovább … »

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 ( 1,987 olvasás ) 0

ápr2

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ái-lehetőségei illetve azok megoldási módszerei 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.

tovább … »

b{}xm{}dels.toxin.hu is powered by WordPress and the original FREEmium Theme.
developed by Dariusz Siedlecki and brought to you by FreebiesDock.com