Note de subsol

Pe site-urile care conţin texte ce necesită referinţe, cu ajutorul notelor de subsol, CSS-ul poate fi de folos, prin crearea unei clase aplicabile acelui text.

Varianta 1 – simplă

Astfel, se poate introduce automat şi acea linie orizontală care delimitează nota de subsol de restul textului*, prin folosirea atributului :before. Pentru aceasta, propunerea mea este a se folosi următorii parametri ai clasei, denumite de mine, .notaSubsol:

Va fi necesar, doar, să puneţi indexul notei de subsol (fie numerotare, fie asterisc), folosind atributul < sup> după cum vedeţi şi la textul de sus, unde am folosit < sup>* < /sup >

Exemplificarea

* Această notă de susbol este creată folosind clasa de mai sus.

Varianta 2 – complexă

Un pic mai sofisticat, dar cu aspect mai profesional este prezentat mai jos. Astfel, folosind o clasă, dar asociată cu etichete diferite, va avea setări diferite.

Clasa va fi utilizată, în paragraf, după cum urmează în exemplul de mai jos.

Paragraful de sus poate fi încadrat şi în eticheta <p>, dar cel puţin această temă WordPress folosită la acest site afectează paragrafele cu eticheta <p> care au ataşată o clasă.

Ulterior, conţinutul propriu-zis al notelor de subsol va fi inclus într-un div sau p. Tot în ideea precauţiilor atunci când se lucrează cu WordPress: atunci când se editează un articol/pagină, în modul Visual, s-ar putea să aveţi supriza că, dacă între etichetele <a></a> nu aveţi conţinut, există riscul ca să fi se şteargă de tot linkul. De aceea, recomandarea este de a pune un punct între ele (deci, aşa: <a class="nota_subs" title="Vezi nota..." href="#nota_01">.</a> ), deoarece, după cum se poate vedea mai sus în codul CSS, culoarea pentru acel punct, fiind setată pe transparent, dar şi puţin „înghesuit” prin valoarea negativă de la letter-spacing, îl va face, în principiu, invizibil.

Sursa: SitePoint.com

Exemplificarea

Lorem ipsum, consectetur adipiscing elit), dolore magna aliqua.

  1. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Această a doua variantă poate fi observată „la lucru” şi în articolul de la următorul link. Codul poate fi descărcat şi de aici.

Author: Ovidiu.S

Suficient de pasionat de această zonă profesională ca, în cazul în care ştiu ceva - cât de puţin - să împărtăşesc cu alţii.

Lasă un răspuns