Archives for : CSS

Probleme cu IE9? Fa-l sa se comporte ca un IE8!

Da, Internet Explorer parca devine din ce in ce mai prost. IE9, in speta, e un nou prag al desperarii, un nou junghi in coastele celor care-si mananca zilele pe altarul internetilor, o noua strigare a clientului “daaar nu merge pe IE9!”

Slava Domnului, am gasit un quick-fix rapid, care pacaleste IE9 sa se comporte ca un IE8 – mai decent, adica, mai previzibil si mai ok.

E vorba de un tag META, de adaugat in <head>, cat mai sus cu putinta:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Verificat, merge! Spor la treaba!

Am lansat Templatix!

Yeeey! Am lansat, in sfarsit, Templatix, primul meu proiect personal.

Este vorba despre un site de template-uri de website-uri, dupa cum ii spune si numele. Idea de baza a fost sa creez un site in care userul sa poata gasi un template exact asa cum si-l doreste – mai simplu, mai complex, mai bun calitativ, mai colorat, mai standard-compliant etc.

Asa ca am inceput deja sa-l populez cu o selectie din cele mai ok template-uri gratuite de pe net, pe care le-am luat la puricat, fiecare in parte, le-am analizat individual si le-am categorisit.

In felul asta, o sa poti cauta prin colectia (in crestere continua) de template-uri gratuite, cam dupa orice criteriu ti-ar trece prin cap.

In plus, am zis: hai sa si ajut un pic webdesignerul/site-ownerul incepator (ca doar lor ma adresez, cu templatix-ul), asa ca i-am mai pus la dispozitie cateva tool-uri zic eu interesante:

– un Online Screen Ruler, sau Rigla de Ecran, daca vrei, (o pagina in care poti incarca orice alta pagina, si unde vei primi si un set de rigle, orizontala si verticala, impreuna cu un masurator de suprafete, tocmai bune pentru a putea vedea exact ce dimensiuni au diverse elemente de design in pagina cu pricina)

– un Editor de HTML Online – in care, la fel, poti incarca orice pagina, si-n care vei primi un tool superb, care-ti permite sa editezi live codul HTML si CSS, ca sa vezi exact ce efect ar avea acea mica modificare la care te gandeai tu etc. (aici inca mai avem niste mici problemutze de parsare – daca gasesti si tu probleme, lasa-mi un comentariu in care sa-mi atragi atentia). Acelasi editor o sa-l gasesti si in versiune simpla, ca Editor HTML+CSS, pe post de poligon pentru tine – in care poti incarca ce HTML si CSS vrei tu, ca sa vezi cum se afiseaza ele in browser.

– un Generator de text, gen Lorem Ipsum, dar cu posibilitatea de a genera text aleator in mai multe limbi, printre care si Romana 😉

– un Creator de Bannere (banner maker) online, care-ti permite sa-ti creezi, usor si rapid, bannere statice cu text si imagini, si pe care sa ti le salvezi apoi ca sa le folosesti unde vrei tu

– O treaba noua si faina: un analizor de spatiu de culoare (color space), in care poti incarca fie o adresa de site, fie direct o poza, si care-ti va spune care sunt culorile dominante din imaginea rezultata, permitandu-ti chiar sa te joci live cu ele, pe un screenshot redus, ca sa vezi cam cum ar arata acea imagine cu culori schimbate

– Un tabel de culori web-safe, in care poti gasi destul de rapid o culoare faina si despre care sa fii sigur c-o sa mearga bine in orice browser

Un instrument de color-matching (acelasi de la color-space, prezentat separat)

O colectie de fonturi complet gatuite (atat pentru uz personal cat si comercial), frumos clasificate, si cu posibilitatea de-a le vedea live la lucru, putand alege cu ce culoare, la ce dimensiune si cu ce text sa le vezi scrise

– O colectie de poze de tip microstock, in care poti cauta ce-ti doreste sufletul, dar care de data asta sunt pe bani – eu doar ti le gasesc, tu decizi daca le cumperi de la provider

Si, pentru cine tot mai are nevoie de ajutor, am mai pregatit doua chestii:

– Un blog dedicat, in care deja am tradus si publicat tutorialele mele de profil de pe graffiti – si-n care promit sa continui buna si frumoasa traditie 😉

– O colectie de servicii dedicate

cu care sper sa pot ajuta pe cei care mai au nevoie de ajutor 😉

Ma rog, astea ultimele suna destul de comercial – dar nu mi-ar prinde rau sa mai prind niste joburi si de-aici, si-asa am pus la pamant site-ul hbfx deocamdata.

Noa, idea e: intrati pe templadix, dati un ochi, si apoi INJURATI-MA LA GREU 😉 (scrieti-mi despre ce bube ati gasit, ce credeti c-ar merge facut mai bine, ce alte chestii legate de design credeti c-ar fi fain sa mai bag etc.)

Enjoy…

min-height, min-width in toate browserele

Scriam mai demult despre cum sa rezolvi aceasta problema spinoasa a dimensiunilor minime sau maxime in unele browsere mai retarde.

Solutia propusa atunci era folosirea de expresii javascript in CSS. Nu foarte elegegant, si destul de limitat.

Intre timp am gasit o solutie mult mai simpla, eleganta si care se valideaza si mai bine. Sa zicem ca vrem sa obtinem un min-height de 400px. Cum facem? Simplu, introducem 3 proprietati css in loc de una, ca in exemplul de mai jos:

min-height: 400px;
height: 400px;
height: auto !important;

Si, miraculos, treaba functioneaza in tot ce testez eu in mod curent cand html-izez: IE6, IE7, FF, Opera, Safari. Enjoy…

Butoane (si/sau tab-uri) bogate grafic dar editabile ca text (optimizate + acum cu roll-over)

Scriam acum ceva vreme despre posibilitatea de a crea butoane bogate grafic dar editabile ca text.

Prima problema cu abordarea respectiva era una de optimizare: pentru acelasi buton trebuiau folosite 2 imagini, deci 2 requesturi diferite pe server. In timp, si pe un server mai aglomerat, orice problema de genul asta incepe sa se faca simtita si sa se ceara optimizata.

A doua problema: pe langa asta, m-am mai lovit de o problema: lipsa unui efect la roll-over.

Treaba asta m-a facut sa re-gandesc un pic abordarea intregii chestii, in felul urmator:

1. Inainte foloseam 2 tag-uri, unul in altul, sub forma:

A)
<li>
  <a>buton aici</a>
</li>

Noua abordare foloseste tot 2 tag-uri, doar ca de data asta un pic diferit:

B)
<a>buton aici<div class=end></div></a>

Noul DIV, marcat cu clasa “end”, are rolul de a defini, grafic, partea din dreapta a butonului. O sa introduc aici o schema explicativa, dupa care o sa continui cu explicatiile mai jos:

Dupa cum se vede in imaginea de mai sus, in loc sa folosim mai multe imagini, vom folosi o singura imagine, suficient de lunga incat sa acopere orice scenariu* si avand inaltimea dubla: un rand pentru starea normala si unul pentru starea de “over”.

Continue Reading >>

Expandable Menu – JS + CSS

tutorial_10.gif…or “Building An Expanding DHTML Menu With CSS and JavaScript – revisited”.

What’s this all about: a vertical menu with submenus which are hidden initially and show on rollover.

Requests:

1. On roll-over over a zero-level element, the corresponding sub-menu must appear
2. On roll-over over another zero-level element, besides the effect from point 1. any other secondary menu must hide, only the the submenu corresponding to the active roll-over must remain visible

The most elegant solution I found is in the page linked at the beginning of the article, but it was a bit too long for what I needed, so I took it, adapted it, and I got exactly what I need (see here a functioning example, with all it needs to understand it, if you look in the source).

Later edit: for a more elegant menu version (in terms of coding and approach), but less functional and without JS, read here (in Romanian).

Versiunea in Romana a acestui articol aici.

modi v2 (MouseOver DOM Inspector)

For those using Firefoxe’s Firebug, inspecting DOM elements is already a breeze. But what about Internet Explorer? The guys at slayeroffice have created a new DOM inspector that works on any browser, which is easy to install, by simply bookmarking it. It’s not as advanced as the Firebug, but it can prove extremely useful sometimes. See here

Versiunea in Romana a acestui articol aici.

CSS Hexagons

For the sleepless… a page built exclusively with CSS… even though it doesn’t look like html… guess how they did it.

Versiunea in Romana a acestui articol aici.

ACID Test

Alex shows me a mighty fine job: a test meant to show just how well implemented is the CSS support in a browser. The test starts from a rendering considered corect (reference) and you get to compare that render with the test-page as viewed in your browser. Extremely interesting for a CSS geek like me… 😀

Acid Test 2

Versiunea in Romana a acestui articol aici.

Border around empty table cells

It happens often, when working with tables, to “forget” empty cells, i.e. cells without any content at all within, not with even as much as a shy & nbsp ;. That makes them look awkward in the browser (awkward = borderless) and,most of all, to look like coding errors, which coulod become unpleasant. For those lacking the patience to fiddle again the whole html code, there’s a solution: to define the following property in the CSS code:

{ empty-cells: show }

This will force all the empty cells to SHOW the border, even if empty. (the other possible values for this property are: hide and inherit)

Versiunea in Romana a acestui articol aici.

modi v2 (MouseOver DOM Inspector)

Pentru cine foloseste firebug-ul lui FF, inspectarea elementelor din structura DOM e deja un breeze. Dar ce te faci daca vrei ceva similar pentru IE? Baietii de la slayeroffice au creat un DOM inspector care merge pe orice browser, si care se instaleaza facand pur si simplu un bookmark. Nu e chiar atat de avansat ca firebug, dar poate fi foarte util uneori. Vezi aici:

modiv2.jpg

English Version of this article here.