Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc

moonlord · Data înscrierii: 15/Iul/2007 Mesaje: 95

Ieri m-am descis sa invat sa lucrez cu em in loc de pixels insa ceva nu imi merge si nu inteleg ce...deci am dat la body tag un font-size de 62.5%, iar apoi la divul wraper care imi tine site-ul un font-size de 1.2em(12px) iar apoi la tagul p un font-size de 1.0em. deci nu ar trebui sa fie tagul p de 12 pixels? in firefox merge insa in internet explorer imi vede textul mult mai mic

am mai incercat si sa scot de la wraper font-size-ul de 1.2em si sa il adaug direct la tagul p insa acelasi efect. :(

alte declaratii pt font-size nu am in site

NooK · Data înscrierii: 21/Iun/2007 Mesaje: 191

Depinde cum ai definit font-size-ul pentru p.
Daca l-ai definit :
p { font-size:1.0em;} atunci p are 10px // in cazul acesta parintele lui p este body si tu declari : p sa aiba font-size 100% din marimea font-size a elementului body ( care in cazul tau este 10px - 62.5% din 16 pixeli - dimensiunea de baza - )
Daca l-ai definit :
#div p {font-size:1.0em} atunci va avea 12 pixeli // mostenirea va actiona astfel : body -> 62.5% = 10px // #div -> 1.2 em => 120% din font-size a elementului parinte(body) = 12px // p -> 1.0 em => 100% font-size a elementului parinte(div) = 12px

Daca tot nu o scoti la capat posteaza si niste cod.Spor!

moonlord · Data înscrierii: 15/Iul/2007 Mesaje: 95

NooK a scris: Depinde cum ai definit font-size-ul pentru p.
Daca l-ai definit :
p { font-size:1.0em;} atunci p are 10px // in cazul acesta parintele lui p este body si tu declari : p sa aiba font-size 100% din marimea font-size a elementului body ( care in cazul tau este 10px - 62.5% din 16 pixeli - dimensiunea de baza - )
Daca l-ai definit :
#div p {font-size:1.0em} atunci va avea 12 pixeli // mostenirea va actiona astfel : body -> 62.5% = 10px // #div -> 1.2 em => 120% din font-size a elementului parinte(body) = 12px // p -> 1.0 em => 100% font-size a elementului parinte(div) = 12px

Daca tot nu o scoti la capat posteaza si niste cod.Spor!

ceva nu ii bine, l-am definit
Cod:

body {
font-size:62.5%;
}
#wraper {
font-size:1.2em;
}
p {
font-size:1.0em;
}

si in cazu de fata p are 12px nu cum zici tu 10px. stiu asta pentru ca daca inlocuiesc cu 1.0em cu 12px se afiseaza tot asa in browser`ul firefox si atuncia merge si in ie si safari.

deci el ii relativ la elementu parinte din codu html nu la cum fac eu selectu de css, nu? sau nush cum sa zic

site-u ii aicia http://www.anuntultaugratuit.com/blog poate ii ceva eroare si nu am observat eu

in safari textul se vede de 2 ori mai mare ca si in firefox.

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

eu zic ca daca se vede bine cu px, da-i cu px. nu stiu in ce masura e bine sa definesti un font in body, asta poate avea si avantaje si dezavantaje, dupa parerea mea. se poate intampla sa vrei sa schimbi mai tarziu fonturile si realizezi ca valorile din body te incurca. in plus, fonturile in procente mostenesc valorile de la elementul parinte, in cazul asta <html>.

pur si simplu - in anumite cazuri - browserele interpreteaza diferit stilurile. o solutie eficienta este scrierea de stiluri externe diferite pentru cateva dintre browserele cele mai utilizate.

vectorialpx · Trimis: Mie Aug 27, 2008 9:06 pm Titlul subiectului:

body {
font-size:62.5%;
}

pentru ce frate?!... de ce nu lasi pixeli?

browserele sunt foarte diferite, cum zice si olympia si o sa te trezesti ca in opera se vede cat unghia si in IE cat pepenele. Eu, personal, nu recomand masurarea in procente decat in cazuri extreme... cand n-ai solutie.

acum... tu stii ce nevoi ai. Bafta!

NooK · Data înscrierii: 21/Iun/2007 Mesaje: 191

Trebuie sa va contrazic.
Desi prefer exprimarea marimii font-ului in px , sa stiti ca si exprimarea in em isi are rostul ei . O chestie total ignorata la noi si anume :
daca exprimi marimea in pixeli , in IE6 , optiunea de a mari/microsa fonturile nu mai are niciun efect. De aici apar probleme : fie textul este ilizibil pentru o persoana cu probleme de vedere fie prea mare si obositor de citit pe rezolutii/monitoare mici.
Aceasta optiune va functiona corect daca font-size este exprimat in orice altceva in afara de px ( procente , em , keyword ).

Revenind la problema ta moonlord , scuze dar m-am exprimat gresit total , acum am vazut.
Definind p {font-size....} definesti o regula pentru orice <p> din document , si #div p { font-.....} , definesti aceasta regula numai pentru tag-urile <p> din acel div.

Nu conta cum defineai tagul <p> ci unde se afla acesta.

Cum ai definit tu , lucrurile ar trebui sa stea in felul urmator :
tu ai cerut ca orice <p> sa aiba font-size 1.0 em.
Daca <p> este in <div id="wraper"> , atunci <p> va avea 12 px.
Un exemplu concret :

Cod: ...
<body>
<p id="p1">Un paragraf ce mosteneste doar de la body</p>
<div id="wrap">
<p id="p2">Un paragraf ce mosteneste de la #wrap -> care la randul lui mosteneste de la body<p>
<div id="wrap2">
<p id="p3">Acest paragraf mosteneste de la #wrap2 -> care la randulu lui mosteneste de la #wrap1 -> care la randul lui mosteneste de la body<p>
</div>
</div>
</body>

...

body {
font-size:62.5%; // 10px
}
#wrap {
font-size:1.2em; // orice text vom scrie in #wrap va avea 12px ( 10*120/100 )
}

#wrap2 {
font-size:2em; // orice text scris in acest div va avea 24px ( 12*200/100 )
}

p {
font-size:2em; // in functie de div-ul in care se afla p va avea diferite valori
}

p1 -> 20px ( 10 x 200/100 )
p2 -> ( se afla in #wrap unde font-size este 12 px ) => 2 em = 24 px
p3 -> ( se afla in #wrap2 unde font-size este 24px ) => 2 em = 48px

Si o f simpla dar folositoare formula matematica usor de tinut minte :
a = nr de pixeli pe care doresti sa ii obtii pentru elementul copil
b = numarul de pixeli ai elementului parinte

a / b = c

c = valoarea in em a elementului copil

Vrei ca p sa aiba font-size 15 px , stii ca este continut in #div care are font-size 20px => 15 / 20 = 0.75 -> valoarea ta va fi .75em.
Sper ca ai inteles ce ti-am scris si iti va fi de folos.Spor!

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

din cate am recitit, nici eu nici vector nu ne-am referit la em, ci la fontul definit in procente in body. Nook, calculele tale sunt frumoase, insa problema este ca nu toate browerele le (re)cunosc!

sunt de acord cu tine ca fiecare caz se analizeaza contextual, in functie de cerintele concrete ale designului, insa e mult mai flexibil sa ai valorile fontului definite pe fiecare element, dar pe o ierarhie inferioara fata de <body>.

tu spui ca <p> "in functie de div-ul in care se afla p va avea diferite valori", ceea ce in cazul anumitor browsere nu e valabil (am patit-o de cateva ori :D).

ps spuneti-mi si mie dk se poate, cum ati ajuns la concluzia ca:

Cod:
body {
font-size:62.5%; // 10px
}
in cazul asta 62,5% fata de ce, dat fiind ca parintele este html?

NooK · Data înscrierii: 21/Iun/2007 Mesaje: 191

@ olympia - voi spuneati ca fontul poate bine-mersi sa fie exprimat in pixeli , asta tineam sa contrazic eu, de ce nu e indicat sa faci asta. Ideea era ca fontul sa fie definit in em in tot stylesheet-ul , dupa ce avem o baza , mai exact dupa ce stim exact cati pixeli are font-size pe elementul body. De acolo nevoie de a folosi procente.
Browserele au default setat font-size:medium care este in jur de 16px. De aici 62.5% .

moonlord · Data înscrierii: 15/Iul/2007 Mesaje: 95

@nook, am inteles, dar am alta nedumerire. De ce in internet explorer 6 se vede textul mai mic cand este definit in em? deci daca in html`u tau faci un paragraf de 12px (definit in em) in internet explorer se vede mai mic. dar daca il dai in px (12px) se vede normal.

@olympia: dupa cum zicea nook "Browserele au default setat font-size:medium care este in jur de 16px. De aici 62.5%", asta este echivalentul a 10 px. de aicia imi este mai ushor sa fac calculele in em pentru restul documentului. de ex. vreau 12 px, pun 1.2em...vreau 14 px pun 1.4 em s.a.(tinand cont de elementul parinte).

Amenthes · Data înscrierii: 12/Dec/2005 Mesaje: 620

Internet Explorer 6 sufera de niste bug-uri cand folosesti em ca unitate. Eu folosesc numai procente.

http://www.google.ro/search?client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&channel=s&hl=ro&q=internet+explorer+em+bug&meta=&btnG=C%C4%83utare+Google

olympia · Data înscrierii: 26/Mai/2008 Mesaje: 179

recomandarea este de a pastra pe root 100% la font-size. sunt mai multe combnatii care pot afecta teoria cu 62,5% (e.g, rezolutia standard e de 96 dpi, dar monitoarele HR pot avea default setting 120 dpi, ceea ce face fontul sa para mai mic - browserele compenseaza diferenta dk detecteaza corect rezolutia etc.).

insa problema asta chiar poate fi complexa, din mai multe motive (nu mai bat apa in piua acu').

important e ca fiecare sa isi dezvolte propria strategie in aceasta privinta, pana la urma, nu exista o reteta universala.

NooK · Data înscrierii: 21/Iun/2007 Mesaje: 191

Apropo stiati ca ieri , 27 Aug, s-au implinit 7 ( SAPTE ) ani de la lansarea minunatului IE6 ? :)

Amenthes · Data înscrierii: 12/Dec/2005 Mesaje: 620

Si tot ieri s-a lansat IE8 beta 2 :)

PHPRomania Bot · Mie Dec 26, 2007 7:01 pm