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…)

Citat de pe site-ul lor:

MoreCSS is a small JavaScript library for everyday things, like creating popups, tab menus (for example like the one above), tables and lists with “zebra”-style … etc. But the really special thing is: you can do these things like in regular CSS.

Iar un exemplu interesant :
a {
target:popup;
target-width:640px;
target-height:640px;
}

Rezultatul cred că e destul de previzibil. Pe pagina lor sunt mai multe exemple, unul mai interesant ca altul

via.

http://reference.sitepoint.com/

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

Azi am început să tai un layout ce avea o parte dintr-un formular un pic… diferit de cum ar fi normal. Şi anume un alt buton de upload. Şi m-am gândit eu puţin şi am ajuns la concluzia că elementele ce intră într-un tag form sunt cel mai greu de customizat:

1. <legend> se comportă diferit pe firefox comparativ cu IE sau Opera, neputând fi poziţionat în niciun fel - padding/margin. Singura soluţie ar fi poziţionare relativă a fieldset-ului şi poziţionare absolută a tag-ului legend. Sau folosirea unui titlu în locul lui <legend> (<h4> sau <h5>)
2. <input type=”checkbox” /> şi <input type=”radio” /> nu poţi sa le convingi prea uşor de un anume background/culoare. Cred că ţine şi de setările sistemului de operare
3. <input type=”text” /> şi <textarea> au un „mic” bug în IE: dacă are o imagine ca background iar textul depăşeşte lătimea definită, background-ul pleacă la pădure. Fix? Pentru IE6 se defineşte bg ca fixed. Pentru IE7 nu am găsit altă soluţie decât să pun input-ul sau textarea într-un alt element (span/div) şi schimb background la acest element.
4. <select> & <option> padding-ul se aplică după ureche, în funcţie de browser. În plus, în IE6 este un bug criminal: niciun element nu poate apărea deasupra unui <select>. Soluţia? Dacă foloseşti jQuery, găseşti o mulţime.
5. Am lăsat cireaşa de pe tort (bomboana de pe colivă?!) la urmă: <input type=”file” />. Un simplu style=”border:1px solid #000″ îi strică rău de tot aspectul. Soluţii sunt multiple:

• nu te legi sub nicio formă de file şi te mulţumeşti doar cu lăţime;
• foloseşti o şmecherie făcută în flash (ai nevoie şi de cunoştinţe server side);
• foloseşti o şmecherie făcută în javascript. Sau un plugin pentru jQuery (download AICI deoarece nu prea merge site-ul).

Pentru primele patru probleme există o rezolvare foarte simplă all in one. Este o versiune recentă ce rezolvă o parte din problemele iniţiale (select-ul nu funcţiona decât dacă se făcea click pe săgeată, nu se putea folosi tastatura).

Enjoy!