How to change your <iframe>'s settings.
It's very simple, you just have to put these settings in your css code between the <head></head> tags. btw. most of these settings can be used in <div> tags too.
Borders
No border at all
iframe { border:0px; }
Dashed border
iframe { border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Dotted border
iframe {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Unfortunately, these 'tricks' described above are supported by opera or mozilla firefox only.
Appearently the 'microsoft internet people' doesn't care much about css.
Absolute / Relative
Absolute
If we use it outside of a <div>, we should set as below.
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the web-page. */
left:350px; /* 350 pixels from the left of the web-page. */
}
Relative
However if we use it inside of a <div>:
iframe {
position:relative;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
}
Size
Scrollbars
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: 500px;
width: 500px;
overflow: scroll; /* if the content inside of the <iframe> is bigger than its size, scrollbars are added.*/
}
Auto-size
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: auto; /* in this case, we get rid of the overflow setting, because the height of the iframe is increased by itself.*/
width: 500px;
}
Note: 'auto' as size, works the same for the WIDTH setting.
Transparent Background
Note: this 'trick' only works on mozilla firefox. But is pretty simple anyway.
iframe { background:transparent; }
Multi-IFrame
And last but not least, if you use more than one iframe in your page, you could use different settings for each one. like this:
#one {
border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
#two {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
-------------------------------------------------
<iframe src="/img_articles/4798/1.htm" id="one"></iframe>
<iframe src="/img_articles/4798/2.htm" id="two"></iframe>
Read more: http://www.webdesign.org/html-and-css/tutorials/how-to-change-your-iframe-settings-with-css.4798.html#ixzz19Hwc71fo
It's very simple, you just have to put these settings in your css code between the <head></head> tags. btw. most of these settings can be used in <div> tags too.
Borders
No border at all
iframe { border:0px; }
Dashed border
iframe { border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Dotted border
iframe {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
Unfortunately, these 'tricks' described above are supported by opera or mozilla firefox only.
Appearently the 'microsoft internet people' doesn't care much about css.
Absolute / Relative
Absolute
If we use it outside of a <div>, we should set as below.
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the web-page. */
left:350px; /* 350 pixels from the left of the web-page. */
}
Relative
However if we use it inside of a <div>:
iframe {
position:relative;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
}
Size
Scrollbars
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: 500px;
width: 500px;
overflow: scroll; /* if the content inside of the <iframe> is bigger than its size, scrollbars are added.*/
}
Auto-size
iframe {
position:absolute;
top: 25px; /* 25 pixels from the top of the <div> tag. */
left:350px; /* 350 pixels from the left of the <div> tag. */
height: auto; /* in this case, we get rid of the overflow setting, because the height of the iframe is increased by itself.*/
width: 500px;
}
Note: 'auto' as size, works the same for the WIDTH setting.
Transparent Background
Note: this 'trick' only works on mozilla firefox. But is pretty simple anyway.
iframe { background:transparent; }
Multi-IFrame
And last but not least, if you use more than one iframe in your page, you could use different settings for each one. like this:
#one {
border-style:dashed;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
#two {
border-style:dotted;
border-color: #000; /*CHOOSE THE COLOR YOU WANT HERE */
border-top-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-bottom-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-left-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
border-right-width:1px; /*CHOOSE THE SIZE YOU WANT HERE */
}
-------------------------------------------------
<iframe src="/img_articles/4798/1.htm" id="one"></iframe>
<iframe src="/img_articles/4798/2.htm" id="two"></iframe>
Read more: http://www.webdesign.org/html-and-css/tutorials/how-to-change-your-iframe-settings-with-css.4798.html#ixzz19Hwc71fo
