Home HTML and CSS Tutorials How To Change Your Iframe Settings With Css

How To Change Your Iframe Settings With Css

Author: ldp More by this author

Added: Jun 02, 2006 Rating:

Level: Experienced Software: Dreamweaver

How To Change Your Iframe Settings With Css

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 */
}

-------------------------------------------------

If you need some help with any example or anything. feel free to contact me: estimado (at) gmail.com

Author's URL: ldp