ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸದಲ್ಲಿ IFrames ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ನಿಮ್ಮ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ನೀವು ಅಂಶವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವಾಗ, ಅದರಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಎರಡು ಅವಕಾಶಗಳಿವೆ:
- ನೀವು ಶೈಲಿ IFRAME ಅನ್ನು ಸ್ವತಃ ಮಾಡಬಹುದು.
- ನೀವು IFRAME (ಕೆಲವು ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ) ಒಳಗೆ ಪುಟವನ್ನು ಶೈಲಿ ಮಾಡಬಹುದು.
ಶೈಲಿಗೆ IFRAME ಎಲಿಮೆಂಟ್ಗೆ ಸಿಎಸ್ಎಸ್ ಬಳಸಿ
ನಿಮ್ಮ ಐಫ್ರೇಮ್ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ನೀವು ಪರಿಗಣಿಸಬೇಕಾದ ಮೊದಲನೆಯದು ಐಫ್ರೇಮ್ ಸ್ವತಃ. ಹೆಚ್ಚಿನ ಬ್ರೌಸರ್ಗಳು ಹೆಚ್ಚುವರಿ ಶೈಲಿಗಳಿಲ್ಲದಿದ್ದರೂ ಐಫ್ರೇಮ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆಯಾದರೂ, ಅವುಗಳನ್ನು ಸ್ಥಿರವಾಗಿಡಲು ಕೆಲವು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಲು ಇನ್ನೂ ಒಳ್ಳೆಯದು.
ಕೆಲವು ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳು ಇಲ್ಲಿವೆ: ನಾನು ಯಾವಾಗಲೂ ನನ್ನ ಐಫ್ರೇಮ್ನಲ್ಲಿ ಸೇರಿಸುತ್ತೇನೆ:
- ಅಂಚು: 0;
- ಪ್ಯಾಡಿಂಗ್: 0;
- ಗಡಿ: ಯಾವುದೂ ಇಲ್ಲ;
- ಅಗಲ: ಮೌಲ್ಯ ;
- ಎತ್ತರ: ಮೌಲ್ಯ ;
ನನ್ನ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಹೊಂದಿದ ಗಾತ್ರಕ್ಕೆ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ. ಶೈಲಿಗಳಿಲ್ಲದೆ ಚೌಕಟ್ಟಿನ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಶೈಲಿಯಲ್ಲಿರುವ ಮೂಲಭೂತ ಅಂಶಗಳ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ನೀವು ನೋಡಬಹುದು ಎಂದು, ಈ ಶೈಲಿಗಳು ಹೆಚ್ಚಾಗಿ iframe ಸುಮಾರು ಅಂಚನ್ನು ತೆಗೆದುಹಾಕಿ, ಆದರೆ ಅವರು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳು ಅದೇ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್, ಮತ್ತು ಆಯಾಮಗಳೊಂದಿಗೆ iframe ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ನೀವು ಓವರ್ಫ್ಲೋ ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂದು HTML5 ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ, ಆದರೆ ಅದು ವಿಶ್ವಾಸಾರ್ಹವಲ್ಲ. ಹಾಗಾಗಿ ನೀವು ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಅಥವಾ ಬದಲಾಯಿಸಲು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಐಫ್ರೇಮ್ನಲ್ಲಿ ಸ್ಕ್ರೋಲಿಂಗ್ ಗುಣಲಕ್ಷಣವನ್ನು ನೀವು ಬಳಸಬೇಕು. ಸ್ಕ್ರೋಲಿಂಗ್ ಆಟ್ರಿಬ್ಯೂಟ್ ಬಳಸಲು, ಅದನ್ನು ಇತರ ಗುಣಲಕ್ಷಣದಂತೆ ಸೇರಿಸಿ ನಂತರ ಮೂರು ಮೌಲ್ಯಗಳಲ್ಲಿ ಒಂದನ್ನು ಆಯ್ಕೆ ಮಾಡಿ: ಹೌದು, ಇಲ್ಲ, ಅಥವಾ ಸ್ವಯಂ. ಹೌದು, ಅವರು ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ಯಾವಾಗಲೂ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ಸೇರಿಸಲು ಬ್ರೌಸರ್ಗೆ ಹೇಳುತ್ತದೆ. ಅಗತ್ಯವಿರುವ ಅಥವಾ ಇಲ್ಲವೇ ಎಂದು ಎಲ್ಲಾ ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದಿಲ್ಲ.
ಸ್ವಯಂ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿರುತ್ತವೆ ಮತ್ತು ಸ್ಕ್ರಾಲ್ ಬಾರ್ಗಳು ಅಗತ್ಯವಿದ್ದಾಗ ಅವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ಅವುಗಳು ಇಲ್ಲದಿರುವಾಗ ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.
ಸ್ಕ್ರೋಲಿಂಗ್ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವುದನ್ನು ಹೇಗೆ ಮಾಡುವುದು ಎಂಬುದು ಇಲ್ಲಿವೆ:
ಸ್ಕ್ರೋಲಿಂಗ್ = "ಇಲ್ಲ" >
ಇದು ಒಂದು iframe ಆಗಿದೆ.
HTML5 ನಲ್ಲಿ ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಆಫ್ ಮಾಡಲು ನೀವು ಓವರ್ಫ್ಲೋ ಆಸ್ತಿ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಆದರೆ ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನೀವು ನೋಡುವಂತೆ ಇದು ಇನ್ನೂ ಎಲ್ಲ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ವಿಶ್ವಾಸಾರ್ಹವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಓವರ್ ಫ್ಲೋ ಆಸ್ತಿಯೊಂದಿಗೆ ನೀವು ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ಸ್ಕ್ರೋಲಿಂಗ್ ಮಾಡುವುದನ್ನು ಹೇಗೆ ನೋಡುತ್ತೀರಿ:
style = "overflow: scroll;" >
ಇದು ಒಂದು iframe ಆಗಿದೆ.
ಸ್ಕ್ರೋಲಿಂಗ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಓವರ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಆಫ್ ಮಾಡಲು ಯಾವುದೇ ಮಾರ್ಗವಿಲ್ಲ .
ಅನೇಕ ವಿನ್ಯಾಸಕರು ತಮ್ಮ ಐಫ್ರೇಮ್ಗಳು ಅವರು ಇರುವ ಪುಟದ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಮಿಶ್ರಣ ಮಾಡಲು ಬಯಸುತ್ತಾರೆ, ಆದ್ದರಿಂದ ಓದುಗರು ಇಫ್ರೇಮ್ಗಳು ಸಹ ಇರುವುದನ್ನು ತಿಳಿದಿರುವುದಿಲ್ಲ. ಆದರೆ ನೀವು ಅವುಗಳನ್ನು ಎದ್ದು ಕಾಣುವಂತೆ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಗಡಿಗಳನ್ನು ಸರಿಹೊಂದಿಸುವುದು ಇದರಿಂದಾಗಿ iframe ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ತೋರಿಸುತ್ತದೆ. ಗಡಿ ಶೈಲಿಗೆ ಗಡಿ ಶೈಲಿ ಆಸ್ತಿ (ಅಥವಾ ಸಂಬಂಧಿತ ಗಡಿ-ಮೇಲಿನ, ಗಡಿ-ಬಲ, ಗಡಿ-ಎಡ, ಮತ್ತು ಗಡಿ-ಕೆಳಗೆ ಗುಣಲಕ್ಷಣಗಳು) ಅನ್ನು ಬಳಸಿ:
iframe {
ಗಡಿ-ಮೇಲಿನ: # c00 1px ಚುಕ್ಕೆಗಳು;
ಗಡಿ-ಬಲ: # c00 2px dotted;
ಗಡಿ-ಎಡ: # c00 2px ಚುಕ್ಕೆಗಳು;
ಗಡಿ-ಕೆಳಗೆ: # c00 4px ಚುಕ್ಕೆಗಳು;
}
ಆದರೆ ನಿಮ್ಮ ಶೈಲಿಗಳಿಗಾಗಿ ಸ್ಕ್ರೋಲಿಂಗ್ ಮತ್ತು ಅಂಚುಗಳೊಂದಿಗೆ ನೀವು ನಿಲ್ಲಿಸಬಾರದು. ನಿಮ್ಮ ಐಫ್ರೇಮ್ಗೆ ನೀವು ಬಹಳಷ್ಟು ಇತರ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಈ ಉದಾಹರಣೆಯು CSS3 ಶೈಲಿಗಳನ್ನು ಐಫ್ರೇಮ್ ನೆರಳು, ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ನೀಡಲು ಬಳಸುತ್ತದೆ ಮತ್ತು 20 ಡಿಗ್ರಿಗಳನ್ನು ಸುತ್ತುತ್ತದೆ.
iframe {
ಅಂಚು-ಮೇಲಿನ: 20px;
ಅಂಚು-ಕೆಳಗೆ: 30px;
-ಮೋಜ್-ಗಡಿ-ತ್ರಿಜ್ಯ: 12 px;
-ವೆಬ್ಕಿಟ್-ಗಡಿ-ತ್ರಿಜ್ಯ: 12 px;
ಗಡಿ-ತ್ರಿಜ್ಯ: 12 px;
-moz- ಬಾಕ್ಸ್-ನೆರಳು: 4px 4px 14px # 000;
-ವೆಬ್ಕಿಟ್-ಬಾಕ್ಸ್-ನೆರಳು: 4 ಪಿಎಕ್ಸ್ 4 ಪಿಪಿಎಸ್ 14px # 000;
ಬಾಕ್ಸ್-ನೆರಳು: 4 px 4 px 14px # 000;
-ಮೊಜ್-ರೂಪಾಂತರ: ತಿರುಗಿಸು (20 ಡಿಗ್ರಿ);
-ವೆಬ್ಕಿಟ್-ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (20 ಡಿಗ್ರಿ);
-ಓ ರೂಪಾಂತರ: ತಿರುಗಿಸಿ (20 ಡಿಗ್ರಿ);
-ms- ಮಾರ್ಪಾಡು: ತಿರುಗಿಸಿ (20 ಡಿಗ್ರಿ);
ಶೋಧಕ: ಪ್ರೊಜಿಡ್: DXImageTransform.Microsoft.BasicImage (ಸರದಿ = .2);
}
Iframe ಪರಿವಿಡಿಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು
ಒಂದು iframe ವಿಷಯಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು ಕೇವಲ ಯಾವುದೇ ವೆಬ್ ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು. ಆದರೆ, ಪುಟವನ್ನು ಸಂಪಾದಿಸಲು ನೀವು ಪ್ರವೇಶ ಹೊಂದಿರಬೇಕು . ನೀವು ಪುಟವನ್ನು ಸಂಪಾದಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೆ (ಉದಾಹರಣೆಗೆ, ಇದು ಮತ್ತೊಂದು ಸೈಟ್ನಲ್ಲಿದೆ).
ನೀವು ಪುಟವನ್ನು ಸಂಪಾದಿಸಬಹುದಾದರೆ, ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿನ ಯಾವುದೇ ವೆಬ್ ಪುಟವನ್ನು ನೀವು ಶೈಲಿ ಮಾಡುವಂತೆ ನೀವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಶೀಟ್ ಅಥವಾ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬಹುದು.