Živá ukázka

Výsledek

<div id="t1_1" class="t s1_1">FAKTÚRA</div>
<div id="t2_1" class="t s1_1">[@c_faktury]</div>

<div id="t6_1" class="t s1_1">[@d_meno]</div>
<div id="t7_1" class="t s4_1">[@d_ulica]</div>
<div id="t8_1" class="t s4_1">[@d_psc] [@d_mesto]</div>
<div id="t9_1" class="t s4_1">[@d_stat]</div>

<div id="th_1" class="t s5_1">TELEFÓN:</div>
<div id="ti_1" class="t s5_1">[@d_telcislo]</div>

<div id="tj_1" class="t s5_1">EMAIL:</div>
<div id="tk_1" class="t s5_1">[@d_email]</div>

<div id="tn_1" class="t s6_1">Forma úhrady:</div>
<div id="to_1" class="t s6_1">[@formauhrady]</div>

<div id="tp_1" class="t s6_1">Variabilný symbol:</div>
<div id="tq_1" class="t s6_1">[@varsymbol]</div>

<div id="tr_1" class="t s6_1">Konštantný symbol:</div>
<div id="ts_1" class="t s6_1">[@konstsymbol]</div>

<div id="tt_1" class="t s6_1">Odberateľ</div>
<div id="tu_1" class="t s7_1">[@o_meno]</div>
<div id="tv_1" class="t s4_1">[@o_ulica]</div>
<div id="tw_1" class="t s4_1">[@o_psc] [@o_mesto]</div>
<div id="tx_1" class="t s4_1">[@o_stat]</div>

<div id="t14_1" class="t s6_1">Dátum vystavenia</div>
<div id="t17_1" class="t s4_1">[@vystavenie]</div>

<div id="t15_1" class="t s6_1">Dátum dodania</div>
<div id="t18_1" class="t s4_1">[@dodanie]</div>

<div id="t16_1" class="t s6_1">Dátum splatnosti</div>
<div id="t19_1" class="t s4_1">[@splatnost]</div>

<div id="t1a_1" class="t s6_1">Popis položky</div>
<div id="t1b_1" class="t s6_1">Množstvo</div>
<div id="t1c_1" class="t s6_1">MJ</div>
<div id="t1d_1" class="t s6_1">Cena za MJ</div>
<div id="t1e_1" class="t s6_1">Celková cena</div>

<div id="t1f_1" class="t s6_1">[@panel1]</div>
<div id="t1g_1" class="t s6_1">400</div>
<div id="t1h_1" class="t s6_1">[@panel1_ks]</div>
<div id="t1i_1" class="t s6_1">[@panel1cena_za_mn]</div>
<div id="t1j_1" class="t s6_1">[@panel1cel_cena]</div>

<div id="t1k_1" class="t s6_1">[@panel2]</div>
<div id="t1l_1" class="t s6_1">[@panel2_mn]</div>
<div id="t1m_1" class="t s6_1">[@panel2_ks]</div>
<div id="t1n_1" class="t s6_1">[@panel2cena_za_mn]</div>
<div id="t1o_1" class="t s6_1">[@panel2cel_cena]</div>

<div id="t1p_1" class="t s6_1">[@panel3]</div>
<div id="t1q_1" class="t s6_1">[@panel3_mn]</div>
<div id="t1r_1" class="t s6_1">[@panel3_ks]</div>
<div id="t1s_1" class="t s6_1">[@panel3cena_za_mn]</div>
<div id="t1t_1" class="t s6_1">[@panel3cel_cena]</div>

<div id="t1u_1" class="t s6_1">Spolu:</div>
<div id="t1v_1" class="t s6_1">[@spolu]</div>

<div id="t1w_1" class="t s6_1">Celková suma:</div>
<div id="t1z_1" class="t s6_1">[@celsuma] EUR</div>

<div id="t1x_1" class="t s6_1">Uhradené zálohami:</div>
<div id="t20_1" class="t s6_1">[@uhzalohami]</div>
<div id="t1y_1" class="t s6_1">Zostáva uhradiť:</div>
<div id="t21_1" class="t s6_1">[@zostava] EUR</div>

<div id="t22_1" class="t s9_1">Vyhotovil: </div>
<div id="t23_1" class="t s10_1">[@vystavil]</div>

<div id="t24_1" class="t s9_1">Prevzal:</div>
<div id="t25_1" class="t s6_1">K úhrade:</div>
<div id="t26_1" class="t s11_1">[@kuhrade] EUR</div>
<div id="t27_1" class="t s9_1">[@sumaslovom]</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

.t {
	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-o-transform-origin: top left;
	-ms-transform-origin: top left;
	-webkit-transform: scale(0.25);
	-moz-transform: scale(0.25);
	-o-transform: scale(0.25);
	-ms-transform: scale(0.25);
	z-index: 2;
	position: absolute;
	white-space: pre;
	overflow: visible;
}

#t1_1{left:48px;top:46px;} /* FĆKTĆRA */
#t2_1{left:745px;top:46px;} /* Ä. faktury */
#t3_1{left:56px;top:1237px;} /* Faktury-online.com */
#t4_1{left:160px;top:1237px;}
#t5_1{left:160px;top:1243px;}
#t6_1{left:61px;top:83px;} /* D_meno */
#t7_1{left:61px;top:117px;} /* D_ulica */
#t8_1{left:61px;top:139px;} /* D_psc , D_mesto */
#t9_1{left:61px;top:160px;} /* D_stat */

#ta_1{left:61px;top:204px;} /* IÄO: */
#tb_1{left:199px;top:204px;} /* D_ico */

#tc_1{left:61px;top:225px;} /* DIÄ: */
#td_1{left:199px;top:225px;} /* D_dic */

#te_1{left:61px;top:247px;}
#tf_1{left:199px;top:247px;}
#tg_1{left:61px;top:269px;}

#th_1{left:61px;top:270px;} /* TELEFĆ“N: */
#ti_1{left:199px;top:270px;} /* d_telcislo */

#tj_1{left:61px;top:287px;} /* EMAIL: */
#tk_1{left:199px;top:287px;} /* d_email */

#tl_1{left:61px;top:307px;} /* WEB: */
#tm_1{left:199px;top:307px;} /* d_web */

#tn_1{left:437px;top:85px;} /* FORMA ĆHRADY: */
#to_1{left:533px;top:85px;} /* formauhrady */

#tp_1{left:654px;top:85px;} /* VARIABILNĆ¯ SYMBOL: */
#tq_1{left:795px;top:85px;} /* varsymbol */

#tr_1{left:654px;top:106px;} /* KONÅ TANTNĆ¯ SYMBOL: */
#ts_1{left:795px;top:106px;} /* konstsymbol */

#tt_1{left:437px;top:141px;} /* ODBERATEÄ½: */
#tu_1{left:481px;top:171px;} /* o_meno */

#tv_1{left:481px;top:204px;} /* o_ulica */
#tw_1{left:481px;top:225px;} /* o_psc , o_mesto */
#tx_1{left:481px;top:247px;} /* o_stat */

#ty_1{left:481px;top:284px;} /* IÄO: */
#tz_1{left:589px;top:284px;} /* o_ico */

#t10_1{left:481px;top:301px;} /* DIÄ: */
#t11_1{left:589px;top:301px;} /* o_dic */

#t12_1{left:481px;top:318px;} /* IÄDPH: */
#t13_1{left:589px;top:318px;} /* o_icdph */

#t14_1{left:48px;top:381px;} /* DĆTUM VYSTAVENIA: */
#t17_1{left:199px;top:394px;} /* vystavenie */

#t15_1{left:329px;top:381px;} /* DĆTUM DODANIA: */
#t18_1{left:459px;top:394px;} /* dodanie */

#t16_1{left:589px;top:381px;} /* DĆTUM SPLATNOSTI: */
#t19_1{left:719px;top:394px;} /* splatnost */

#t1a_1{left:233px;top:448px;} /* POPIS POLOÅ½KY: */
#t1b_1{left:498px;top:448px;} /* MNOÅ½STVO: */
#t1c_1{left:594px;top:448px;} /* MJ: */
#t1d_1{left:652px;top:448px;} /* CENA za MJ: */
#t1e_1{left:753px;top:448px;} /* CELKOVĆ CENA: */

#t1f_1{left:69px;top:470px;} /* panel1 */
#t1g_1{left:510px;top:470px;} /* panel1_mn */
#t1h_1{left:596px;top:470px;}  /* panel1_ks */
#t1i_1{left:670px;top:470px;} /* panel1cena_za_mn */
#t1j_1{left:770px;top:470px;} /* panel1cel_cena */

#t1k_1{left:69px;top:492px;} /* panel2 */
#t1l_1{left:510px;top:492px;} /* panel2_mn */
#t1m_1{left:596px;top:492px;} /* panel2_ks */
#t1n_1{left:670px;top:492px;} /* panel2cena_za_mn */
#t1o_1{left:770px;top:492px;} /* panel2cel_cena */

#t1p_1{left:69px;top:513px;} /* panel3 */
#t1q_1{left:510px;top:513px;} /* panel3_mn */
#t1r_1{left:596px;top:513px;} /* panel3_ks */
#t1s_1{left:670px;top:513px;} /* panel3cena_za_mn */
#t1t_1{left:770px;top:513px;} /* panel3cel_cena */

#t1u_1{left:697px;top:492px;} /* SPOLU: */
#t1v_1{left:770px;top:492px;} /* spolu */

#t1w_1{left:589px;top:1087px;} /* CELKOVĆ SUMA: */
#t1z_1{left:740px;top:1087px;} /* celsuma */

#t1x_1{left:589px;top:1109px;} /* UHRADENĆ‰ ZĆLOHAMI: */
#t20_1{left:740px;top:1109px;} /* uhzalohami */

#t1y_1{left:589px;top:1130px;} /* ZOSTĆVA UHRADIÅ¤: */
#t21_1{left:740px;top:1130px;} /* zostava */

#t22_1{left:56px;top:1088px;} /* VYHOTOVIL */
#t23_1{left:56px;top:1195px;font-size: 70px;} /* vystavil */

#t24_1{left:329px;top:1088px;} /* PREVZAL: */

#t25_1{left:589px;top:1152px;} /* K ĆHRADE: */
#t26_1{left:725px;top:1163px;font-weight: bold;} /* kuhrade */
#t27_1{left:640px;top:1198px;width:50px} /* pisane slovom k uhrade */

.s5_1{
	font-size: 55px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s6_1{
	font-size: 48.9px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s7_1{
	font-size: 85.6px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s10_1{
	font-size: 36.7px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s3_1{
	font-size: 21.4px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s8_1{
	font-size: 61.1px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s2_1{
	font-size: 42.8px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s4_1{
	font-size: 73.3px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s9_1{
	font-size: 42.8px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s1_1{
	font-size: 97.8px;
	font-family: Arial;
	color: rgb(0,0,0);
}

.s11_1{
	font-size: 97.8px;
	font-family: Arial;
	color: rgb(0,0,0);
}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS