Pozicionálások a gyarkorlatban II. : Statikus soron belüli elemek igazítása horizontálisan és vertikálisan, v0.1 0
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.
Soron belüli(inline) elemek horizontális igazításának általános mintája a következő:
HTML
Balra igazítás
<TERMINÁLIS-BLOKK class=”align-left”>tartalom</TERMINÁLIS-BLOKK>
Középre igazítás
<TERMINÁLIS-BLOKK class=”align-center”>tartalom</TERMINÁLIS-BLOKK>
Jobbra igazítás
<TERMINÁLIS-BLOKK class=”align-right”>tartalom</TERMINÁLIS-BLOKK>
Sorkizárás
<TERMINÁLIS-BLOKK class=”align-justify”>tartalom</TERMINÁLIS-BLOKK>
a terminális blokk elemekről volt már szó a korábbiakban. mintához tartozó CSS
.align-left { text-align:left; }
.align-center { text-align:center; }
.align-right { text-align:right; }
.align-justify { text-align:justify; }
A mintával különösebb problémáink nem lehetnek, néhány megjegyzés azért:
- a fenti mintával a terminális blokk elemek tartalmát igazítjuk, ha nincs tartalom semmi látható nem történik
- a tartalom tetszőleges soron belüli, szöveg, szemantikus, cserélt, vagy kontroll elem lehet
- a minta alkalmazható struktúraképző blokk elemen is, a text-align CSS tulajdonság öröklődik
- a sorkizárás algoritmusa egyszerű, az utolsó sor kivételével, további extra space elemeket szúr be egy adott sor szavai közé, ezáltal azok az adott tartalmazó blokk oldaláig lesznek széttolva
Soron belüli elemek vertikális igazítása
Gugliba írva a következő keresőkifejezést : ‘vertical align inline box’ nagyon jó és kimerítő cikkeket tudunk találni a témában, most ezekből, a lehető legegyszerűbben – magamnak és naplómnak, mint alsó küszöb – összefoglalom ill. levonom azokat a tanúságokat amit a témáról a gyakorlati munkához szvsz tudni érdemes – várva a hozzászólásokat is – .
<style type="text/css">
p {
font-family: "Times New Roman", "Times Roman", Times, serif;
font-size: 24px;
border: 5px solid gold;
width: 385px;
}
.big {
font-size: 72px;
}
.little{
font-size:12px;
}
</style>
</head>
<body>
<p>
Itt a jó öreg <span class="big">nagyÍka lakozik</span> a nem <span class="little">kis</span> kérdés, hogy miért pont így?
</p>
</body>
Mivel így mindenkinek jóval egyszerűbb lesz, a magyarázatokhoz a fenti kód lerendeléséről készült ábrát fogom használni (fx) a következőekben
Új fogalomként -belső használatra- vezessük be, az igazítási kontextust. Az igazítási kontextus egy terminális blokk vagy egy sorközi szemantikus elem egy adott sorára ill. tartalmára nézve meghatározza az abban a sorban-elemben lévő sorközi(inline) elemek vertikális pozícióját. Az igazítási kontextus az alábbi négy vonallal ill. ezen vonalak pozíciójával jellemezhető:
- szövegtető(text-top), a nagy ékezetes betűk(mint Í) fölött helyezkedik el
- alap(baseline), pozíciója: betűvonal alá nyúló rész (descender, magyar szót nem találtam rá) nélküli karakterek (mint: m) alatt helyezkedik el
- közép(middle) az ex magasság – x betű magasságának- közepénél helyezkedik el
- szövegalj(text-bottom) betűvonal alá nyúló résszel rendelkező betűk (mint:p) alatt helyezkedik el
Az ábrán a vonalak sorrendje fentről-lefelé, egyezik a felette lévő listában elfoglalt pozíciójával. Lássuk az ábrán:
Minden sorközi szemantikus elem új igazítási kontextust hoz létre adott terminális blokk, vagy egy másik sorközi szemantikus elem igazítási kontextusán belül, lényegében egymásba ágyazott kontextusokról ill. kontextus fáról beszélhetünk. Amennyiben azonos fontméretet, kontextus magassággal egyező sormagasságot (line-height), vagy ezeknél nem nagyobb cserélt,kontroll elemet használunk a kontextusfán belül ez, a vertikális igazítás szempontjából, nem jár következményekkel, azonban, ahogy a fenti ábrán például: különböző fontméretű kontextusok esetén az előbbieken túl, még két vertikális vonal válik elérhetővé: a top, és a bottom. Ezek pozíciója alapestben (egyező fontméret stb. esetén) egyezik a text-top,text-bottom vonalak pozíciójával. Különböző fontméretű kontextusok ill. adott sorban lévő igazítási kontextusnál magasabb cserélt(replaced), kontroll(controll) elem vagy line-height esetén azonban már nem. Ekkor az adott elemet tartalmazó igazítási kontextus text-top,text-bottom stb. vonala határozza meg az így megadott vertikális pozíciókat, míg a top és bottom értéket ill. pozícióját adott sorban
- a legnagyobb fontméretű karaktert tartalmazó kontextus text-top,text-bottom pozíciója
- az adott sor legnagyobb sorközi(inline) cserélt(replaced),kontroll(controll) elemének magassága
- line-height értéke, (ekkor firefox igen érdekesen kezdett viselkedni, részemről tehát maradok a font-size-nál)
ill. ezek közül a legnagyobb határozza meg. Előbbiek illusztrálására példafájl is készült.
A sorközi elemek vertikális pozicionálásra használható általános minta a következő:
HTML
<TERMINÁLIS_BLOKK> <INLINE> tartalom </INLINE> </TERMINÁLIS_BLOKK>
CSS
TERMINÁLIS_BLOKK_KIVÁLASZTÓ{ font-size:+em; }
TERMINÁLIS_BLOKK_KIVÁLASZTÓ { vertical-align:IGAZÍTÁSI KONTEXTUS egyik vonala; }
Alapértelmezetten az elemek, az igazítási kontextusok, azonos pozícióban lévő, alapvonalán(baseline) helyezkednek el. Lássunk példát a fentiekre
<style type="text/css">
p {
border: 1px solid black;
margin: 0;
padding: 0;
font-size: 60px;
}
.little {
font-size: 12px;
vertical-align: text-top;
}
.t {
vertical-align: top;
}
.b {
vertical-align: baseline;
}
.tt {
vertical-align: text-top;
}
.m {
vertical-align: middle;
}
.tb {
vertical-align: text-bottom;
}
.bo {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>
Íxmpl: <span class="little t">top</span>
<span class="little tt">t-top</span>
<span class="little m">middle</span>
<span class="little b">base</span>
<span class="little tb">t-bottom</span>
<span class="little bo">bottom</span>
</p>
A magyarázat itt egyszerű, az igazítási kontextust meghatározza a terminális blokk tartalma, ill. annak tulajdonságai, a little class-ú elemet ennek meghatározó vonalai mentén tudjuk pozicionálni. Természetesen un. ezzel a módszerrel pozicionálhatunk képeket is terminális blokkon belül
ha a fenti kódban span-ok helyére
<img class="t" src="star.gif"/> <img class="tt" src="star.gif"/> <img class="m" src="star.gif"/> <img class="b" src="star.gif"/> <img class="tb" src="star.gif"/> <img class="bo" src="star.gif"/>
tag-eket rakunk.
A témát folytatjuk ill. ez a jegyzet sincs lezárva …
Hajrá CSS 
iratkozz fel a komment RSS-re
Még nem született komment ehhez a bejegyzéshez