Jump to content

padding


TheCatapult
 Share

Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

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 by CodeName
Link to comment
Share on other sites

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 by MisterCatapult
Link to comment
Share on other sites

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

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 by CodeName
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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 by CodeName
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...