IFrames-ek webgune diseinuan nola funtzionatzen duen ulertu
Zure HTMLan elementu bat txertatzen duzunean, bi aukera dituzu CSS estiloak gehitzeko:
- IFRAME estilo bera alda dezakezu.
- IFRAMEren barruan orrialdearen estiloa (baldintza jakin batzuetan) estilo dezakezu.
IFRAME Element estiloko CSS erabiltzea
Lehenik eta behin, zure IFrames estiloa IFRAME da. Nabigatzaile gehienek iframes estilo estraerik ez duten bitartean, ideia ona da estilo batzuk gehitzea koherentea izan dadin.
Hona hemen nire IFramen beti sartzen diren CSS estiloak:
- marjina: 0;
- betegarria: 0;
- mugan: none;
- zabalera: balioa ;
- altuera: balioa ;
Nire dokumentuan egokitzen den tamaina zehazten duen zabalera eta altuera. Hona hemen estilo ezberdinetako markoaren adibide eta bat oinarrizko estiloak dituztenak. Ikusten duzun bezala, estilo horiek gehienak iframe inguruan mugatzen dute, baina nabigatzaile guztiek marra, marjina eta dimentsio berdina duten iframe bistaratzen dute.
HTML5-k gomendatzen du desplazamendu-propietatea erabiltzen duzula korritze-barrak kentzeko, baina hori ez da fidagarria. Beraz, korritze tabernak kendu edo aldatu nahi badituzu, korrespondentzia-atributua erabili behar duzu iframean ere. Korritze-atributua erabiltzeko, gehitu beste edozein atributu bezala eta aukeratu hiru balioetariko bat: bai, ez edo auto. Bai arakatzaileari esaten dio korritze tabernak beti sartzen ez badira ere. korritze-barra guztiak ezabatu behar ez diren ala ez adierazten du.
auto lehenetsia da eta korritutako barrak biltzen ditu beharrezkoak direnean eta horiek ez direnean kentzen ditu.
Hemen desplazamendua desplazatzeko desplazamenduaren atributua da:
scrolling = "ez" >
Hau da iframe bat.
HTML5-ko korritze-barra desaktibatzeko, gainezkatze-propietatea erabili behar duzu. Baina adibide hauetan ikus dezakezunez, ez du oraindik fidagarria nabigatzaile guztietan.
Hemen nola desplazatzen den denbora guztian gainezkatzeko propietatearekin:
style = "overflow: scroll;" >
Hau da iframe bat.
Ez dago modu desplazamendua desbideratzeko propietatearekin guztiz desbideratzeko.
Askok diseinatzaileek iframeak nahastu nahi dituzte orriaren atzeko planoarekin, irakurleek ez dakite iframeak ere badira. Baina estekak ere gehitu ditzakezu nabarmentzeko. Mugak doitzea errazagoa bada iframe errazago agertzea. Just erabili ertzaren estiloaren propietatea (edo erlazionatutako mugako goialdean, mugan eskuinera, mugan ezkerrera eta mugako beheko propietateak) ertzak estilatzeko:
iframe {
border-top: # c00 1px puntuz;
mugako eskuinera: # c00 2px puntuz;
mugan ezkerrera: # c00 2px puntuz;
mugan behean: # c00 4px puntuz;
}
Baina ez duzu mugitu zure estiloko korrituk eta mugak. Beste CSS estilo asko aplikatu ahal izango dituzu zure iframean. Adibide honek CSS3 estiloak erabiltzen ditu iframe itzalak, ertzeko biribilduak eta 20 gradu biratu.
iframe {
margin-top: 20 px;
marjina-hondoa: 30 px;
-moz-border-radius: 12 px;
-webkit-border-radius: 12px;
ertz-erradioa: 12 px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
lauki-itzala: 4px 4px 14px # 000;
-moz-eraldatu: biratu (20deg);
-webkit-eraldatu: biratu (20deg);
-o-eraldatu: biratu (20deg);
-ms-eraldatu: biratu (20deg);
iragazkia: progid: DXImageTransform.Microsoft.BasicImage (biraketa = .2);
}
Iframe Edukiak estilatzea
Iframe baten edukiak estilizatzea beste edozein web orri estiloan bezala da. Baina, orrialdean editatzeko sarbidea izan behar duzu . Orrialdea editatu ezin baduzu (adibidez, beste gune batean dago).
Orrialdea editatu ahal izateko, kanpoko estilo-orri edo estilo bat gehi dezakezu dokumentuan eskuineko beste edozein web orrialdetan estiloan bezala.