Peste o astfel de perioadă lungă de impunere pentru prima dată astăzi, am avut de a face cu necesitatea de a plasa pe pagina, o unitate fixă (folosind poziția CSS-proprietate: fix), care ar fi la pagina de defilare așezat întotdeauna în același loc a ferestrei browser-ului.
Pentru informații cu privire la acest subiect, am, desigur, citit pe diverse bloguri și forumuri. Dar toate deciziile pe care le-am cunoscut, descrie un pic ceea ce am nevoie. Ei descriu cum să se stabilească unitatea în raport cu marginea ferestrei browser-ului, de exemplu, bara laterală din stânga sau în antet.
Cu mine a fost o sarcină ușor diferită. Există un bloc de bază părinte cu o lățime fixă, aliniată la centrul ferestrei (margine: 0 auto). Și avem nevoie de dreptul acestui bloc este plasată o unitate fixă, adică, acesta nu ar trebui să fie poziționat pe marginea ferestrei browser-ului, și de la unitatea principală. Aici este un exemplu gata. din care vorbesc.
Mai jos vă spun cum am pus în aplicare, cu următoarele caracteristici principale:
- în primul rând. cu speranța că cineva este util;
- pe de altă parte. ca pat de copil în sine pentru viitor (sau scrierea unui post, pentru a consolida materialul, ala „repetiție - mama învățării“, experiența mea arată că scrierea un post cu decizia oricărui necunoscut pentru mine până la această sarcină foarte bine să ne amintim acest lucru este decizia);
- În al treilea rând. cu speranța că cineva va oferi o soluție mai elegantă.
Avem urmatoarea structura de bază:
Avem următoarele stiluri de bază și blocuri de conținut:
Ie avem o lățime de container principal 885px, situat în centrul ferestrei, sunt prezentate mai jos 642px de conținut, care va fi amplasat pe partea stângă și 243px la dreapta alocari noastre o lățime fixă de 240 de pixeli unitate. De fapt, acest lucru nu identificator #wrapper.
Vreau să se concentreze asupra parametrilor #container ID. utilizat pentru blocul cu conținutul principal. Acesta ar trebui să indice în mod necesar nivelul stratului de mai sus (aici - z-index: 10), decât stratul cu o unitate fixă (acest lucru în conformitate cu condițiile din exemplul meu, în alte cazuri, aceste lucruri ar putea să nu fie necesară), în caz contrar va fi imposibil să FireFox'e evidenția text în această bloca în partea din înălțimea egală cu înălțimea blocului fix.
bloc pentru a fi capabil de a lega blocul reținut la conținutul principal, am mai întâi să se păstrat de poziționare corespunzătoare (poziția: fix), care se întinde pe întreaga lățime a ferestrei browser-ului, și apoi a pus-o un alt bloc la care a aplicat poziția absolută în raport cu unitatea de bază fixă, adică, .E. a primit următoarele:
Cules proprietăți de indentare prin stânga: 323px; pentru a bloca .fixed. centrat în raport cu fereastra browser-ului (margin: 0 auto;), m-am mutat la blocul reținut proiectat loc pentru ea.
Ca rezultat, am primit ceea ce am vrut. A se vedea exemplele descrise mai sus mai sus.
Acest exemplu funcționează bine în următoarele browsere: Opera, Firefox, Safari, IE7, dar nu funcționează în ...
Internet Explorer 6
Ei bine, așa cum fără ea. ) Auto-Banner, cameră pentru fumători nu se poate imagina că există o valoare a poziției: fix. deci din nou, este necesar să patch-uri gaura propriile sale scripturi Java.
Asta e ceea ce avem:
Am explica ce sunt necesare proprietăți stânga: 50%; și marja-stânga: -321px;. Faptul este că, dacă utilizați aceeași marginea din stânga, și că pentru alte browsere, (stânga: 323px;), unitatea fixă în IE6 se comportă incorect - îngustarea ferestrei browser-ului, se mută spre dreapta de la unitatea principală. Prin urmare, folosind stânga: 50%; (Această proprietate este crucial aici revelat „la întâmplare“) și următoarea adâncitura negativ suplimentar se întoarce la blocul destinat acestuia.
Toate. Acum, în IE6 vom vedea același rezultat ca și în alte browsere.
Cu toate acestea, dacă te uiți la exemplul din browser-ul, veți observa următoarele artefacte - atunci când derulați unitatea pagina zvâcnire urât. Pentru a rezolva acest neajuns, este necesar să se atribuie corpul etichetei o imagine de fundal transparent, cu o poziționare fixă, și anume ca aceasta:
Ceea ce este interesant, nu este chiar necesar să aibă imagini pixel.gif pe server, pur și simplu scrie acest lucru pentru a spasm dispărut.
Din păcate, nu este întotdeauna posibil să utilizați această remediere rapidă, deoarece fundalul corpului poate fi ocupat deja acest element de design site-ul. Apoi, acest păcat va fi pentru IE6.
Asta e tot ce am vrut să spun în acest articol.
Un mare cadou pentru ziua de naștere băiat - jucării Lego. care într-o gamă largă de magazin on-line «Lego pentru toți„. Livrarea se va desfășura atât în România și CSI.