á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 … »
á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 … »
á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
á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 … »
á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
…
tovább … »
á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 … »
á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 … »
á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:
- Statikus elemek pozicionálása a margók segítségével, a mostani cikk témája
- Statikusan pozicionált táblák behúzása és eltolása margók segítségével
- Úsztatott elemek eltolása margók segítségével
- Abszolút és fixen pozicionált elemek pozíciójának beállítása margók segítségével
- Relatívan pozicionált elemek pozíciójának megváltoztatása margók segítségével
- Statikus inline elemek igazítása horizontálisan és vertikálisan
- Statikus blokk elemek eltolása és igazítása
- Statikus tábla elemek igazítása vertikálisan és horizontálisan
- Abszolút elemek igazítása vertikálisan és horizontálisan
- Abszolút elemek középre igazítása
- 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 … »
á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 … »