Snippets – cod util

M-am hotărât să le postez pentru ca şi alţii să poată profita de ele. Când am avut nevoie, le-am căutat pe net şi le-am găsit. Probabil unii le ştiu deja, nu am pretenţia că sunt noi şi îmi puteţi trimite şi voi trucuri care pot fi de folos.

Centrarea unui DIV

Centrarea unui DIV

Pe măsură ce voi găsi şi altele utile am să le adaug aici.


CSS pentru IE only

Din cauza faptului că IE (Internet Explorer) are alt standard decât cel internaţional, se comportă ciudat şi diferit. Pe net sunt multe trucuri (hacks) care se bazează tocmai pe faptul ăsta.

  color: red;
 _color: green

Asta face ca toate browser-ele care se conformează standarduluiignore comenzile cu liniuţa de subliniere (underscore) şi să afişeze culoarea roşie a elementului pe care îl definesc.
Doar IE (nu ştiu cum e cu ultimele variante că nu le-am actualizat) citeşte şi comanda cu underscore şi va afişa culoarea verde pentru elementul respectiv.
Atenţie!
Obligatoriu _comanda pentru IE trebuie să fie după cea pentru restul browserelor pentru că ultima comandă are prioritate la citire şi execuţie.


Scurtarea codului

Atunci când se poate.

#numele
{
background-color: #666666;
background-image: url(adresa/fişier);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top center;

margin-top: 45px;
margin-right: 10px;
margin-bottom: 30px;
margin-left: 10px;

padding-top: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;

color: Black;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;

}

Cu varianta 1 CSS se poate scrie prescurtat:

#numele
{
background: #666666 url(adresa/fişier) fixed top center repeat-y;
margin: 45px 10px 30px 10px;
padding: 16px 16px 16px 16px;
color: Black;
font: 14px normal Arial, Helvetica, sans-serif;
}


Centrarea unui DIV

Pentru IE trebuie ca DIV-ul care îl conţine pe cel ce se doreşte centrat să aibă, în css sau în pagină, codul:

text-align: center;

iar pentru celelalte browsere, DIV-ul care trebuie centrat, trebuie să aibă:

margin: 0 auto;

Imaginea de la începutul postării prezintă cele 2 DIV-uri. Primul DIV (cel mare, violaceu) poate fi BODY.


Adăugarea unui film de pe you tube

Ăsta e pentru blogurile de pe wordpress.

{numele} de mai sus este numele unic al filmului, din bara de adresă.


Atât deocamdată dar voi mai adăuga ulterior.


Update:

Cele câteva noutăţi utile

de la Shortcode.

Ruperea unei pagini sau postări lungi in pagini numerotate în josul paginii.

<!--nextpage-->

Formular de contact.

[contact-form]

Arhiva de postări are multe opţiuni şi e util să fie văzute pe pagina de suport (http://support.wordpress.com/archives-shortcode/).

Ca listă drop-down cu toate postările:

[archives format=option]

şi test aici

sau pentru plasat într-o pagină ca listă lungă html:

[archives format=html]

sau lunar şi cu numărul de postări pe lună:

[archives format=option type=monthly limit=12 showcount=true]

Salt la ancoră.

Definirea ancorei (un nume unic în loc de textul ancora)

<a name=”ancora”></a>

De oriunde din pagină, salt la ancoră:

<a href=”#ancora”>sare la ancora</a>

Un exemplu e în pagina de Link-uri.


Culori comentate în CSS

E util ca în cadrul fişierului (la începutul lui) să faceţi o scurtă descriere a culorilor folosite pentru ca şi alţii care vor fi implicaţi în lucrul la site, sau voi peste un timp, să ştiţi ce culori sunt folosite şi unde pentru că după cod e mai greu de imaginat care e care.

De ex.:


/*
**************************************************
#323457 numele culorii (unde e folosită)
**************************************************
*/

Spor!

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s