Opera si imaginile relative

Nu am prea apucat să notez pe aici chestii legate de ceea ce fac, dar este momentul să încep să fac asta în perspectiva lansării noului domeniu pe care voi începe în curînd să scriu mai multe despre webdesign, software code şi seo.

Pentru început trebuie să menţionez că nu prea folosesc Opera. Pînă acum nu am folosit-o decît cel mult ocazional, nefiind unul dintre navigatoarele mele obişnuite. Recent am început să am de-a face cu el pentru că unul dintre clienţi îl foloseşte în mod constant (e vorba de o întreagă echipă), aşa că am avut deosebita “plăcere” să observ că imaginile din pagina pe care o făcusem nu erau afişate cum trebuie. Dacă în Firefox, Chrome şi Internet Explorer apăreau exact unde trebuie, unde se dorea, în Opera cădeau (dacă se poate spune aşa mutarea în partea de jos etichetei div în care erau introduse) din poziţia dorită.

Motivul este simplu: Opera are o “mică” problemă cu imaginile la care este atribuită proprietatea position: relative. Nu ştiu dacă este un bug sau o scăpare intenţionată, dar aşa ceva poate da peste cap afişarea unei pagini care pare în regulă. Soluţia este simplă: se stabileşte position: absolute şi, folosind proprietăţile top şi left se poziţionează în interiorul etichetei div acolo unde doriţi.

În CSS există 4 modalităţi de poziţionare a oricărui element dintr-o pagină web: static, absolute, relative şi fixed. Diferenţele de poziţionare sînt următoarele:

poziţia statică (position: static) este poziţia predefinită a elementului, iar dacă nu este stabilită o altă poziţionare vafi afişată pe ecran pe baza locului în care apare în documentul html. Dacă veţi dori să aplicaţi asupra elementului alte proprietăţi precum left şi top (stabileşte poziţia în funcţie de marginea din stînga şi de sus a elementului superior) ele vor fi ignorate.

poziţia absolută (position: absolute) este cea mai facilă poziţie: elementul este scos din poziţia sa în cadrul celorlalte elemente ale paginii (dar fără să le afecteze în vreun fel) şi este poziţionat pe o locaţie exactă de pe pagină. Pot fi aplicate alte proprietăţi precum left, top, right şi bottom (stabileşte poziţia în funcţie de marginea din stînga, de sus, din dreapta şi de jos a elementului superior).

poziţia relativă (position: relative) are ca reper poziţia în care este elementul în cadrul elementelor încarcate pe pagină şi foloseşte left, top, right şi bottom pentru o poziţionare mai precisă.

poziţia fixă (position: fixed) este foarte asemănătoare cu poziţia absolută, este calculată în funcţie de marginea ecranului dar elementele fixe rămîn aşa mereu. Toate celelalte elemente vor fi afişate deasupra lor (de exemplu: un timbru-watermark sau imaginea dintr-un fundal).

Articol preluat de aici.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.