Razumevanje kako IFrames radi u dizajnu web sajta
Kada ugradite element u svoj HTML , imate dvije mogućnosti da dodate stilove CSS- a:
- Možete sami oblikovati IFRAME.
- Možete stvoriti stranicu unutar IFRAME (pod određenim uslovima).
Korišćenje CSS-a za stil IFRAME Elementa
Prva stvar koju treba uzeti u obzir prilikom stajanja vaših iframa je IFRAME sama. Dok većina pretraživača uključuje iframe bez mnogo dodatnih stilova, i dalje je dobra ideja da dodate neke stilove kako bi ih držali dosledni.
Evo nekih CSS stilova koje uvek uključujem na moje iframe:
- marža: 0;
- padding: 0;
- granica: nema;
- širina: vrijednost ;
- visina: vrijednost ;
Sa širinom i visinom postavljenim na veličinu koja se uklapa u moj dokument. Evo primera kadra bez stilova i jedan sa osnovnim stilovima. Kao što vidite, ti stilovi uglavnom samo uklanjaju granicu oko iframe-a, ali takođe obezbeđuju da svi pregledači prikažu taj iframe sa istim marginama, padding-om i dimenzijama.
HTML5 preporučuje da koristite svojstvo prelivanja da uklonite trake za pomicanje, ali to nije pouzdano. Dakle, ako želite da uklonite ili promenite trake za pomeranje, trebalo bi da koristite i skrolovanje atributa u vašem iframe-u. Da biste koristili atribut skrolovanja, dodajte ga kao bilo koji drugi atribut, a zatim odaberite jednu od tri vrijednosti: da, ne ili auto. da govori pretraživaču da uvek uključuje trake za pomicanje čak i ako ih nije potrebno. ne kaže da uklone sve trake za pomeranje bilo da je potrebno ili ne.
auto je podrazumevano i uključuje trake za pomicanje kada je potrebno i uklanja ih kada nisu.
Evo kako da isključite skrolovanje pomoću skrolovanja atributa:
skrolovanje = "ne" >
Ovo je iframe.
Da biste isključili skrolovanje u HTML5-u, trebalo bi da koristite svojstvo prelivanja. Ali, kao što možete videti u ovim primjerima , ne funkcioniše pouzdano u svim pretraživačima.
Evo kako biste stalno uključivali skrolujući svojstvo preopterećenja:
style = "overflow: scroll;" >
Ovo je iframe.
Ne postoji način za potpuno isključivanje skrolovanja sa svojstvenim prelivom.
Mnogi dizajneri žele da se njihovi asimetri uklopi u pozadinu stranice na kojoj se nalaze, tako da čitaoci ne znaju da su čak i kadri. Ali takođe možete dodati stilove kako bi ih istakli. Prilagođavanje granica tako da se iframe pojavi lakše. Samo koristite svojstvo stila granice (ili je to povezano sa graničnom linijom, graničnom desnom, graničnom levom i graničnom dnu) da biste oblikovali granice:
iframe {
border-top: # c00 1px tačkasto;
granična desna: # c00 2px tačkasta;
border-left: # c00 2px tačkasto;
border-bottom: # c00 4px tačkasto;
}
Ali ne bi trebalo da prestanete sa skrolovanjem i granicama za svoje stilove. Možete da primenite mnogo drugih CSS stilova u svoj okvir. Ovaj primjer koristi CSS3 stilove da bi iframe-u bio sjenak, zaobljeni ugao i okretao ga za 20 stepeni.
iframe {
margin-top: 20px;
margin-bottom: 30px;
-moz-granica-radijus: 12px;
-webkit-granica-radijus: 12px;
granični radijus: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transformirati: rotirati (20deg);
-webkit-transform: rotirati (20deg);
-o-transformirati: rotirati (20deg);
-ms-transformacija: rotirati (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotacija = .2);
}
Stiliranje sadržaja Iframe
Stajanje sadržaja iframe-a je isto kao i stilizacija bilo koje druge web stranice. Ali, morate imati pristup uređivanju stranice . Ako ne možete uređivati stranicu (na primjer, to je na drugoj lokaciji).
Ako možete urediti stranicu, onda možete dodati spoljašnji stilski stil ili stilove u dokumentu baš kao što biste stajali na bilo kojoj drugoj web stranici na vašoj web lokaciji.