Skip to main content

Posts

Showing posts with the label css

Html.ActionLink with image

Problema: Se cere ca intr-o aplicatie MVC 3 sa afisam un link, dar in loc de text sa apara o imagine. Solutie: Cel mai simplu lucru este sa ne definim o clasa CSS care afiseaza o imagine in background. a.HelpLink { background: url(../Images/Icons/Help.gif) no-repeat top left; display: block; width: 100px; height: 100px; text-indent: -9999; } Prin intermediul ultimei valori ascundem link-ul textului. Ca sa ne definim link-ul trebuie mai este nevoie doar sa specificam in ActionLink ce clasa CSS sa fie folosita: <%= Html.ActionLink("Help", "HelpAction", null, new { @class="HelpLink" }) %> Enjoy!

Blob content type - Windows Azure

La fiecare blob din Windows Azure se poate seta content type. De cele mai multe ori acest parametru trece neobservat. Mai jos este un exemplu care arata cum se poate schimba aceasta valoare: Paste your text here.var blob = Container.GetBlockBlobReference("numeBlob"); blob.Properties.ContentType = "application/octet-stream"; Cand aceasta propietate devine utila? In momentul in care vrem sa stocam pe blob resurse statice. De exemplu vrem sa adaugam un CSS pe blob, iar href pentru CSS sa fie spre adresa din blob. Pentru ca aceasta solutie sa functioneze pe orice brower( Firefox are nevoie de un content type valid) este nevoie sa setam valoarea la content type egala cu "text/css". var blob = Container.GetBlockBlobReference("numeBlob"); blob.Properties.ContentType = "text/css"; Daca aceasta valoare nu este setata pe Firefox nu o sa se incarce deloc CSS-ul, desi adresa setata este valida.

ASP.NET Sprites

Cand trebuie sa cream designul unui site avem nevoie de o mulÈ›ime de imagini. Pentru a scadea numarul de apeluri la server, putem sa încărcam aceste imagini inline( conÈ›inutul binar a imaginii se poate pune direct in HTML sau CSS, ca si in exemplul de mai jos: .logo-png { width:310px; height:155px; text-decoration:none; display:block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAACb… } Dezavantajul la aceasta solutie este faptul ca doar browserele mai noi suporta acest lucru( IE8+,FF 3.5+). Daca trebuie sa incarcam pagini de dimensiuni mari atunci aceasta solutie nu este tocmai buna, deoarece utilizatorul trebuie sa astepte pana cand se incarca tot continutul pentru a putea afisa partial pagina. Pentru a rezolva aceasta problema aparuta, imaginile se pot pune intr-o singura imagine, iar prin intermediul CSS-ului sa afisam doar o portiune din imagine. Click pentru mai multe informaÈ›ii. Dar ar fi frumos sa putem pune toate imaginile intr-un singur director...