From 2672f3a16e8835fbd57d858202f07a493cf68c31 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Fri, 19 Jul 2024 03:46:57 +0530 Subject: [PATCH] fix(css): update practical positioning examples page (#34752) --- .../fixed-info-box.png | Bin 35744 -> 28097 bytes .../practical_positioning_examples/index.md | 274 +++++++++--------- .../tabbed-info-box.png | Bin 13096 -> 19439 bytes 3 files changed, 144 insertions(+), 130 deletions(-) diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/fixed-info-box.png b/files/en-us/learn/css/css_layout/practical_positioning_examples/fixed-info-box.png index 58fc92191366d923c4ee1e88aa209b7af2003621..e419a3b5f6becf42751c6355e2bb316ad7f860bf 100644 GIT binary patch literal 28097 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

e_;sG~7(;a>Qr*^(U0_b? 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 Jfrzg6{{bODBt!rJ literal 35744 zcmb5UWmH^2(=9xBf(8ignxF#&m*DQM861KJcXxLf+}+*Xo!}DOU5DUs$@AR%es|q} z-~5@i&gwo@wR=}p_dXq}ASaH3h>r*W08k_)M3evkSP%dJE%^cF{Yicb%p3p!15l7r z5iJA&-rj!zz{9`4y8!^8P(15-G3)Jau@IoXt`6wWT0FmdyUNmCTfDovdmnSr1pu60 zyfwa$RL@#pyeI?!*QPFR-`d)8Z%quxAQ*JLtJS zxO=*|fHXKiEf&oI0rwYomrZ#qVDSF-T_M19Q5>)`bn*7K_^{DG_3jcd@;F+2r=V;| z95B_iIUXGQcDJ!JyfI>S;n=1^jiPa9=ljLsw~NI>P}Na_`YBj^(-e5O*tC%uv$b)5x^eL^ z6uk%lY`2USii59*8h@Lr&vhQ$9~}Jc3SL)LzrMIz&C0rNia*LUD>P{=6pws9m|6&S zzMX2iXsf--5_8kqhtOD-f)t#)?U8Va4 zx@dYc!a1MqMTe~~d9y94^(r|nsF*V^mo%50)21Kv6a7nwU-NG|!OPxnN+;~%k-GB- z2)bSDd{*}H{9p14AVz|E&sea4VWey5OV43xn_(m$^j#{>UAXQK*BFG?(0Z`0A5mSQ znEcvdgWCbPf*?O(5FmmS*h2;ch{b?6V{iZz|39bk$7IBZ#m9|I%47{|U5}DXjahsN zrJs=2AW1uPwWg!f*|$hsv|nq!wU5EMzbmhIhv-E?4$;korCz6QYE!pdv zw;G=Tbv_&MI8iPl#y@DaM15}XLcE54D};92ziwET?)ehV33E*@`%Fm!#LSYT$W@~o z3f10X)-7w+$w|(`P7wxeZm9U!hyAIDOnyqoa5dA6YdO|e8vVQ^x0xy3lxh{{lSEGwRn%1V2C2r?VNOCp13kK~E*zzu- z6I~I0A$#3^<<&R1cV*V4<6yLAa)-Jn2e!C;RwSFGxwcCSW83?_r(9_AyY8_;*j0PgP-jp<~)D5)k4M>rQ9>_N4T)w zF``ZZv$VLrEUldxgN_G7ObSL$2OQf&t9D5CKZc6bGKPk#HIFZjs=gWUyNY~p_4SS) zm-gb32GMH79~jqCIEEBnr`8XLuXq`5XMS-G+%}&QenU%p&^i*H$h@)N`sd5;6lkAU zdz9CtYQi-tX_t3mmK<2QBbUGDFfd!=_>2uCXIu z3fI*4w2c)iOWO+(cu+&x0FnCY@R$+JR>;JH^bd6DDC`x~xOY>>AA!2s{BZBiEr*lS zUC;CcGv}5Qn2OKt(?!~HvAI-SbTrNkEG`~9>d?PQ4kH0NnO|Urk-8Vjfc$jN?Uv_? z7ycMlhlX&{3uTK%^ia>b^!GnpMT^%p($_R=-??UJ)Fe-n zxbKM-?i(>ab^}#DUy(5`ebP%GQ7FBqakP~F{p)N(;;`KdL16jX-wl^kkU|Q}!;}i; z%JIfo(p{P%V4M^P&q5EZ{VIv|(jJ0T6{yHMW}=(4LUJ63|6OS=kiQtX!D;N}^)`@F z^5qNL{R-|Wv0zXgX@DV+O78cEme4y_1t~E~+MBq8#MG?07+pfl1vUeHXtP!<^oDYw zbrbWXx=V5-*U`r#&UzKB9f1oayWRSfj@|5#M}YNBBs1)L;b4wcG>x(=6~_u?Um9r_ zQDI1mPi+_3$81pFd-z$Y%pnD1tWY}qXILV4o<(u?mLNLcK=w9ZH|n{_f3AiMOGUa1 z*S`fR9}1~=WULKO)TI2d`qaSgZ?5X!A>)?nnhiZ3M{b&~_6=Pl6ORtJK7xIz!JI1I z+BkYFN7e9n9(_B7rpbAEMun`)5!`exKZst>uQjgJLX|dohioGn?C%rOFY+u2qteto zZ1K~3U*%}AM;v7Cbd#mTq5gVu!@K%I^aVMCou;r%URi*yrLe={gcUcn3vz{d_s%yn zLeYXC(hiMJav;PSo1bsDt0V0{v2L4lotrF|?e5OkTBfJ2XFLyo)07gjLA0rF;%>@Z zOSmOFCh`Ye=W%!8X2Riec17WgKTjJx34<0O#`>M!UqufUUd;Gs=1O*{9wlrtY3&XU zWo77zi-NrPi0pnF*3@gn9*b6DTtk};`!QYTcJ*rnBVtQrBvo&E`0pzpnk;6W$#B&--U$ zq3z6SJRb9>O+4+mEhPDo6d$vbyDa5E7^o4Z#`lc3gOBCEP2OP4AC5SA1aJ;V7Y9j! z0B_7blD>A1yt5@Ih@-#Bsjky=-Ipd{o4fOy@pVQQ9r0~m6|GC%Qz73m)wjPFBm^(- zNp#P%+2jNz@ZPmHfBCipe1h5m-5b!Zu2XVEv+uh*Cgkf2w;>f)D0Dy(PPP!R`v|W1 zHi!f|#0u-u^JfC7OapIIb@92~t<4NVJW!O!1G>@m{{ zt!4@f$(Utvz)}?E6=G#e<|;8^QggIwpLJ|EY@yUubZpdNMPWS^Z3RE67l)C5CBM%t z{_u#S(=9&LveVIzYq6s?-~qHZVX>dQ%ShoGj~wh$08MsXDPn6H#fp~g4J4YPI4(!Y zxs}%$D?ENr1duTNDTz{~=B%Z(>SzW1{KIg$FV&`Nn?@$JQfm|vTeC4vHS+V%7VW6* zPl_rTf}<@JA|k<6a7Rq>|Ll5o61n)vN$cG ziQR?ZrQzLM^0p*>SDO4T^qhSW406?+LJj&?zEW`tpQa}ofGPyjB{hWVuOfC=QTu1@ zJ!4z`&C2M%V&cCmTm@X%J}Ny~sP`6IYy8QN(Kz^B)G8(?Bn!JG_C8Q^}&N{jBI(!m@A{u^8$bT1L}BNjGUKsjNAiu98!!*uEc^694E*LRil+ zXyhDhIx{CFfMMfk0CT{>J4+9geXdMT($ zrquMGAB2yRtr*2G zFO$$6qg%j-E4ahNMZfi-J-UU>q(U*|+N`o5YL(zaxph!~!xpX38`;th-M;Ic?`yAs zH|`~L!bi>79O#&s#P9^kDzL}hC3*kn*3ZXXk*zGk^hJ2)(NhLr6=idvQ#xBPdctA~ zLh_JkD4N#&nWo$`L2+0I6*Ojq)%1Sp-*pign0}}oxlg!B?~1bH5b)TKC#D0oEcVq$ zrE9hm7cy$iLVe{Hpcnjp!uG)9le4~Q#?qV!i;W7sy zwBEWxL2e`aP}20pWiEu>6Ptv>hZs$Q9vX8k?8YjuQV2u2o)*G#2$<2hi+hoOV zx;|;0e?;A3d!#d?u^#qZ(jYnfyF%ec&0Mj2twefJjd5th&cLqra9jabgq5lMlWD&V zTIRiz?zV1a$Xf8>_8igN;Wo&qym48MRo4~Y1bOaWSk0|0Gr=r9mvnTK2qVJ{*2T)mNRRu;RT8t7#MpyQ0yA3C2;Rhm<~D0G zTXo4cdLmAC>$K2eT?r^=WdfebPy#Xo&#IGc##tq|@}6pDL@;h8J!y`CK2$aq>3VC?ovCK886O{>my+Vw@>-E9LfZ`TY*eU@*2(u~-8 z72mZ>%V+&!EMRuiyl)Sm;y7g0@Ja#2g@W{OF>Y6&cXZfyc(o8Iq22JN#LLM{NfDCC zW!=6xro;@zj`Sv=MpPO!+vzF@Gh09o81ST)Imh{tl-r zSf=8Qc4A>*@d#v)CqN;oI+2;iP!5W9b7m70PG6u#uS(#dvfu6D-P@R16uDp-^X$GZ zgJ2+u0Dl`nO%SDyJ#HFzfqwpItiS}#lq9jpC|3s6lSHdsyM;GY0Rp%R7?+vhk&X>F zO2DwRBNSDO1h#mc?;(rY+z`plxV$pYosPMMMrt}acvpR&MKZ;&#QxiNM2jhbgn2v? ziYn-~RZB%)*_Zy;mWs_@@TqxA2ytHekpgrP5@IFS(SN6MtQ3%GbwBjtS%UHa}Whkpz3d%oN=|Moe(6UvlsgNZAYO$&30z%W{$ysMnDX zwbV>20=!y+q0H-Lt|rB~q3RH^xBp9wD+W}7N6jfxP>HK&A~V_4Ord;j!Aa%xQ%aU3 zmm0?8Qa|dXz>%(CoLCP)`Ij$+*8$(=FT2ryLW^QSp;=NB84w*)kCJHCNX}fXBJCGY zr>5n(Xhf+iy>6NunN#-R4-l=w6xkH@$Q%#j@~;16w+YF4djN9cjVki zK5g~>@+9L?0gi~9ODE(5LXSja4q<~0nE0IG?ecCLv22({` zz3DShzjw%t{uj$t3v*XRdUXYCRBBqnu#1*qBlA6{$Wg=!=Tp3bPwqjyJM2_1fi^So+^k z3~s03M>(bE{^d$7D2qk@_<3+y>Nderj3+-_=oAyCWdC`8B(~DOVnhOWCLFax;@6>v zWWmd-ZC9j1$8NZ^mUx&i5Tqll=_B~9j##SqMykgRZ}XPXQF$c;(B|4edHqe9OxM3i zE@G}}AMtC_^q9xxoOmvZhF2wMye`PW)n%oI5IYI7?bZ6^_{Ov?jOhGau8@SnMr_0Ez=D`5Ew*iVh)}bEuLx}L z*B?;WN`~ud)Jpd;`NTvsL1M$^h#ws?w;P^zt#*wZZu-O>kGEe>E-|hk0fH>AUw!QL zpb$r<=_|!pek<9DQk}!1q4m4bFzxV~)8ZB8^Xns|e2;xEK6qwXkf4z-XVEwZQ`1O} zi4T#){tb2>YW{^`V8W?%A~zZ%IarZvY;?><-H^8egjwk@hM&4@1{oL~F(VqaAt~M0 zC;VpZyF|=ntF_g=Z6v&G>i(N4juku~R1wY>>FBU{uyFiZs>7tm*4y!6Z~jVoeCV4n z7?^~vE8h3IN0g*9t^&xKR|YZ#SZtA3(WpH^^b36F{m5IpUb{OGC2t8O;!h{gJS-&W zYA<3x8ChXoC`+DfYB2wT`=N1@`fQ<*&;b>|PR9x(lE%gq_i>A}+p_XuKzRhd#pWyS zd)FDT=^(Rt@_u`|MeV4@7X|ta`*8#wQ{nv_cr0<2#_;^B_c&r;Bmz`)xc&R_HtTW# z!XKdX?IUybUgN<>+nHYkmNVrSCLkf(FXJ=2=f9AuJ(i#`>^i-V` zbWI(cz=R)00%*zFK}L;Kv4??KXh}9F2$I-kIAdMIV91ON*>=)>=A#y@?xHkZ;ByWv zbB^dqC78|p*L5kNekY=ASe~3kja$ugxQ8Urq;;V{q0w6t2pP`Ul-JQD zlbql)FkvEGAefaGF=&?a+bIET0n^GJVcuhXW`I2!m~e|Nnle5@*u(U#Mk}1aP$US< z0E80G_DC8Yvz#|84u7e-Ohq$ePy;4;V>k&?yRLDoQr-}J`SwyMFu|1~8z*c3$+ojo zhS@IWBJ{Xnza)7&7ssS_W`pp@oL332>=iqs-t5ng-j#vlfouL5N`sdrBCJjAOBLF# z*TIEzy=EqNr%P>B0*m9Oz@&r?^lNf;k$%`}jSda^B!1X3obUmIcULv&y^+*_*x>_u zw+1yDuh``vdhGC?;{k*BApQ--_Md+r_@Motq457^T{m4KL29omUo6)Q9{SfE#l#gw zx16VB{L*Tojx1CNk^+jf7VwEcWj2j{crErY~$8KiB9BYRO zo`E80ejb87C5Kq$7lFB~YCTo7|8zI(D_8awRtXGW2@^L&IDWtUAzn_dBFr9*LD6aH zh>j5t`xK!yxDfCrl5^e?Q1>I~)P62;OLvBBBTjgp6`DG3BY zlp43C0`;AVygcpV$tCy_T}*o;Y$K(RPCK8c0E`8EX(Po|`}{1;?mcZuP#vF3KcK(z zxzW@>YIQNEDF%+mwb7J$pHN?23m_d0dIEvlz>6enLtRml7ODT@HqH zZUF?We(s(HNe?D@(%8j{eb}f;o`cOjNy@zDt_c%vNlzXze=7I_+6?;`xl+>z*cUz^ z&F|YyZ{4U^{z;;@(9e9^*Sl`1-+UbUl_|h_%2H4+Zmy7VK;kGhrt#q4xN|Q2qxJ=s z@vJ{;T*8r+-S=d*+>ph3AzJfzeA@E#sG+SS10GWnaK38IJJjUFAqxbuDxOX6v%{Oz zES@YVMpnd}HOyU+aM%J|#(upG7VZA{eHVVPxw`V&nO+1lePrR@-ze} zv%U@dLIIhr?qpiB{k_|@fh8e{sVL0K(RFkorKq&qFW!7w+OuOByImF6!~6nrKNI4C z>U+1RzV#15xhfhwF^HKv>fU#Ky!f3_r$nGp@sm$Pt^Qav{>aP8CTe^PTXxZyku^`V zs4mWXlJ3HVxQ{tJ1g3+X0ab%U}Sk@b4d(vifHu`3EKDv59_z}=p zy~y(HEBD(HLKEqOVb@}+ZhtYdb{*6 z-@8N}y<0RAp4eu3$Hu>zVRN3rTUJEa8StbU@PSVRc$eJuu#G4#CJ z9zi4F^$h@p{0x&hxA?_u7k*2#IJb#$Jezi4A=H`<->;@)j6ySuI|inOi=X1N`ywwk zmntR8S|9VcHs{-}SBLFc5^{42urLQ~VyD2Jj%Wd$*J3ea~;5%ziImPdOk z5B>P8EBK@AG>#w8IH%A(c2L_dN+I`J-_lch=tA#q=es(e94ToTz;W6X!54YP@& z!chhC*XpBwf%|GDt21LULTl{2wP3W-p~5_U#vBrMIISCDBJp`SV*L?wodHDY!=$ip z=ehVLw2nk>50ye+MdW(v9sCi;?$PWyN53`Vxl`l2rR-NgYHkUwNyEaRo<5{1_!p1F`!5vBfl+%=R2+Tz=end#oBjA3EBy?#yrtW+8!!#(sq=Jwd<~N{qL|9>jC&m4K z*tWiZCn^EivTj^P+djG3i=DsXiur9oKG-tXm6JACjmyjcxz2&3xOzMuFjWYL!Rm;L zz``g^-=69i%(#@fG%(j{`ziPEH&SlSNsrg92gLvM1D_a>DhO2Q{@RK&iFls4X1Lm6 z$?IFJ$HBF^#S?Tl_{VssP|pT=w1`6Pdno+y$(5suYP39C*79D-vP$(i4e=iJG!lwC z&7bp?sEg5}xUTbF#1&~-O7AXisRA73(U>)Kf+_NqTbAF_oeWF#9B3z)Q=8S*2|uTC z{7cAef=VmPD7+DQQ_rUv7u|LbbmZzcM*LeA6~Movn;}cb^(TXl?SyBXt)g&5j?b_s z3&O-4j<_F{_oqYX#9ik`S=qJ^sdIHSOZ0zH(Ng;{Njv)^QW0aV_P#`94gMPbPCQL! zyPcUf&LQ54rY{TiUU!Jx1X&$A%$Kq*#I;{U?!}J=JQk~KHQkrFrC*Z;A|`$*`Q;n_ z9=rWAvY;%>nh+12FQWQ_>0i)qEM=&x*~Dp3P8+*e>iYg=Dy=2wEEIoiG_;2F9_8)9 z!IwMZXR!$v`0AW;aAiPBoinYC0ii>}|EacSB^7~>T#Gju|DhF+QB;N&e=KyY-ol_B zn?3&YwM8|j04FFb?NWkocux$8Og7PiL38UpOV4I*d14fl!}6qgx!i$Xkve^7{I8$) zOK(G2ry}UKJLR+SB@turSyO-5jmKFl_(q%aSzn>5s?l2LJJye4uqWb~cqrIVC&_QZ z=YI9^3<)YhcnZ(;M5KUtNbQ6t4rO6GA?ql*X3?fOG(e9|dRlqIS=#P;nh2NOX3{$x z^LZ!Mv)h^8ebL!4%%em2RnfHmP0Hpf|49X3#dfpAiXegFvV?z~OiR;Rt)4fbY$1kpl5M8O>5^8OEAo)12!Dd%$H*u^X zI55e_GS+;VtmGzKUG-g@t$}+&75=?CB8S71{uPfFMSm0;bl`_RPx0YAb2|YSbTosx z#z%3%USsl-o+FVTUWm~<@`Xcx;6v^D2JQyebigGi(!i^JYWPdT;X^FZC_?QGFCfN! zeKN}tE%OSIP-nb(hNASQ{Oy&h<7KF5+#-(2M`<{lh){j^}HD6ejqGF#jejZcDln7eh3bayAO6mFrvy`kJf zZI2&$h*4B+GnP`*mpf2X2p`m*czycq(q^h0TLL(^vBkx>m4;iA;{m^du2eitB=plO zMX32P=GIL7=iamxeby2uvV)C$B>QypPyWEZ@I2@-WW10~cE7tO z@s!uGsjg@H5{{x(mhAt}t&vBlOVCG4zjjwnmcRdCdxM6ssLmWp(;h}OKO23esr&P5 zPhZh7e)pG_o8UjlI4X7nvHt7Ok^^P8^tOw_Ifu297g|QRj2C4w&jk4`$sVi>=3R(v z7AbHY5oQVbG1`hREvPGJPTa5aYrs`A2bu4W7&tv@qCTX%B+zpUdF;&S!pi;z5^^%Q zoP;SpGm%6(1(!l_y|TmRZMsh}zzg}ebmnB(ufo-4%AzmEPG~6C3+i&ekub)rr1%dD zgs+k(B)rjRc3F610afF+3dfyHe(XJPSfD*r*58<2yu?0c~>MPHFRricGOyo(C!%Xc?Pz*}ML?2T1 zzQJVU@GX|veKWvtJc56~zOpuG-unvYLaEg*g9EZ!LMlrs6hz z={sSRo%oM6?}m4ZdXa%~17JO+ftGd{9Rk>TsbBaL()7945D} z79Zuk5kq0jWthZ10{0w(g7kD5kTpaID1hrT;S<^3;|q0W_wLf3l!rGf;Sx3yYm{!j z^aAWnXfHmTIMbCiT#XO9FfjXE&cHd^29$Teh#|dJ;0$L+5g_^_jYgq8YhHzMin#d8 zDA(rW5oPQFu@q2(zKP~#b+qycxzI2Df2S?6h8%Qzj|{g#hbR1_a(<@KH68rF?D*%^ zrSJ*wWJlJ(%R3oo#yHaif1NC|di)^y_-Kp&%8HJpKbXm>y zlNg@z2w~M&1OfTKPQBc)$oygSKtqL7+11_b;@3kyBlW{UZ&y-nurMHZTx1~mrc1_rsRm@(1AUxkO z8H(;Pg&=>MAG;nZCH{BL6c8yA(@zA3R&U>F+s_frlI0B(eE@NO0WIC&Mp`vw%HbPh znu4c;Fa7_{-`@REy1(p-Qr3LZG@=q-mnP#8RXJn+6*CSfVpB0S>$td)Xjn%ai5IY4 z+O=|Gk1NHpL4FI&aJD$#dk(y>4Y=*WQe4HF;+F0&jh zY_F)ZtOUXL$|EjdQW4r2{_vkfwjrH5_6rtGaNx-X4&rjePfBB;-<8;2qdkm=LVk zZhqRaX<@|W6p}FMlpN&VLNd>)g!!XD6Mk|1@G=LR3Z7ryR$c9XIX6ji6KQmAY3gTr zAa=s_+M)s8xHTT;78V2{6{~Sx^QfHfFQ}SDK5M@~spanI7IXN~iMTL8+bmgGs_Tw_ zS(Q%!Az#R?IG;uGveIKR`aU0Ue7uGG^~)obW&#lNLrM`2jE-E8=+yNtn?3Zav>x{; z0Iw}!xxBy`(MQ9Ov)42+G$E}gpzrK1qe@GOVYWp~y4_E8b_VG)m}MZ;3|d8P^#RTZ zbExe%O*x&mqEdP#a}^)z{hjaQmqWNShcwWBeS@nAuT^>AGi`8za1_aPv9YB|lOkZ4 zR|feLfs>`NS3h4i0s1j0=lq{tV>i+#ys@fm?ca)ut)Qd zzXWGL#v4+O7wBxwkvULk?(Aj^)KHoGhIA58--R^eh%q~A{l+qm(&NQpyT-g0Z5It9MhP_h2hk@`WcR~iP3 zyc%P8#X;^Jt>D_F>#Ey>6PMcG5@FkP-_eBop*12un-2;ex^(hzJ4L8}T%w$irbll` zKxacJT+I3nBwhPXmencOi(A91NGEUS?B+uOC-1nkw!}fRg2s*;Du=$onuUzBuydI3?iR{E-Q@%fPtm*So2Q0}XvDY2aVnRv9hZqmE5_ zNLDRhDPQQfrP~4ZAs8dOIk8A8b-H8|HWvh)>{U_sBk~~}G#07p z^nBflAN0WzWzbW3ZBvD~mAG+={B7|xL!h3%FZ#ounOg2b|48JNG)cHR#nR->!e{iY z3=;bst$Qh}GJ}?0IQrElo9feV)FR_Fcns0Cnp4>RJwG1!x7Jp47)R{|BSQaZg&ax5 z#3jija0nwIyme4v4U=^D-Lf{jUn8nIbYyCTL{NNb7XR`D+&?rlRJ_D-dU~76;EzE zyncZX$i~t!g|%e6eBOI>M?YUm5GZLU@8aSEg1Kv)PrBA+)+Hf#UFZ?(YlCZ_?v{Pj z+Q><8GB%c}%Kk2w7Og&JMwcA%D6gSNyH?&u6>S(T$rB1H?tCFvBw zogL?a2sHdYm8WAo$^XpL5}BqI(zOrxe9-R#Uv z%N!ciX7uzR*Jf0Nx2RYqSIi%l>-qJcsKsc65#Lxn<)@Qln1n7|kF|t@|2?L3P&k8G zZne&o-S@}j&}!_mB+C1te-PPFmv0^TuIB09Vpk(JpWFvj$K`9o0_pyq7TS{lU0E? z0)&sH9E!?vxJNd5{XLjVI*ek8hnVX~NUnW6@YXvVBrv&}IFGI3H)ohLVn$wX8})@o z9c2i^bin@$R$tiji=G+5tZxh#HP$DiCim-jT*9%lwDBGX^0$mVw5^bw6$&>v87rc2uf^xp}j+xOn}qU)Yuv>Nt@(J`Ips zBN>&KhyFZ7)$2Nj(<|?ESkITdNGlNrxb-jxC{r475*+d~B&ym@OF(r9G>!z!72r(t z!|miSQMvj!O+fS5j*;xwX;u~#>9`5LJg6l|jh<9GVm9VAyD#JCE$1X4S0+dc@ceKf z|Dr4OUJkFs{*{QC{AYi{B!g@h+>TR5Yc2@6@cA0YA@mxm--PodGG;`V{5wO>-x+HD z|EO_N81kw3V!LSNQAYy9gz<2<_DM!+Rl|?B8sf<5Ka{_m&2$)r}R_0X_^n< z*Adp$L&*LsqXFjdBFU#MzwuA(`!5r6{X5H}bELGq3sF#~>K(A{#u5Mch;x7oiQ}|@ zWVyVWE|PBSj`BH50n4PEeSOx#kxqD9i(xtvW^}$y*oQNAWWRdQNzH%k*t8ROtFhAr zo;1CUomiuE@@XDvRKhM7p$>5LqzD)zLZG?m2W-N^3rZkyU?JeaY#r}cBDXC8;L1&@ zY@0lgEgPqdp%`{#$R+DIME_`Sjxw{J4K~~A;6-ZsQ-rpgt;}|`6mn@`HcrCqq5x3O zrZcJ;VYd69N@uLOmsqPu_P=p?SLk{nxW^ce=*mnJoKaeiLIW}Ghg1&I19;AgvZXS) zj4v5j7UO=JhwxZNBeEny8PiMOrhkvICWSU;_MwPO<8hw1!#}B3br*o&!Eoh?j}`6fo;Iu%bC=;h2ErJ z=qVGe&)5R-`!9DY@gwerULNO>QW1}(m5eb8Ant1A%wx>|UtwIR{4zGN4ySZPtlU;~G$m_MbKpC4YAP z`43%{b~6|*#?|lr8o_hkmzc<&2cg@_(|Bz{(`**1*DHv>%~!G9_x3D=QQSPRrL9e- z#oam~a#uXp2F~l`4E;Gc^Xwf4DsRlTp5#M)H1Sgdf7=)qq`@Tq4`v%4znx~DR6``; zh;f;F2r8v=aEh_v%N{ePksP3Teuvi!4qY}WtYXmjJLKcWCt$=bn&-A*HF>@Bp!zzC;PXr)z*XoU%6q1 zGT`;Q+&aNtF%$aT^5kUYMvxdA|&7ac)U*i|TG2CL$8eTAq;cI0J{pUmN%2!m% zhku7>3yKGdrpnmg+ZukG9}YBm==E=;W#tD>>{FrBwFmrXkAr`*lq}Y$J5uJZ2}t=e z{Qg-M_U*Rcnz|zDRN4H$8@VsKG8BZ+^_ek6T2K%JrDAl38a1N9aEC!&*tQ>*%?o+{ zVXfjo(gU4;nR(894r0$F%^ZV5+hE?59H=Ju)^qeIWh*gMg6ast)ot8U^-xEh?+q0j z0Vaa-6B^->QQdk}{ztBSFZ%$yu*;v^n0yGcQ$6{3|56l8TsIrBbBL{$!Q_&;Ux-Sf zFGUw0k|JEl7Q)7Da%8QL)1T+3-JEr$U>bpWw`$bMHRJhn!KnK^O>=OZ@%vdzU>2V~ z=@&Q*qSY#K-0rBgl%_a`%FrB- zg%d_=&RzMmN9h=Yq3twvGYD#9d5yBtx3_4Ow@G@pu!DKAM5?6Bnwn_$FmmTV)?7N3t?pUlT`#_K4CiG zqLl`=_AdL{Wc5DR0tw10p!|8Rz5hvND? z0vVsW#45KmLoc+*{y#({If}c*8(3b}V--wwgz|2iS_FGiG`{=3i|yZlZL`^aFQRas zzMxk)UmE&5qbSZZ?70g}o#!TzDxMgTChzADiVM|>T1Nj>gbY!bStIXZXwRwrMC;n)SzjMduOWD6>Xy707Y`%Vk`pW z3$x)8b=4z#(6{^rWnvsAh$T|tIr?AK(ung<;(x`)WcBoxQ3~WPYr73Q3K&wVI_;lm zN`8gg?31zDe!MDLc+umx#o5|%lD?Nw-@sQNI51mDx4`HQ%yhZn4=;pNZy!2jOj~g4 zBE0lMRxx&SbS_h@j}#phtq|d6oYPw(#G6xo!+q>Pc0;cte^>N2u6&QbQ{q)mQ&JuT z3^NE4)9xrn!S_O~#UVc&q+0(P%UF;(^lJvctACf?eOpm}=rD+QF*^!q<%9Sbj?tf; z=fa^^ZVmpbJeJ@hl8J#vh9#-SgmZpO%T{wM2kX}A5C;WKfQ{GMfc zBo#xDI!XFKdSEn}*GW92cHcX!SM3#|TC=Sr5>9=}y`UB7)?Ju4kXzEwGQvWP2C^HY zN8k0~7#t^cssteRx#^ErLkv2a7DV1Pz^oif%^nFrAo8%SKy7Xw=yNrYpJ=2`F;6wU z`dW$ykE&MY!*K*;AM!gh512wHG$*KfldEpa(`dRkmeopw^^z!cs6;)5t z3&FYg=ToH`pf9M7Bi=J3D zL$;?9=>yc}>>)~|KHJ6SJrO>j^1Ev4_oer)bzT>=RaM08GF>Mp_xmIvAdvf$JSub$ zo2ikhhJY=M4c|SSFRbHk$vwQoki`A8gD1-Bw4-UdCh`o8?_iyeJ~W$#0GC1x&IU=;RQP*Pn@Bx+_pb>CRL{uEhR{{5kD@=V>N&ze zWp&rRueFScW_)APP=Eo2hRvWv9G7@6PARL96f)cz-v=nykKsOV^4p?4_ZhB>R4&W@ zoH;I3N8Q^waeD=vCqgku-4)N$m!G}vyY@#J4%N0ekEOkn(5PN$2EsZJ5k4^-lhwoI zD&G1f*Idt>vSD2txYA(z&F{Y5KxQb)DlBU`<*Et9rNH^;;|pKj(Er$*x4ClFb^?HMGH1%5e;K+T zuzCQ2>8KYl$9SMHsBF@yK@=zHyx{*UE-1nwOV^m;a6|$~_e{Q_AtluSool)ZGMX_H z3Dsx{%eBFl+KfPK_!hHY*QoEz^-318xF;jv5^h(NMh!uvehA#4LkJo;jueXuITD87 zQIx7byuzS94o&;U<_yTzD8*j=aGg8dm!<+z`VUnMNR0qPTOaYprV~of+l%pOg{8j* z^gzABUrPCDABSw^(C-U#DQ^cg`$)I>Xu=UEzMJ+C-4i&9K55`5e7CLlprAzZnGWq@ z6AQIU0d28WwAINL``xgC;V&`P^@+v*+Ep7zvHd@x?xKvN_1L<6Hk%GseLc}13m+ZZ z0DwL=Q(bZ*@57{*@Y>L^0(ixs5fESA`SHaUC{UB?G$~0X#2%pDNqnfv6n^!!07+_p ztsZe2mLrx2Nnjeh6%vFhz*|ebtpttY@S6-=2$BKQ)RY?kmgEJ)fh#Q!Yu% z{O#ijf@{l_{~MkGa|0BUO_Uq?S19Df@kpsh%IO%NDwa>BDPL#2L+CwZ8yOR^YL9yZ z4f+>2(i-Qvq0@vcUdVvWwwz`L%;l~@EkTFiN|7I%h)k$ob@%&;v%4?3`DlIiQ~|F@ zb+uDLF>%q@!$dG6UD*#|c;=wd;13T|I;~8k7{UspV`fkswBF&}>Y5+0!XOmnNc`6{ z<#l$~TjY(MCeG=>vN;W2v0%>yU4C*c@0ZxI@i`6I-+x=yt4(JDKrF~q*}N(C`Y}ZT zFZXcumee{MNVhbUgbWcpL3_HtJs5~uueYtIF8I3@MplcvFv`&|$y5&OH$G|NmRsyu z*95jZo22fd8JwhbjCdkhmR2u3+7UGL#RX$cF?-zH;m6WK-6nIfN|ud=(!N1j^~R## zYU^q*f?}?T8I0y{;2)tUK}_a>!()1Zf9T}R?mXpocr95=B<^L<&QE{MSYh67y5!b) zeA4^c=bS3vqPWQ&`cdb&XhbDw0Z%s(HfLLoV2E&RN4@S!=hkCmXIxfZ`U;ag6@vS8 zt&<2dM!WyV0(^;N{YN@=O*s6f=cT!OX?{@MW7IR-Wn?#mrAbAmr}Dl%Vm*@Qv7{;GolpTeALdI~+t>PA%kkGPO{+2MYO)qPPX0smw$+Vufo!QE=2 z!QR^x(ejwa8s&4zYYf;t5zObZM7;Outa|@Df6R`SLvC*Wb2+HiSjm`OkUNj_xUJb1nO}3E;g&Qr!fM}bH=Qm@u%LvukNyD!g|@(8%3b`-y)%fqw_mGKqj{5P ztC-11#hWwt-h*ohGMkNAa-^L_aW&$zfB=;K{wxrE@$xnBJMAv;%c7gQ5X;IFu1!75+p!^ySoqWPJ+9; zYp@`}-QC^YCAdRympgfW|9ii`?^<`=PxI+aSM9EG+w`70u; z83KC0lnY3V)FY&>C;`7)X}V{cU0oPL@MTb?UY<5Xe?I~V>CBSKkz$&}Cx;8?wp)qD zH#Mr4qjVsx3vqaG2{@GPfO#sU97&&cAblo@gZWCxkxkf|Fq*3?}MNQiJ4ktkx~g3_Y%i`i9T1= zRUWe>U>mmw&v3V!=>=o}Nb^tO9M7Pv8q>}by!~^uFwO%Ujz7Ud1rxVu#pi3~nn1od zds>wH@ zYDzXNuhuZp*^jQ5UPBUp)9oUKhfG67XuGH(wZ^@=ie5tbKUCSS=ReT+VJewm6lh14 z*I_XxQq;II4!<}UhLh)#A|N~hv5J2xaU7ATv+{ZstOoxXata%hX~_&-s20X+;$KAe zs-Fy7sPqwAg#|-Af0LqF17m)$j1E_uHnC>etE^41a!K6n%dH5Poe&RjxhTx4Y+3Z; z@$e-<-59DgDAq^$gRoxQ?W}yYIuI*V+YTYT|0yu^STj4ntA!8^qwJ4Whs@OSio!@_CjBJG?y%0UyNfMYH`x1RRV2)<)!KZvbMR(;{&$`Z zO1?eQ%p&O@7G-e&8opuA6^h4h+YSk9W%bFO-*|M&Zw$bPpdl{j4P{G5%~!+`7CWlq z)6~&l8|*3x1D3!P^n!67nJK8OaoQmt?uI5Eh#UCpog#%MFpPoivOQI0rWee!;_d#~ zS0tC{&FnB!!fH`rCfP{t`OwYP{c+Q=K`^hW2=n7~o9MnSNx6%*`9@olJDPoC{G@wl zmnqOqP>aYoyiY$rt3{RAFHRu)um^I`hOowo?M+;y8MHZMz1h39BG5}Sp$|z z=~a0dwfH~OM(Evzz9+IBZ}R;ZPRjH>pkq>7-0vs!!X!VyP3~P&j=h5Q2hO@ z0QyY65z2YkGGG|qK0E@C`I|G73t<{BmA>w_JPs=vu!~s*MQ`0=L}&gzL}=iw{~+3> z)oQtz@@UTe02mP3ogADkuJ+uB5#PBE`L7BdN$5hpkHJLXdSNQA{M9xg1`xt8T*tp$A$O^3xPK;S9oTAKq zF5EfX|1*39sZUB+3RdI|u`@9qurCQdM&5BWS;$_G>duDFfRDU*^%R?<4w*y5`?rbl zo(j0w#MP?y%1|WsclpM=qa&0a#A!6K@d!0UAr9&<<19u#W2DDR%c+FpDXVj7^@yf& zkEaA*9*_j6H`{{+FC&QnImrjZ33oe3P2KINFmpJ}AQh#}E#5@!xAoYO$Xs*kQ6yc= z;b?NVJ1QXFysmq^w1hZ-SkPR2LXYI6JgEJ#5d)(MWAol0Nd|Fb6zNi*Mv)_bxrvrt zPDVAV$^z;F`FdySX+NVj*=>ig$&0&q8lPEZfR7b{Es3h}{u(OzWzc2()0ea*ruvY?bZK+>-z^@fbDI6(bDRY#IZRfiwN-QVFz zIlam6k$s4yTH;=ozYUDHYbnaNq zvJqc1l2(rLx(ufdjid&?(mb>81&bU4b5h01$ZTK*i#~v|)Vp7`ce4liDXU8wo=m~X zrv+L@;VU<~cOOPkG`bE-wP(akk{c27dMnlhZ%&qUmP=azS9kaL@rfR(+CRz0B>w%d z?lqJ#Lc#42)tfYbMHn%=0{cY9N70cN^!`ZxED5vF$@W_ka~%IK5rsW;uk>lA8=TMX zmcj-uAdCw7ox0cO)OKk*9ml|G?gEC|`skZ%|NIbga=>h8apC_HaU^tB-yEThw&+_X z-dqd63jB8C=up9J2aBx^XaK3x11VE+DLG(HSmO zC&|T5B#={)prY$9O|Ml>HYk0v7$FZ}{sc6<02xUW$R_pU2Br84-NLGNKuqNKcl=i5 zBwgVK`oR|)Bg#Jl5ms3>cH>|7O)$O=%PjN9sL#mB1w-(<&&rf~If6mV$WN(~w-NsF zUmNlC^6yuU@nKeGiU~t&84(JbON!%)aercy!96bl-lX=9{S23Ch2v@~4Ts z>LdfnLHu?^%f*+zoJAP-tEYuT5X;=;ZUA|IxvIP2Sdz2Y9?6aqGm~U@Fm*_fkC$Y` zN3H+K@@Z8(q1%pGA(X3Gi?MQ`HV@Tq3V3JltIfCVh>aD_JM&{?6xgEOH#|eKNTW-% z75KZY4_1-{NcPL5%}&p+L|&Gg`SRDPpk4b4`>N{RItUT1PAosEEnY~LhBSWh($7TdUTAM4$_+)CM-UYGQ3td=!;q+_)G(X8X$6-sZ{UVYpO z5J{;m+nNqHuqyI0+RbzbuSOe4xL_mZyP6AT3Maoc(Xpk;O|O3X0}ywE%}|z^3LyW^ zI!@^@aE%AYS=9sXXse2TmAhZ^)`Wd)eSb&Os5+cO2*e*F#k|x%u(*z5AM25ghy?Uy z2Iv$9XpVgO1o#OqQv}U(p=}26&{}8oggM11uiqAQvoXsv)qtF7nZB((hV*gdzqT_G z)TP(f?-v|+O}lXk*BO>s-eRVvKdIn(AJ7Zw{dFxFkgXI$L6zC3{wP$hyJJO?rg<_v z6U1Ll&;*jklhdB74xp~LBKS1Q*yQMqSuL> zXFWoYNx<$cJb3wV!Zm+-hAK@ejMw>$W{l|N!M|IQ48W4N*a{!KzbN+kHKzVaumK6L z5p=({@1QKyEH+0YZO-S*is+^Zr?H8kdqyxlnf&3=42sp=*26*!<;O5EG8Oiz8$N2T z^j2M+Id4O^k)w+dlZyF6mXM0nAe-|4KC}sf6mvALp@swy&%daiqFD35~i6 zX@4j&6PMPba@L=5kNf&ErjgL$|AlM6gd# zf{oB}M-aqN3}jKE!(bIa{-mvy_MdL_83lsC9V>;J`8qF&I6l>i5!gOm(XMKYGdJX; z<;-I(qW{hswiFiuj@<=4$u^SU7 zQnN9BALtHk-NS|EUSmMV2s~fSnqTm)=zet=J1*Fm52=O}G~TCHbYU4|1g4*&38E?c`$S?})dJnH14Mk|!$_|?(46%$%`=$G z;&FhI6h>g9I~Ak>o#?L8Q~*)2H54cOHPpC5#;uQs$2oOFt`)>|e^m#asl=j6j_3?m z8}m`iX9nPw$jIqCUbmQ@E;+#%e~u#bzi^S%P85j)xVHh^!(E5=6CqU=-&V5a`qBK5 z0*r+nPNGKsjjbbIPbm_{{@vd;i1l~6Mex6gc-!>Lf zJI@^XRMK^Qw=gHuR#L##Y|DG@HX$)I6Mo@q^iRNB?K0C5&klI`MP&#MU2UttwL)Uw z_a}vxkLbI=_VvdeU&NX;ZL1QT$=j2*_N4KOQ1OZ1A-a<>-l%2d&tjxwSx|^I-ydY> z%i0*P9w89{9SX6CL)=TRSq!#6h1Zz*sfZ@*L(E|kd}C7}D50>$K%?elNXYkdE(oIV z(p!=(@0>rLf%pL&bBjE2uKvrxp-gvQe0F2ZJ?`K~Eg#peYp0%1CHnh+f+f4(wYrn? z*EgY*>7R2`ca@bhhU1t&^{o7ASfA#6Rs&> zs2zUmeh^^3{2PaZ{TH+**+{_j15++%^X^ZO`xo6{@L9@gyG&yKrq}c*Pv#fOgTc3e zXfN}0WCLrpr!UYSgVhFY_x77i9aCl^qn`C~YEx^$NIafB#W)nez^r6ue|RATq7vVM zZ$Ca#EFIKA*L;4k39|7go+)Q%EnKV}@A&Q|>h3GX{4@D#j*~ImFS-|iUs^wQ{0Z4i z|HkEQEhR7~GWgFKsvyRF$e33^`%N%JVnw&8unCMV;LqSGjfG$R37yiaH)Q^FMaK6z z#Z#>x^}Fk&rs4%h%Giy&g=6kE&-OJ0fQrkylbwY(#5IeN?t~rYtA#bv;6b zz1PX6tkhJ%(41Fj$Q)ktfD-VJB#O3SjD<3#K=TTuO@DqP{!EMynb`!bl+EG&3RsB1 z+cRaJTw6Bw7ZCo`^8v|WkQ>2+uAsPTbY`{7XlHGbFdO;e!2Z`64^6I&U>5IS2)A2m zLOaI7xDt<5+4Hk<;S)x7M}?&Rh&Z$TC7)KLVs_e}A8&5idv)T{K3g#_cE8Us#s#Xf zj56cYT~cIZH_ZYj^<!meNVs=s!?7~)Fboy;Z0DdqZ;LO7u_k; zoH&KTQKl4=i296cUX#z(DQ{aRAa}99f`mbvvogTLCqMoz^$&@%-lrS$pqt&d)=2ih z5Ji-Q*ktdFk68`s>V6Y9uiSMVMm|YpbsuI_Z@qZ_Gppi7s%qa`Xv4IL(fM@!Ux#GJ zZdSftUqmN5Lb1^4auH0B%x>DP9VIc`DSF)bGw2-+!IzRLz zO>lCz$=UB5IjFAuvPtlTGDAL;acOA4&QKo)HQrH%L@`i(OVeUpvNQv}IzEa(V&5L> z1w!C3rZ;Q;AL#4w@0^D1!kVh zIxaTvs3PAwVVjMYO6v0!1thNKywcFeW6WZ%ujooU`P@vNhDSIGYg51NwlHtyvP$`f z2KYX2ADNKo-q+$`GY)*!GXo3@6aAtuB8}OSC*dA17yly9d!(~&6w2B`a4V=$$N8%u>@ z&oZN6y+lb&1wLCoNoe{1C~6Wg-P!*Wgjiw`e)zkesH1w0E}Kn%EjRe_DBXb6Ri*o@ zw7ETL%v}>j!F?B3V7UsBEN3$8Q0y(D9;sWrK=q$?_&5CQuR^v~Ix$M>)Blm!0&ukc zZ;8#U2k|;Sma=V$6kQODwoq+o*ZVi85XjBPuTNEeO=f`IRJU?;ELp-{JPL`^NG!b` z|A~3X5K^{CNi0CmpKt#*W1YY?{`E$iO-Qr+(#Nu|fERx=VF~26<78V6SBOL?&F~BWT?+`NV7O+IZ!sQYl%ia5lLl~ko#bTjk`z*o2;CCcIMDkf)RY(EOzJ;c$e&!c8u*^9_9P$_9z0IGU5y-w(ka_G!5?A27^>lOM_Jgbf;kx$*nyAq7 zQ`98ZM6=4nN z5g3+fAYGqLvoX*dhq|IXAd!p%G|$x$Qk$vg6Ln$gq!=piLR_k(*>ofTwye8X9RDc* zYEqOnCGDAb`H+?1bmVY5jO58k3`Jx2~H>rcNHxAuTtt0?dIrVR-nG zB^k0$6{9-te%o6OgnpR{V^?Xj5L6bX7vv~eXfxg~&}I{0Q37oxOmpp_;Du$8>=$I> zb{J3n%D1})?`?}>;q{x0N^j#Qs@x+fH?}0ia3tKeCGF1s9arA&HwJ#*sz1GrSz^0C z-P@C5u3mKDF@k3Q8P9!N@H~6&c2Nz@$mH=uOAu;kq(-NmUC}YjulH!`~415_5*8e8X}%U8hZO7 z5l`V`NK-k4Rg>|lhI!CLdoW}!343DLTBTExJf8n_w`}2cOnxHy{QXi{J(Z)9fKNHm z=@>H(Pf@Q7zj&aR6Y(&gap9v05Y4JmzhbsuT%+i9#01w{RqPS_bHfG`*c zv|y=|KqQPZ-#Ea1C?O-<0Ak+`AS`68E;l?wv<1ffcm?Hw*7J~9M-6A_>SfGRv8J(p zIt5iwR0ugN51vPcI1Hmv!ioayH&Z~9ITm}*)!>Um1~j#6Ec#3Rtc=bM19oE53c?Ikoj8_1Ok^Rf14LvceI zGL5JRCcRDzIf7ylqa@oNgU~jrvbr~T9~1HO{!6ChDD`>AeikSisJi4!4zL*2ikNZe zNsm+r{CDMFjbHLX84a5D2VNWmo+S<%Kn~wl(ar{Yb70Lu+1HYA3l~05A)dLT^>YP~ zfVbj>PX!+BXKR%R`L`0@m{4I_HU4?HFyNeR(F}?CSZR)?VN)|S%(0WbTYve|B*-bq z(4*lP_Nq^rm&&Z4@6G}ARo~MvHcH9OC^JhEJ0qlH9q9TSEhabjqG^QCQ3krGPZ?2B zmHbx&U|OikkjA!N-Q+P#t6H(+5{v8l*vW-2t`H+N~f zeEu36fnlK6hkW9gadXxWDIM{d$o5T5E-DC5Ocmj;EY$ng%c6kaCKnu!oKC)-Punqw zm9hLEMYqB8`f#w42n1vFKdXNeU~iQ`3KM(qLoHiChK_o>c$p1Yx_JeBo{pgC4_&<6 zNAEHSL!>asr6MDz8zIB-?H-RWe5C7rpEgSd!irjm{}GsuCp6`3T<$Ui&MxiERC4KS zNwdhH{uZhjwNEIFpCHS0^?aF3Z_{TSM3^`U+!G=724rEo(e^ z##NTtaI{J-1$K~S5*em}Y(0e543D3*cqtoKTutw6Q|%QYk}~Ryi*os_v!hGzTWEj6 z!5}IwTF>_$7jbF&Jty}kSFa6T2S*?-`o^LvvA~{)X^(@`X8Y8Ea0QU;7N*8Z^7#oAv8xuCF3+Erk>eN~UC>p^=6}bXNaZ8y z>XK+JoZ3L}a}=&4;r)mJd3_4)jFgYqL)S0=B-GXHl65-5 z<*Uq}T8=X_33+6}kbOYq&m1FOtE;KxdEM$j6vO?BHQ(K~-<3&&rD|-%#Lkx67zQ9I zoc(yaqTZuY!4OVK9Jigm-ej&3G-D*{pyVp9Vw&{nf?3UmXM5@ShJ~_p^=?o|W%~~d z@#@sx;*)#E)rsfag8iD_Xhv~OcS&gd&jr>6HI1kH>DTR!DCWQmL_-))1VqG9l^#&Q zqBu1KwL0~AS&=U}ypMl6;Dg?EzL-k@VcVkEU#6no=G@6pWn{_Z8vl&iqGGzV1~7J4 zyRhAK{dDuo$+%e2*2gM=lo>1oE7vuQ1XZR_I-5;+#ks{(1qdYgy))6f+#`xytEl*%r z=xVt!Go#lKeUzv*F;b7dTjqP?;I}3VkGME4j1mnfEx5*^{GjCg3k-wr_;NDhRwEO( zI@kgA{}`0wlmr-6uoJ>c=}8B&-q#Y)0pl!ibp=8j zPw5ke^fKX5po8E~g!iKJ!^SIW;CNB1^NTNp`lu(7+g#)KR3b`dS*vKV zl%uX>zw{f8jKv7JMlX>32gyr`IZ++8W--@g{5F3s#HB37Wv&q(9e(YP>x}mZ=to)? za$_K(WUU)BHpC_T+P+xGy_!jmpPZ|BW8i zk)ur>5^g$RVT9U1JyrlUpwS<1n^4;T0HvTDBHm-p6Aws)_1FwtDuvtxL3MM4cZc@+ z7nY5FzqJ}|$P(Ut3Z`d~OEC8h2NSGU8ay}&dE zQea^cgs#`vkrY6)7~f&QHYM2zK>EL(fiKn~aYVh0|3c;*k`a)PLp7gFZ3^BsrjEA}KLKkTlsCrsT?V4$qWfUJ0i0Hd* zM!+)|zt0cp2Fsr)>xTx5tSS~^c1<*O2lZa!n$qDnXnLi+B_>9(Ezoe{@&!-kr8HIq zyuIZ6`sbhdJf)^4b6cd|^EWDH_CTflt%0!r*?@#1Gf~~FSiw5i+*;9Na$|dvf|Mbh z7pK4!(t$Uq1(hj72LczI*3>;oNHZA{4=68_FA6zG5K~lG-PU)Pcy#;4UCI~Dpl*S? z@D=bY3h@F*)9r?Ozu}&WYCQxn4m;DVf+M;O?4Ni_`)#oQ3~+Jq8gqz^it@4E;7J&2 zbt}kmGjaCq2sb2Ct(JaDv+0!E0M{-l?CbCWb`cYNb14UwPIKgcAq8ud0!fO`InyeI z%yyY8SWwz_(-%H^$Nor5Io-?zLV|^8>UCj0NBY4SsdcjeB@t|Mjoz0jpQu9?Y`WiV zOwOySBPHRh{XN~V*6_=g?W-j&kTjE#-xERGc%jTga+@BDc&4*eUd-tsS;w&dhoU0i z1hBo$@4jJl;ky_kLqi{HMQd{h|K&bGlqNEww$iG`QpwTjE?EDcamUo1^!?7&koKEz82nH`}DKbwZr+6C3Ed)?h$YazM#GcNT!}V z-2@;_Tla`S=Efq?eq(Cg{RX#K{ol@0drl3$QbU7fOK-y|`L#6EKU)9(P&GPlT3+{%^a!8Ak7XcS;&j zV5XlTw%Kazog^CRuWju|P{+V>)@X97KRMa)Pp^khlY`E*9DjD|kl}VWCg_+oW54tP z_sKWy)!naQ>Ip{(=}KUjBGBMu!|?hYlMnqQt8u}%G7sSrE!)<)eed)Bq|2HUq(R&x z;AWs4Dz2ISZXzON$g@$khf3|t!z$r%V7eZhJRP5wu$U-y%qqXvd?sp4759wweugnY zIMxIDvSqQK4pFgvwy!tnH-4SU1}}3(*$L5fFAx3nD|Gdd1|sD$Mw3;LpeDX)N|?Yx z%pU0J(1u{qe=Ya4GH=G61ZC&kns1r%u(9+pM}OynWBs#ZJCtu>G}zyWUoPRHllPs-y;qku);i~) zb2M*S9~IXfH4Mf&4j}03rV2NsN$&QDw3kano`o;BzvN>bq^L zk_@nBEQnH*o>l$d?tdP6@yJC1Y<4YZ!&;Iu)#fa61pPIvZ;&$E;_2w3#*?LM-p=-uEnOv2xyVFCY%2pob4Op;hvMVO(GBclmg6Vyw&eV%B?QD9>$3OzxYFimvil zg|ZGm>mJxjsVh@PH++n-U&{8rHkJD}swW~LtAFvl9q$w9W3@QfRM;g&uqaeQ&{^V{+-WIw11l5Bw@pvsb#t+N3dB@w9YWsnRS zi5gd-O|_F;REO7$PA7fYL#zw4B9*ZJVv-+JdNKTeDJB;FoQ^%0BL24=}>fCzg6KAS7^%&Zj<-$&(-0g$+4>wd>BsWSD6iSPUY*o^z0Vk-H?4L@6Y zT%zZFq2YVaO1IJ>sjAJ69q!IOd)kzw>ss6nQ-ovf&zLjVqga=FinW}ZM;*FNOp5Z~ zx!0T*^T(IWlr#E-$7J{;1Cb6A5mi*R9xcb#ivQNZYkFBp&H% zK=Z%+IHB&d=cV}+O?y)e6*s-n16$%56=`v#b zogWNq7q!^Q-5?@&s6NI^y)T;BiFDp4g6#K3|0+Q@$m28u#p$XV`U;;20}*kz2!-Ph zk^j1XR3SUxZYTCHe4!&rS%f=D>8cnbn_)p8B3sN287Z=7&*;43@MZcQPBsgakwrE> zS|#l!6-wPHw|_3h;}oDe%3*-Z9)V|#S0ZnJY=};Uu!$V~%EYF#A#jT>_oWA1 z^w!QybFVYpX5(W6Y8zV5gBA4Hssq6vLaDiTqr)61tnuw>a0rCr+L5nlM=ny?YZ+)+ zgUBH7a(;+I+LlwjyMagkAbcl0rjf`-Ppymjgd5E0P=U^C0E7cCXQ6rQCyz7PsBBx# z1X*lWK`7U6d~z(YqW|jKkr>FHi4gODX_Gqp_9;8ksycu-;$z}#3V=&|;ZCag2?aLhPXo!v9CvL#REd{sQ~;$$CIAOD6{La)$NP(wQeIR+5!qes4)g=X0#aiMVlmvG+=yPoCAp=yCoY7qwM+@{Il{ zCq&G!Ja&>m?dk_BdEK`>SxhDvk5U>=^P}W*z@i(h=LlA@(w&IRm@zDoMy9|av_CL? zwqX`tdlyU{>F9%&Ft@?R zp4Y?v|Mj6;0Z$DAA~lSlB5P1L9(P;I!!S*pByw^ex-ljOrqLdHfZz`7FgYC}d<0$C zdd{$SU_e+{4xNU-6Zj_}FJ)hCGv&e7(*0%b;-|OXOA2Q)b2PeDrvTs0=Iw2beP`CO zO(P1jHe$LzsL^+o!q;e~yL-zQe7Uz}r9X}j2doC1fx{oIygOiIgFATqo3R^sgG83xeTzEz$XbdsXY#jN~7rjL27yexyG0Wz1&D0Zv4;6bbaj0)dWo4#|+W9qkZE~yz8Vs-h)r0Hm@ zVnfs3v@455p5l%$*qXMzc7m}|Gy}?%4Wtfhwpp13R@TRlBkG01)QnNcY#9t0#I|sA zamVw!ux|^IO^B`Qj=@3CC62ifT{sO=d7lXbvd%JPOJJ-|3Qlm;K@3nDI)~U&LvTrF&8A9M;5W1ELnM-ynp9kIn&k24E*+(|LbTZ1xwII z=T^axE(^KrY6^(5ztk23R;7wKq;C#ZYaKZkF%8$lYLBck*_`!57>w9k4>@`)!9nR( zZH6@nAsRtX#u{+*M5Kc}4A&zL3{)fnaV%a?kkhRnpj10qNeNYZ!JoXiMHDsZN(OYt zCPxOkN;eD6jD4&Ah8b?KAq>D~@6KzxZKWXe&?EW_2X7X5sOHsBnL(9{{_B7}KBNN) z(vB3qn42F9GMQ5|mlkJ;7`nLrbgq#GQgH-lW8AqQP`Sh3?*9XT3v z(3Md$7-$_y?c{tIf^Up~*DsK3l=Jf9TIT9)2$s5Ku$gK62@*|JC;81G|8h2%&}+f5*R{9BtUj=XMH8C5df zh zx_I7&XL?I-Nkk+F7l^;G`Td(?qJT!O*7j|J9`gVw2sb;BKNXW?^Yg>;J@_;S9SyMTCOo%di?H_D!Zi{aoUvkzSn|C>y zc0(kD!=o<09Rijfd|iZz(K{fzA)Xz&a$Ft%GB{Ww5RrFoa%y1Ail{<8X5LuHO0{Q* z^1o>);76qwtF|2FTasVftL)ZT@w54XL}YuUG<NDtH$H zW*{;W*Cv9h)@^r|g*((ntB-?Yl<4|NR+{Xc1EFFf4=_(>7UnpwiDDvpFnLVX&c7Nn zpWU-;qWz?ju0{2D8j!&j2COit_d)4Y=e89nuN9sj=O3Gf+1wPIe*s&K4c{1>pL>A1 zVvpEK_?fh$`G*cCTt(k{?&f0XgRO^@U)~0iZ-1;dwkAsjBn3wH>G6$oXKtwAQS3a5 z=Yep6$9>jq0>hjBlUFB#eT4W?a4ozY?>0<=h_%JAz?=*P_F2o5f;&`4+%%K>2bCuI z4XjRDVFDIq-%;>^S*&E}`*P@n#X&1!LS75D6!1Lz?#WESZCwgTfBbbw7e4zw_s(a0 z^mvQ@!Qfj#6|XVx(LNUUTS2*Yk;@8GMF?!;@QsRt3Uo7MZQ+woY2I{Hkx6qNpw^@1 zRitQX1tlgg5ConQ$Tc7`a(WhMUdS@JlZE2NLr7tW66!koTW!5etEg>x+2v(yGr$2y z_u_7B$aFMIo>#M$GzyYUygI&nt7_JQx*-`B-9W%f zd54uj;HChk4Y%Ds9q&h|nOy`8E>)!Et2MS&-=-=X%& z)^)|%Nw9TmYACLR4!3N!D|db2(u&sB)OHa;mF{;hA~)WN)Gfq(0G(SMj)v`$*|dg! zx%^lMtM)DAX(3bCZ@^dS#Erd+e25TR6A#BVXlsibMc7A#N!&un@>dqXwaBEOuQjeF z^m6_-W~ICAPRlO2U&g_H-eNIJ4T;mS#V5SQuSjzj8N#Tn1 zEvgh*CW15dP7nZ7tKqdL%=7PQ1@qN{r7%-=^K+)~o#e(;-Tg3v6Z_9V3F%KYH2xb~ z|Hp4A8v)qK?yauhsa%fFZ6EWUOfdw`en$-|=)KRfz_p9P_ZX*Pl@DwOu5a_ez1gs6 zVZ(AlzC^wVRgb$V1n;E|INDak9ICI-=rSUIwz~iqSdkFdVfz$#_M~Jik{Hqku%#0Q z9=QlZc{QWyeV7o7d%_5tOJmgdQexZaTWN4&QH{Zz4lG>HG%L3O)w%&+F+&}7VKHVG zepGR>w91rAwA9;@p>vAyw5rc86g{pD|8#q-fg{sUgQUwYkr&@^6{dMpfshh}ZQWyy zoUaCJ$e8BqjI(oefE3unaxs;7!`2|Un7vyBaDGx%dlR8B58cyxB6r|@e(Cz$xt-Bb zUDLU|$458&@|6Pbxa?1d7ORKCmtvOtvsa@8k&A{<%f_AD$ts7pXZ887PoY_SUF8I) zFT~iEnO)I-UD<2VYDyoU@awz`al)H=t0M z>EImqSBK=Z`zFi#>%57`ONoZ9nxijPVV;sVXn$(cjvzRK;K24q z;iAB;*vE*$74`bc{u1B%ibV+-^7Y-Dfa#lMWb{M?KB3Q`%52GANRK6&2r!yltwC zzUfGRfB%qN05o)93X}*C4i1hW1cZzX?o+`);o(`}d9bmvTF|rJ8W|Ym7#)*etc6zXfuZ0%3 ze>VErzl0Y*gB?%6nBs2i8eYXkT&fK5k>IQ95D!QD?8kVm{=)$ha0BfE_d(dPuC5P+ zJUOkK`h~>OBc_k9^ejO&?}F^RWh~gvePTaM16AS1vOJ@q7>yQYX~rV=sE_>Y%5t?p z6L>PBcPFU#?BL|9iz z+?Iga)u#7j7^&tJqURKxEyZjT=q5r8X!&SW7<$q@N<4y-QzN=@7>7(mW+e2cVCmKw zK>~mxJo5hW0CzyZow7$tPy}p%BLXg3|7a}B6*7TpkoF%`ia$TR4NAZYZMKZ_phNHK z6QpvIZdlDsw-toyPp&3NDQ{>0Ur^KEhhec_}pA zGF{MlyhR3eMahjdpE7i%=$(>Y?Ol*AK~#(`>9K_u@#vW{TM5aXXQrmI{~!w@h!O4( z3jEeaZv}Rjuw8v->~tSJv#^QH2G?VQ9*N!7U%i$KiI9&CLi2iU)iHCk!5?C&jN8aI zE@0X3hH@FapcJNp@S5_zEYHsvz^?j02Og|;KqLdlhv1S~nfvdZp)gkL_hB!M_jk6k zFj*9DYthPMMJY6!reTATtB+VZDu+WrfT1?XfR!zG9Q}$@8Y#N|q88cThJS_q);>X< zpiGGhnxd#5News-K`@*@*H=hEs5%MD(bZ@uBp4U4R|QRerGvp?SN(fvGc1B+*p9~n zC|br%P~WHX51AT;^_B0whi^z!TKu_S2fx$&kk@8%`Xtse58)ugmE!5bn_gTvzI00P zHjzWTBAMpMbrFwM$>y-?j^!UNj!Z3t~h8owvXS10Lf3;Pi%J-vTb?VI6AGEMPvp>CAXP*;4DRLa7Gbv`G0i4NwDe4amd_m z2qiWM6Mx%#5?J~7<1C1m%mdO7@^;%t=ZJit;0+SW9gj@ zs-5F5k5L0D#!}g^Z|S%cA6%RyWrJAIN1Xk)PFadM2o2jmzOdH+3E9uL@i>-gS_rC- zTV3+I{lhcMo5(C17`u?gvEoiux_G8Uv4KjZ(=6m^sd80jM+BIlUKC-u^B;@BefWjH zP3JUGz5x_4R59CRuoT*NSm9M;o5YwW5(lEShC`^k&t$UJDay5B_kerHP?cQfwW8Z> zR&iwuamEWLC89w?b0YDWZZH-4Vuv?~32yqk?~$Mb&GJ%Z3ju6c=o&HTFy{JIH;+t$ z%eS?D*_zRqI>JZvcWzm&viZ)x#oz%eWsC_RNf-@(TugjfpyBQj$sAHaApFU`uOnetFsDTrwP(0rq67`JyI;Mtc%n4-W+P5pIQr>-OFf4T8r3Hiqfa z@=?h7fb@*76vWTQq+IzwPwgZl4wR`n>OB_^Grn#+(sum*{Xq1c+-)^<@r8}CD6nWf z@F}VDB)0OB#;Uc zgNs7bcTOs{s6s^olRwJ-`%uaw>Yr{9BgMv0sv%>FxnUB_X;fo6oc3hndSqw z@WYr;2)p#uNbP(uwH_|WCpOT0V3L*KBRW41E~z`UX^N4|w8BJJp%I?>zxFJsvt$yZ z>*Z67F;iA5=0Eq|az1fd&|#*PLN>bt{iiGbXzQ8CAS}#aI{o#28BN(EvslWSq5kIH z@K?lwx%vO3xLZeFzW*2edy_@h6~;x^{Tw-78}H58E&bd2l%oIN-~%^*1ni&St!&2C zx-svK&pVBvmsjo8zr=o*n)5=dVbT{K2OZwp_WyA^{B@X4C{OE7*i+lEL%~&}QFMh_ z^UGE>neJm+*?is%5tF%9E8_L1r>KawIyWRsi5T7zyLMpbjTf_1E^{9$;{4_zbF5I* z#UuRk-dj6f02};IFKugdxFYiKMU-dw{73o9>5m>BmuiR!WnECQ%u2HKKIhCY{){S& zqAw;L)&Y9?2DjIo!u1~hi(?|h=4=-8b!~eoBxNz_vich~_lXC-6`E|3xjp}l;g_Tf zZ~kBU(U$-1(6L`hlix4!c>ld4VafWs?`a2L*gjpb>&E8K-JX0qugfjF+0|~f|IpXh z(ShHe$d|qQvngxM`|<#jCWrHn{zO_`KG?{+jZF zB8BFzcDuVFzySjLnMH@LI_}G_T*G|6{M*-n$-Hlu$88Ng`qy7!wl{sAo1k>*S?h*OiK8#KgV$^I^BeO z=2~emNpLtZZ2Mt;*WI_kM@i|!W$q8ad)n>yGOWMAO%f+So5w0cfKAqfqnS^t#gU!& z(1K>R#0!qi1}_#kN|ansps#elt;GUHh6YE5C%>oH@jh>GXig4TaL`cW!UGABi~=4m z6ALz0DVb&_-af}hw&M$ip!9h;nF|aI2NW1~{q^48R_ri90Zr3L&gbXLkYG!YXjm%Z z|KUqpl2ot8CfPw1efyLB7aS~p!)a3S|M(n-Mt(2pqPpOFev=r0z|+;wWt~$(698aT BecAv3 diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md index d30c24fdbc3ea0e..6b074608ecfb61b 100644 --- a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md @@ -31,25 +31,47 @@ This article shows how to build some real-world examples to illustrate what kind The first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area. This includes information-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole UI. Our simple example will look like this once we are finished: -![Tab 1 is selected. 'Tab 2' and 'Tab 3' are the other two tabs. Only the contents of the selected tab are visible. When a tab is selected, it's text-color changes from black to white and it's background-color changes from orange-red to saddle-brown.](tabbed-info-box.png) +![Tab 1 is selected. 'Tab 2' and 'Tab 3' are the other two tabs. Only the contents of the selected tab are visible. When a tab is selected, its text-color changes from black to white and its background-color changes from orange-red to saddle-brown.](tabbed-info-box.png) -> **Note:** You can see the finished example running live at [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html)). Check it out to get an idea of what you will be building in this section of the article. +> **Note:** You can see the finished example running live at [tabbed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. -You might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" This code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger UI design. +You might be thinking "Why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" This code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger UI design. -To start with, we'd like you to make a local copy of the starting HTML file — [info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box-start.html). Save this somewhere sensible on your local computer, and open it up in your text editor. Let's look at the HTML contained within the body: +To start with, we'd like you to make a local copy of the starting files — [tabbed-info-box-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box-start.html) and [tabs-manual.js](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabs-manual.js). Save these somewhere sensible on your local computer, and open `tabbed-info-box-start.html` in your text editor. Let's look at the HTML contained within the body: ```html

- +
+ + + + +
+
-
+

The first tab

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum @@ -60,23 +82,22 @@ To start with, we'd like you to make a local copy of the starting HTML file — urna. Nulla facilisi.

-
-

The second tab

+
+

The second tab

This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.

-
-

The third tab

+
+

The third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!

-
  1. dui neque eleifend lorem, a auctor libero turpis at sem.
  2. Aliquam ut porttitor urna.
  3. @@ -87,9 +108,9 @@ To start with, we'd like you to make a local copy of the starting HTML file —
``` -So here we've got a {{htmlelement("section")}} element with a `class` of `info-box`, which contains a {{htmlelement("ul")}} and a {{htmlelement("div")}}. The unordered list contains three list items with links inside, which will become the actual tabs to click on for displaying our content panels. The `div` contains three {{htmlelement("article")}} elements, which will make up the content panels that correspond to each tab. Each panel contains some sample content. +So here we've got a {{htmlelement("section")}} element with a `class` of `info-box`, which contains two {{htmlelement("div")}}s. The first div contains three buttons, which will become the actual tabs to click on for displaying our content panels. The second div contains three {{htmlelement("article")}} elements, which will make up the content panels that correspond to each tab. Each panel contains some sample content. -The idea here is that we will style the tabs to look like a standard horizontal navigation menu, and style the panels to sit on top of one another using absolute positioning. We'll also give you a bit of JavaScript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. You won't need to understand the JavaScript itself at this stage, but you should think about learning some basic [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) as soon as possible — the more complex your UI features become, the more likely it is that you'll need some JavaScript to implement your desired functionality. +The idea here is that we will style the tabs to look like a standard horizontal navigation menu and style the panels to sit on top of one another using absolute positioning. We'll also give you a bit of JavaScript to include on your page to display the corresponding panel when a tab is pressed, and style the tab itself. You won't need to understand the JavaScript code itself at this stage, but you should think about learning some basic [JavaScript](/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) as soon as possible — the more complex your UI features become, the more likely it is that you'll need some JavaScript to implement your desired functionality. ### General setup @@ -115,60 +136,57 @@ Next, add the following just below your previous CSS: ```css .info-box { - width: 450px; + width: 452px; height: 400px; - margin: 0 auto; + margin: 1.25rem auto 0; } ``` -This sets a specific width and height on the content, and centers it on the screen using the old `margin: 0 auto` trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is OK in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights. +This sets a specific width and height on the content and centers it on the screen using the old `margin: 1.25rem auto 0`. Previously in the course, we advised against setting a fixed height on content containers if at all possible; it is OK in this circumstance because we have fixed content in our tabs. ### Styling our tabs -Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list: +Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to make the `tablist` a {{cssxref("flex")}} container and have it span 100% width: ```css -.info-box ul { - padding-left: 0; - margin-top: 0; +.info-box [role="tablist"] { + min-width: 100%; + display: flex; } ``` > **Note:** We are using descendant selectors with `.info-box` at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page. -Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to `none` to get rid of the bullets, and their {{cssxref("width")}} is set to `150px` so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties. - -Add the following CSS: +Next, we'll style the buttons to look like tabs. Add the following CSS: ```css -.info-box li { - float: left; - list-style-type: none; - width: 150px; -} - -.info-box li a { - display: inline-block; - text-decoration: none; - width: 100%; - line-height: 3; - background-color: red; - color: black; - text-align: center; +.info-box [role="tab"] { + padding: 0 1rem 0 1rem; + line-height: 3rem; + background: white; + color: #b60000; + font-weight: bold; + border: none; + outline: none; } ``` -Finally for this section we'll set some styles on the link states. First, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a `class` of `active-tab` is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles: +Next, we'll set the `:focus` and `:hover` states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. ```css -.info-box li a:focus, -.info-box li a:hover { - background-color: #a60000; - color: white; +.info-box [role="tab"]:focus span, +.info-box [role="tab"]:hover span { + outline: 1px solid blue; + outline-offset: 6px; + border-radius: 4px; } +``` -.info-box li a.active-tab { - background-color: #a60000; +Then we'll set a rule that highlights one of the tabs when [`aria-selected`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) property is set to `true` on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles: + +```css +.info-box [role="tab"][aria-selected="true"] { + background-color: #b60000; color: white; } ``` @@ -182,76 +200,56 @@ First, of all, add the following rule to style the `.panels` {{htmlelement("div" ```css .info-box .panels { height: 352px; - position: relative; clear: both; + position: relative; } ``` -Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}. - -The second rule we'll add here makes it so that a panel with a `class` of `active-panel` set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a `z-index` of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time. +Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}. ```css -.info-box article { +.info-box [role="tabpanel"] { + background-color: #b60000; + color: white; position: absolute; + padding: 0.8rem 1.2rem; + height: 352px; top: 0; left: 0; - height: 352px; - padding: 10px; - color: white; - background-color: #a60000; -} - -.info-box .active-panel { - z-index: 1; } ``` -### Adding our JavaScript +The second rule we'll add here makes it so that a panel with a class of `is-hidden` set on it will be hidden. Again, we'll add/remove this class using JavaScript at the appropriate time. When a tab is selected the corresponding panel will have its `is-hidden` class removed and all other panels will have `is-hidden` class set, thus only one panel will be visible at a time. -The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content): - -```js -const tabs = document.querySelectorAll(".info-box li a"); -const panels = document.querySelectorAll(".info-box article"); - -for (let i = 0; i < tabs.length; i++) { - setTabHandler(tabs[i], i); +```css +.info-box [role="tabpanel"].is-hidden { + display: none; } +``` -function setTabHandler(tab, tabPos) { - tab.onclick = () => { - for (const tab of tabs) { - tab.className = ""; - } - - tab.className = "active-tab"; +### JavaScript - for (const panel of panels) { - panel.className = ""; - } +The final part that makes this feature work is the JavaScript code. The `tabs-manual.js` file has been included using the [` ``` This code does the following: -- First we save a reference to all the tabs and all the panels in two variables called `tabs` and `panels`, so we can easily do things to them later on. -- Then we use a `for` loop to cycle through all the tabs and run a function called `setTabHandler()` on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number `i` that identifies the tab's position in the `tabs` array. -- In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs: +- On [window load event](/en-US/docs/Web/API/Window/load_event) it initializes `TabsManual` [class](/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) for all the `tablist` elements. +- When a `TabsManual` object is created, in the constructor all the tab and panel references are collected in `tabs` and `tabpanels` variables, so we can easily do things to them later on. +- The constructor also registers [`click`](/en-US/docs/Web/API/Element/click_event) and [`keydown`](/en-US/docs/Web/API/Element/keydown_event) event handlers on all the tabs. The event handlers include logic about what should happen when a tab is selected using a click or keypress. +- In the `setSelectedTab(currentTab)` function, the following occurs: - - A `for` loop is used to cycle through all the tabs and remove any classes that are present on them. - - A `class` of `active-tab` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with. - - A `for` loop is used to cycle through all the panels and remove any classes that are present on them. - - A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels. + - A `for` loop is used to cycle through all the tabs and deselect them by setting `aria-selected` property to `false` and by setting `is-hidden` class on corresponding panels. + - On the selected tab (`currentTab`) the `aria-selected` is set to `true` and `is-hidden` class is removed from the corresponding panel. -That's it for the first example. Keep your code open, as we'll be adding to it in the second one. +- The code also has logic to support keyboard navigation using `Left arrow`, `Right arrow`, `Home`, and `End` keys. ## A fixed position tabbed info-box -In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this: +In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it a fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this: ![Info-box is a container with 3 tabs with the first tab selected and only the contents of the first tab are displayed. It is given a fixed position. The info-box is positioned at the top left corner of the window with a width of 452 pixels. A container of fake content occupies the rest right half of the window; the fake content container is taller than the window and is scrollable. When the page is scrolled, the right-hand side container moves while the info-box stays fixed in the same position on the screen. ](fixed-info-box.png) @@ -261,7 +259,7 @@ As a starting point, you can use your completed example from the first section o ### HTML additions -First of all, we need some additional HTML to represent the website main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section: +First of all, we need some additional HTML to represent the webpage's main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section: ```html
@@ -303,8 +301,9 @@ It should now look like this: ```css .info-box { - width: 450px; + width: 452px; height: 400px; + margin: 0 auto; position: fixed; top: 0; } @@ -322,6 +321,10 @@ The only thing left for this example is to provide the main content with some st height: 2000px; margin-left: 470px; } + +.fake-content p { + margin-bottom: 200px; +} ``` To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else. @@ -330,7 +333,7 @@ This marks the end of the second example; we hope you'll find the third just as ## A sliding hidden panel -The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content. +The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen space is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content. Our finished example will look like this: @@ -341,58 +344,54 @@ Our finished example will look like this: As a starting point, make a local copy of [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) from our GitHub repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file: ```html-nolint - - -