Aşa cum am spuneam aici, puneam la cale o bară de navigare asemănătoare cu asta cu diferenţa că cea din urmă are şi un efect drăguţ.

Trebuie să precizez întâi de toate dezavantajele acestei metode (da, există nişte dezavantaje):

• Fiecare link necesită o imagine. Asta înseamnă că în momentul în care vrei să schimbi textul trebuie să modifici imaginea. Dacă este pentru un site ce nu-şi schimbă prea des link-urile, nu este o problemă serioasă;
• Cod suplimentar. La fel ca şi prima bară de navigare de altfel. În locul unui span se poate folosi orice element inline: em, strong, etc.

Codul este asemănător cu cel anterior, cu diferenţa că fiecare link are o clasă:

1
2
3
4
5
6

<ul id="fadeMenu">
    <li><a href="#" class="m1"><span>Home</span></a></li>
    <li><a href="#" class="m2"><span>About</span></a></li>
    <li><a href="#" class="m3"><span>Faq</span></a></li>
    <li><a href="#" class="m4"><span>Contact</span></a></li>
</ul>

(Mai mult…)

Astăzi sunt mai darnic decât de obicei în ceea ce priveşte CSS-ul. După ce mai devreme am scris un mic tutorial, m-am apucat de lucru. Şi când testam un formular în Safari am observat că resize-ul de la un textarea este un pic inestetic. La fel şi când un element de formular are focus, capătă un mic glow albăstrui. E cool, dar uneori nu dă bine în design.

Pentru a scoate acel glow, se adaugă în css:

1

input,textarea {outline:none}

Pentru redimensionarea textarea, rezolvarea este stupid de simplă:

1

textarea {resize:none}

Nu-i aşa că e simplu?

Am observat că sunt destul de mulţi programatori în devenire ce nu ştiu (sau întâmpină greutăţi) să facă o bară de navigare cu fundal diferit la hover. Este o metodă ce o folosesc foarte des, fără să am probleme în diferite browsere.

PASUL I

Meniul propriu zis este realizat folosind o listă neordonată:

1
2
3
4
5
6

<ul id="slidingDemo">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Faq</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

Primul pas este aşezarea orizontală a listei:

1
2
3
4
5

#slidingDemo li{
	list-style:none;
	float:left;
	margin:0 10px;
}

Întrucât IE6 tratează un pic diferit float-urile şi marginile, adăugăm şi

1

* html #slidingDemo li {display:inline}

Este un hack ce este interpretat doar de IE6, neafectând funcţionarea în browserele adevărate.

PASUL II

Imaginea de fundal trebuie să fie mai lată decât textul şi este necesar să aibe două „stări” (normal şi hover), după care purcedem la stilizarea link-urilor.

1
2
3
4
5
6
7
8
9

#slidingDemo li a{
	display:block;
	background:url(buton.gif) no-repeat left top;
	height:26px;
	padding-left:10px;
	color:#fff;
	font:700 .88em/26px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

(Mai mult…)

http://reference.sitepoint.com/

Foarte frumos documentat şi cu siguranţă foarte util pentru începători. Enjoy!

Dacă îţi place să intri pe multe blog-uri noi şi ai mereu ceva de comentat, probabil te-ai săturat să tot bagi numele, adresa de email şi adresa site-ului tău. Pentru task-uri simple, nişte băieţi deştepţi au inventat bookmarklets. Pe scurt, este o secvenţă de javascript adăugată în meniul favorites (bookmarks) ce se poate executa printr-un simplu click.

Eu unul cum intru în categoria de mai sus, am făcut un mic script (banal) pentru a completa automat aceste câmpuri cu datele mele.

Doar pentru wordpress:

javascript:document.getElementById('author').value='numele tau'; document.getElementById('email').value='adresa@ta'; document.getElementById('url').value='blog.iamntz.com'; void(null)

Doar pentru blogspot (trebuie bifat nickname întâi)

javascript:document.getElementById('uname').value='numele tau'; document.getElementById('uurl').value='blog.iamntz.com'; void(null)

Pentru ambele:

javascript:try {document.getElementById('author').value='numele tau'; document.getElementById('email').value='adresa@ta'; document.getElementById('url').value='blog.iamntz.com'; void(null)} catch(err){};try{document.getElementById('uname').value='numele tau'; document.getElementById('uurl').value='blog.iamntz.com'; void(null)} catch(err){};

Cum se foloseşte?

În Firefox du-te în Bookmars->Organize bookmarks -> New bookmarks (asta e un icon în stânga sus).

Introduci numele bookmarkletului în input-ul Name iar în input-ul Location adaugi codul de mai sus (este pe un singur rând), făcând modificările de rigoare. Apeşi OK si gata. Ai un bookmarklet util ce merge pe majoritatea blogurilor bazate pe Wordpress unde de fiecare dată când apeşi pe el, câmpurile de la comentarii se vor completa cu datele tale.

UPDATE: a fost o mică problemă cu ghilimele puse aiurea de Wordpress. Dacă ai încercat şi nu a mers, mai încearcă o dată. Cu siguranţă va funcţiona.

UPDATE2: a apărut şi versiunea pentru blogspot