spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Lukáš Banič 16.11.2012
Hodnoť článok:
19 1

3 praktické CSS postupy, o ktorých ste možno nevedeli...

Niektorých je plný internet, iné sa hľadajú ťažko a ešte ťažšie sa vymýšľajú. Poďme sa pozrieť na 3, o ktorých pravdepodobne neviete...

Niekedy sa snažím v CSS "vyčarovať" niečo zložitejšie, než to, o čom sa píše v obvyklých návodoch... niekedy musím nespočetne veľa-krát preklikať google, aby som našiel, čo potrebujem a niekedy musím do toho zapojiť aj vlastnú hlavu. Tu sú 3 postupy, ktoré som buď dlho hľadal, respektíve vymýšľal a dnes ich rád používam. (Nič ľahké :P)

Vertikálne zarovnanie na stred

Obvyklé riešenie sa spolieha na to, že poznáme výšku elementu a vyzerá asi takto:

#element
{
	position: absolute;
	top: 50%;
	height: 100px;
	margin-top: -50px // polovica z height
}

Ale čo v situácii, keď nepoznám výsku elementu, prípadne sa výška elementu dokonca mení? Budem to musieť počítať javascriptom? Ale nie, ten nemám rád ;) Je tu menej známe, ale zato praktickejšie riešenie, ktoré vyzerá takto:

#element
{
	margin: auto;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

Funguje to nielen v internetovych prehliadacoch, ale aj v IE8 a viac... :P

Nadpis medzi čiarami

Pre nadpisy je to veľmi pekný efekt, ale v istých situáciách je trochu problém ho implementovať. Spravidla sa dočítate, že máte nadpisu dať background-image, čím vytvoríte čiaru a samotný text nadpisu vložiť do inline-block elementu, ktorému nastavíte background-color, čím požadovaný efekt vytvoríte. Má to však jeden háčik. Ak pozadie pod nadpisom nie je tvorené jednou farbou, ale obrázkom, tento postup zlyháva. Chvíľu som sa s tým hral a nakoniec som pre svoj projekt sám dal dohromady takéto sofistikované, ale funkčné riešenie:

HTML:

<div class="nadpis">
	<h2>
		<span class="before"></span>
		<span class="after"></span>
		Nadpis
	</h2>
</div>

CSS:

.nadpis
{
	position: relative;
	text-align: center;
	overflow: hidden;
}

h2
{
	display: inline;
	position: relative;
}

h2 .before, h2 .after
{
	display: block;
	position: absolute;
	width: 500px;
	height: 1px;
	overflow: hidden; /* Stary zvyk, IE 6 ignoroval height 1px bez overflow: hidden */
	left: -520px; /* 500px je dlzka ciary a zvysnych 20px je medzera medzi textom */
	top: 50%;
	background: #DDD;
}

h2 .after
{
	left: 100%;
	margin-left: 20px;
}

Vzájomné zväčšovanie výšky dvoch elementov

Vo svojom projekte som potreboval mať vedľa seba dva elementy (main, sidebar) a potreboval som, aby sa obe zväčšovali v závislosti jeden od druhého. A aby som zvýraznil element main, ešte som sa rozhodol tento element o pár pixlov roztiahnuť do výšky, ako je zobrazené vyššie na obrázku. A samozrejme urobiť to všetko bez javascriptu.

Tabuľkový dizajn, ktorý by sa tu dal použiť, som odmietol robiť. Namiesto toho som si vytvoril 2 elementy s position: absolute a výškou 100%, ktoré vytvorili background pre moje dva súčasne sa zväčšujúce elementy. Po tom, či už bol vyšší sidebar alebo main element, ich výšky sa "naoko" zväčšovali súčasne.

HTML:

<div class='page'>
	<div class='main-background'></div>
	<div class='sidebar-background'></div>
	<div class='main'></div>
	<div class='sidebar'></div>
	<div style='clear:both'></div>
</div>

CSS:

.page
{
	position: relative;
}

.main-background
{
	position: absolute;
	z-index: 3;
	width: 600px;
	height: 100%;
	top: -10px;
	left: 0px;
	padding-top: 10px; /* Padding nám zväčší výšku elementu a zvýrazní ho tak oproti sidebaru */
	padding-bottom: 10px;
	background: #DDD;
}

.sidebar-background
{
	position: absolute;
	z-index: 2;
	width: 200px;
	height: 100%;
	top: 0px;
	left: 600px;
	background: #BBB;
}

.main
{
	position: relative;
	z-index: 5; /* musí byť väčší ako pri main-background, aby bolo vidieť text */
	min-height:500px;
	width: 600px;
	float: left
}

.sidebar
{
	position: relative;
	z-index: 5; /* musí byť väčší ako pri sidebar-background, aby bolo vidieť text */
	min-height:500px;
	width: 200px;
	float: left
}

Toto je môj prvý článok, tak snáď niekomu pomôže...

Hodnoť článok:
19 1

38 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

1 0 Maco Laco 11.12.2012 18:40:18
Keď použijem to "menej známe, ale zato praktickejšie riešenie" z príkladu o vertikálnom zarovnaní s <div id="element">Obsah</div>, zobrazí sa mi to vľavo hore. Čo robím zle?
0 0 Andrej Badin 8.12.2012 02:17:22
@František "yderf" Haško to je jasné, ale tu už musím poznať šírku (ak to nechcem robiť javascriptom (nie, nechcem)). Čisté CSS riešenie asi nebude :)
0 0 František "yderf" Haško 29.11.2012 13:26:30
@Andrej Badin potom presne sprav to iste ako na vysku - left:50% a margin-left:-polovica sirky vnutorneho
0 0 Andrej Badin 29.11.2012 12:22:19
Koment k "Vertikálne zarovnanie na stred"
Super trik! Ako som však zistil, má jeden nedostatok. Ak je centrovaný element širší ako rodičovský element, nebude vycentrovaný horizontálne :-/
Viď. príklad: http://jsfiddle.net/zhMRS/1/
Má niekto riešenie tohoto problému?
0 0 Miloš 20.11.2012 22:26:02
Lukáš, František:
Na tejto stránke je popísané za a proti pre každú jednu metódu. Lukášova metóda je druhá:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
To aký problém je s Lukášovým centrovaním som si zle pamätal. Problém je iný, na stránke je to popísané.


František: s table-cell som problémy zatiaľ nemal, ale na druhej strane, tak dokonale otestované to nemám, takže sa nemôžem vyjadriť, že problémy určite nie sú. Neviem, možno sú možno nie sú.
0 0 Miloš 20.11.2012 22:18:04
František: Navrchu stránky som myslel toto (navrchu zvislo):

body {
margin: 0;
}

<body>
tu
...
0 0 František "yderf" Haško 20.11.2012 19:27:16
Milos: nie som si isty, ze co si myslel "úplne navrchu stránky", ale ak berieme ze hned za <body>, tak imho hej, z-index by to riesit mal. samozrejme, body musi mat v tom pripade nejaku vysku

display:table-cell; je sice cesta, no zase to zabije mnoho veci - na takyto elementmozes mat len nejakych zopar vlastnosti, ci ako (bg,color, align, vertical align, border...nie som si uplne isty, musel by som pozriet manual) - teda tie, ktore by fungovali na realne td/th
0 0 Miloš 20.11.2012 15:16:21
František: Asi už rozumiem. Chcel si tým naznačiť, že problém, ktorý som uviedol už nemusí byť aktuálny. Je to možné. V každom prípade, moje riešenie je trošku jednoduchšie, ale toto riešenie je rovnako použiteľné. K môjmu riešeniu som došiel pred pár týždňami, lebo som potreboval vertikálne centrovanie a tento článok tu vtedy nebol.
0 0 Miloš 20.11.2012 14:54:15
František: Nerozumiem, čo má môj príspevok spoločné so z-index. Nemala to byť reakcia na niekoho iného?
0 0 František "yderf" Haško 20.11.2012 13:21:30
@Miloš seriously, http://www.jakpsatweb.cz/css/z-index.html - to narychlo nejaky jednoduchy odkaz
poznamka: autor tam nevidel v tej dobe jeden zo zmyslov zaporneho z-indexu (mozno to este tak vtedy nefungovalo), v kazdom pripade, zaporny index funguje vzhladom k pozadiu (nad) a obsahu (pod) nadradeneho elementu.
0 0 Miloš 20.11.2012 11:56:34
Chcel by som doplniť, že vertikálne zarovnanie uvedené v článku trpí jednou vadou a to je, že element nesmie byť úplne navrchu stránky (pokiaľ sa dobre pamätám), inak sa správne nevycentruje. Tieto problémy rieši môj článok a nefunguje to len v IE6 (tip autora myslím funguje aj v IE6):
http://milsa.info/programovanie/internet/96-zvisle-zarovnanie-elementu-do-stredu

K ostatným tipom sa nevyjadrím, pretože som ich nikdy nepotreboval.
0 0 Lukáš Banič 20.11.2012 00:52:15
@František "yderf" Haško Mas pravdu, pri static to fungovat nebude, ale to by mal kazdy, kto pouziva elementy s absolutnou poziciou vediet, ze ich pozicia sa neodvyja od statickych elementov...

Co sa tyka tych pseudotried, nech si clovek zvoli, co sa mu viac hodi, obe riesenia suu rovnako funkcnee... tu je riesenie bez spanov:

h2:before, h2:after
{
display: block;
position: absolute;
width: 500px;
height: 1px;
overflow: hidden;
left: -520px;
top: 50%;
background: #DDD;
content: " "
}

h2:after
{
left: 100%;
margin-left: 20px
}
1 0 František "yderf" Haško 20.11.2012 00:26:26
Ja som za :before a :after - pokial to nie je uplne dolezita funkcnost plnena nejakou grafikou (t.j. bez nej je vyznam horsie pochopitelny), tak je v pohode pouzitie veci, ktore z realne (je sanca ze poznas cloveka, co to pouzil uplnuly mesiac) pouzivanych prehladacov dnes nejde v jednom. Naopak, prazdne span-y su vsade, a viac spanov je viac elementov a viac elementov je horsie ako menej elementov (yahoo odporucania). Tomu sa vravi graceful degradation (prip. progressive enhancement).

Btw. neviem, ci to uz niekto spominal, no pri prvom triku si zabudol dolezitu vec, a to ze treba si dat pozor, aby element do stredu ktoreho element zarovnavame mal prinajmensom position:relative; (teda pri static to fungovat nebude)
1 5 viťo 19.11.2012 23:08:28
@Michal Obeda preco preco preco.. kokos, hladas otazky, mas tu 2 riesenia, vytvor tretie.. s kazdym sa da pracovat, upravit ho a este vylepsit.. ved podla teba nie je mozne ani TITLE webu nastylovat.. kokos
@František Čaník to na css.podstromami.com, to su vsetko veci co som robil sam, niekedy od 2003.. kde si bol.. noo.. neviem
1 0 Lukáš Banič 19.11.2012 23:02:04
@viťo Áno, toto už je lepšie, ale ako si sám povedal, nie je to automatické a teda v praxi je to nepoužiteľné. Hlavné je, že to má o 2 SPAN-y menej, však?? Ako tá paródia na apple, v ktorej sa nový macbook predával bez displeja, super novinka, hlavné, že je 150 gramov ľahší...

Ak ti tak išlo o tie 2 SPAN-y .after a .before, v mojom kóde sa dajú ľahko zameniť za pseudotriedy :after a :before, pričom sa zachová univerzalita a automatickosť. Osobne preferujem SPAN-y, nakoľko sú kompatibilnejšie, ale to už je detail, ktorý si vie každý zmeniť.

Snažil som sa poskytnúť univerzálne riešenia, ktoré sa v reále dajú použiť a dbal som na kompatibilitu... takže asi tak...
1 0 František Čaník 19.11.2012 22:47:00
@viťo a @Michal Obeda: myslím si, že si pán "dokonalý" akosi nedá vysvetliť, že jeho riešenie je zo základnej školy, kde sa učia html 1.0 a css 1... polovica z jeho "príkladov" z jeho webu je čisto len preložená z rôznych tutoriálov, takže ako sorry, ale fakt že škoda reči a straty slov nad pána dokonalého.
1 1 Michal Obeda 19.11.2012 22:41:28
@viťo - zaujímavé, prečo si nepoužil to svoje riešenie, ktoré si dal predtým? Aha, ono to nešlo. A ty si to nevedel, keď si to písal? Smutné...
1 4 viťo 19.11.2012 21:51:03
@Michal Obeda pre mna je nieco ludom vysvetlovat niekedy az zataz..

http://css.podstromami.com/kokot-kravsky.html

je to pouzitelne, nie je to automaticke, ale dlzka ciar podla dlzky textu menit da, cez css3, cize ziadne nove classy, ani id nie je treba..
ako som pisal - upravit podla potreby..
1 1 Michal Obeda 19.11.2012 21:06:36
@viťo - nie, Viktor, neodpovedal. Aby si sa nemohol vykrúcať, zopakujem to. Ako chceš pomocou tohto:
<div id="kokot-kravsky">
<h2>....</h2>
</div>

#kokot-kravsky {background: url("1px-ciara.png") repeat-x scroll 0 33px transparent;}
h2{ background-color: #podla-chuti;
margin: 0 auto;
text-align: center;
width: akokolvek;}
Dosiahnuť to, že to nebude vyzerať ako na obrázku? http://www.majtech.eu/website/public-files/reply.png
1 4 viťo 19.11.2012 20:28:12
@Michal Obeda .. reagoval som na clanok.. ty si vytiahol daku css disketu, ci daco o mojom zivote ;) troubo.. jemu som predsa odpovedal..
Zajtra.sk > Programovanie > CSS/HTML > 3 praktické CSS postupy, o ktorých ste možno nevedeli...


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama