Are you searching for best website designer in Hyderabad, India? VaraDesigns is the best website designers Hyderabad, India, specialized in eCommerce, custom website design, Logo designing, flash, templates, SEO and web hosting.
Website Designer Hyderabad
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
Aucun commentaire:
Enregistrer un commentaire