Sokszor nem eszt�tikus a g�rget�s�v, f�k�nt kis m�ret�, keskeny sz�vegdobozokn�l, ahol egy�bk�nt is kev�s hely vana  sz�vegnek. Erre is van egy tr�kk, amivel n�mi plusz id� r�ford�t�s�val el tudjuk ezeket t�ntetni bemutat�nkr�l.

A feladat: belehelyezni egy nagyobb sz�vegdobozt egy kisebbe, a fizika t�rv�nyei itt most elbuknak, a weben (majdnem) mindent lehet.

Az els�, alap sz�vegdoboz k�dja lesz a k�ls� sz�vegdoboz, amibe a m�sikat helyezz�k. Ennek a sz�vegdoboznak nem kell semmilyen felesleges form�z�st adni, az csak n�veli a k�d hossz�s�g�t, de �rtelmetlen. Egyed�l a m�reteket (magass�g=height, sz�less�g=width) �s az elhelyezked�s�t (balr�l=margin-left, fentr�l=margin-top) kell v�ltoztatni, itt csak a px el�tti sz�m�rt�ket �rd �t tetsz�legesen. Tipp: ha k�d n�zetben �t�rt�l valamit, n�zd meg norm�l n�zetben a m�dos�t�s ut�n a v�ltoz�sokat.

*****

<div style="text-align: justify; width: 335px; height: 138px; margin-top: 116px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;">

Ide illeszted be a m�sik sz�vegdoboz k�dj�t, amiben a bemutat�d sz�vege van.

</div>

*****

M�sodik, aminek hely�t a fentebb jelzett k�dban pirossal jel�ltem. Ebben m�r csak p�r �rt�k�t kell �t�rni a fentihez igazodva. Vizsg�ljuk meg el�sz�r a sz�less�g �s magass�g viszonyait. A nagyobb szd. magass�ga �tlagosan 0-2 pixellel nagyobb csup�n, a sz�less�g ( a g�rget�s�v �s a bels� marg�k miatt) m�r 13-15px pluszt jelent. Ha a sz�veged sz�n�t, m�ret�t, bet�t�pus�t, stb. szeretn�d �t�ll�tani, azt is ebben a r�szben teheted meg, a m�r ismert m�don, amit egy kor�bbi cikkben olvashatsz.

*****

<div style="text-align: justify; width: 350px; height: 140px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;"><font color="#118aac"><b>? SZ�VEGDOBOZOD C�ME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your&nbsp;text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text  here your text here your text here your text here your text here your text here your text here your text - ITT A SZ�VEG V�GE</span></div></font></font>
</div>

*****

Demo:

K�d, amivel k�s�rletezhetsz, vagy alkothatsz egy teljesen m�sikat:

<div style="cursor: url('http://kepfeltoltes.hu/160206/blue_www.kepfeltoltes.hu_.png'), default;"> <div style="text-align: center;"></div><div style="width:721px; height:444px; margin: auto;text-align:center;background: url(http://orig00.deviantart.net/7e18/f/2016/037/c/8/halak_by_nseth-d9qqe7p.png);"> <div style="text-align: justify; width: 335px; height: 138px; margin-top: 116px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;"> <div style="text-align: justify; width: 350px; height: 140px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;"><font color="#118aac"><b>>>> SZ�VEGDOBOZOD C�ME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text - ITT A SZ�VEG V�GE</span></div></font></font></div> </div> <div style="text-align: justify; width: 370px; height: 108px; margin-top: 25px; margin-left: 22px; -webkit-transform: rotate(0deg); float: left; overflow: hidden; background-color: transparent; padding: 5px 5px 5px 5px; border: 0px;"> <div style="text-align: justify; width: 383px; height: 110px; margin-top: 0px; margin-left: 0px; float: left; overflow: auto; background-color: transparent; padding: 1px 10px 5px 5px; border: 0px;"><font style="font-family: Century Gothic; text-shadow:#acf8f9 1px 1px 1px; line-height: 11pt; font-size: 12px;" color="#008181"><b>>>> SZ�VEGDOBOZOD C�ME</b><br><br><div style="text-align: justify;"><span style="line-height: 11pt;">here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text here your text - ITT A SZ�VEG V�GE</span></div></font></div> </div> </div></div>

Ha valami k�rd�sed van, vagy �ppen nem siker�l sokadszorra sem, �rd meg kommentben!