TheCatapult Posted June 9, 2012 Share Posted June 9, 2012 Hello! For example I have a <div> in my site .padding {background color: yellow;width: 340 px;height: 260 px;padding: 10 px;} <div class="padding"><iframe "<' ....link '>"width: 240px; height: 320px;></iframe></div> I found that the background size are increasing, why? All I want is to have the <iframe > on center. How? 1 Link to comment Share on other sites More sharing options...
niche Posted June 9, 2012 Share Posted June 9, 2012 Since you have a width, margin: 0 auto; Link to comment Share on other sites More sharing options...
eTianbun Posted June 9, 2012 Share Posted June 9, 2012 There are lots of errors in you code... Link to comment Share on other sites More sharing options...
eTianbun Posted June 9, 2012 Share Posted June 9, 2012 (edited) HERE is an example:.padding{background-color: yellow;width: 340px;height: 260px;padding:10px} <div class="padding"><iframe src="example.com" style="width: 240px; height: 250px; margin:0 auto;"></iframe></div> Edited June 9, 2012 by CodeName Link to comment Share on other sites More sharing options...
TheCatapult Posted June 9, 2012 Author Share Posted June 9, 2012 (edited) Hello What's the problem with my code and the <iframe> can't be centered. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">#wrapper {margin: 0 auto; width: 768px;}.left { float: left;}.right {float:right;}.right1 {float:left;max-width:768px;}.stream {float:right;width: 320px; height: 265px;background-image:url('Images/stream-back.gif');padding: 9.5px 10px;margin:0 auto;}.ifreame {margin:10px;}.slide {float:left;width: 380px; height: 400px;background-image:url('Images/stream-back.gif');overflow:hidden;padding:10px;;}.right1 {float:left;max-width:768px;}.right2 {float:right;} .Banner {width: 768px; height: 244px;background-color:#CCff00}.cat1 {width: 768px; height: 40px;} /* close the curly bracket */.test {width: 768px; height: 37px;color: #FFFF00;}.ifreame {margin:10px;} </style></head><body><div id="wrapper"><div class="Banner"><img border="0" src="Images/banner.png" alt="Programs" width="768" height="244"></img></div><div class="cat1"><img border="0" src="Images/home.gif" alt="Programs" width="153" height="40"></img><img border="0" src="Images/sched.gif" alt="Programs" width="153" height="40"></img><img border="0"src="Images/about.gif" alt="Programs"width="153" height="40"></img><img border="0"src="Images/contact.gif"alt="Programs" width="153" height="40"></img><img border="0" src="Images/mission.gif" alt="Programs" width="153" height="40"></img></div> <div class="test"><div class="left"><div class="slide"></div></div><div class="right"><div><img border="0" src="Images/watch-sign.jpg" alt="Programs" width="338" height="75"></img></div><div class="stream"><iframe src="http://www.ustream.tv/embed/10214266" width="320" height="270" scrolling="no" frameborder="0" style="border: 0px none transparent; margin:0 auto;"></iframe></div></div></div></div> </body></html> Edited June 9, 2012 by MisterCatapult Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2012 Share Posted June 9, 2012 You have placed the iframe in a floated right element, with no set width, that will shrink to the width of its content (the iframe) and will placed to the right. The iframes margin 0 auto; won't work in this case as it need a parent element that is larger and centred itself. Link to comment Share on other sites More sharing options...
eTianbun Posted June 9, 2012 Share Posted June 9, 2012 (edited) There are lots of errors in your code... Also Note that <img/> is an empty element and don't have such thing as </img>. Concerning your iframe, it's not centered, because the width of the <iframe>, is thesame as the width of it container (320px). Edited June 9, 2012 by CodeName Link to comment Share on other sites More sharing options...
TheCatapult Posted June 10, 2012 Author Share Posted June 10, 2012 If I would increase the <div> container, the background would repeat; the original size of the background is 340 x 284 px. CodeName, so I should rename </img> to <img/>? dsonseuk, please help me! Thanks a lot! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 10, 2012 Share Posted June 10, 2012 (edited) Look I've given you the layout you require with left, centre, right columns, all you had to do was add the iframe, or it seems the container that the iframe is in! to centre column with margin: 0 auto; that's it! that's all you had to do. but it seem you can't be bothered to use any of my examples, so I can't be bothered to spoon-feed you anymore. Edited June 10, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
eTianbun Posted June 10, 2012 Share Posted June 10, 2012 ...CodeName, so I should rename </img> to <img/>... No, just remove </img> completely! Link to comment Share on other sites More sharing options...
eTianbun Posted June 10, 2012 Share Posted June 10, 2012 (edited) If I would increase the <div> container, the background would repeat; the original size of the background is 340 x 284 px... I dont realy GET you! As said before, there must be extra space inside the <div>, for the <iframe> to be centered. If you dont want the background-image to reapeat (if thats what you meant), add:background-repeat:no-repeat; to the <div> CSS. Edited June 10, 2012 by CodeName Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now