Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
website promotion banner
eturnkeys
Your Ad Here
IFrames
by Lindsay Coome
Transparent IFrames
by Lindsay Coome
Inline Frames
by Depiction.net
Can I Optimize A Site Designed With Frames?
by mr seo
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials How To Change Your Iframe Settings With Css
rss

How To Change Your Iframe Settings With Css

Author: ldp More by this author

Added: June 02, 2006 Rating:  Average Rating: 2.75 Votes: 51 Position: 10722 of 13476Average Rating: 2.75 Votes: 51 Position: 10722 of 13476Average Rating: 2.75 Votes: 51 Position: 10722 of 13476Average Rating: 2.75 Votes: 51 Position: 10722 of 13476Average Rating: 2.75 Votes: 51 Position: 10722 of 13476 Level: Experienced Software:  DreamweaverGoLiveFrontPage

How To Change Your Iframe Settings With CssHow 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="1.htm" id="one"></iframe>
<iframe src="2.htm" id="two"></iframe>

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


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "How To Change Your Iframe Settings With Css"