daveoffy Posted August 16, 2009 Share Posted August 16, 2009 I have not typed CSS for so long. So if you guys can help me with this one problem I can code the rest of this template. How can I add a 10px spacing. I tried <div style="margin-top: 10px"> <div id="hi">Hello World</div> </div> but had no luck. Quote Link to comment Share on other sites More sharing options...
Hybride Posted August 16, 2009 Share Posted August 16, 2009 What kind of spacing are you looking for? Margin is for around borders, padding is within borders, letter-spacing is space between letters, among others. Please be more specific. <div style="margin: 10px"> Hello World </div> This would give you a margin of 10px all around the "Hello World". <div style="margin-top: 10px"> Hello World </div> Would give a margin of 10px from the top only. Quote Link to comment Share on other sites More sharing options...
daveoffy Posted August 16, 2009 Author Share Posted August 16, 2009 I want to add 10px spacing ontop of the logo/nav. Than more spacing like inbetween content so it only shows the background and nothing else. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 16, 2009 Share Posted August 16, 2009 You could just use padding? There are sooo many factors that can affect margin declarations. Especially floats. Are you using any of those. Post all your code. Quote Link to comment Share on other sites More sharing options...
daveoffy Posted August 16, 2009 Author Share Posted August 16, 2009 All code (http://buyastatus.com/skin/style.php) style.php <?php include 'header.php'; ?> <body> <div align="center"> <div id="wrapper"> <div class="spacer"> <div id="logo"> <img src="images/logo.png"> </div> </div> <div id="userbar"></div> <div id="content"></div> <?php include 'footer.php'; ?> 2 of the divs close in footer.php style.css * { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: #3681c1 url(images/bg.gif) repeat-x top left; font-size: 12px; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; border: 0; width: 900px; height: auto; } .spacer { margin-top: 10px; } #logo { width: 335px; height: 110px; background-image: url(images/l_bg.png); float: left; } #userbar { margin-right: 10px; width: 555px; height: 35px; background-image: url(images/ub.png); float: left; } #content { width: 898px; background: #FFFFFF url(images/c_bg.gif) repeat-x top left; border: 1px solid #FFFFFF } #footer { width: 900px; height: 25px; background-image: url(images/footer.png); margin-top: 10px; } a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:active { text-decoration: none; color: #000000; } img { border: 0 } [td][/td] Quote Link to comment Share on other sites More sharing options...
haku Posted August 17, 2009 Share Posted August 17, 2009 #logo { margin-top:10px; } Quote Link to comment Share on other sites More sharing options...
daveoffy Posted August 17, 2009 Author Share Posted August 17, 2009 Added that, but now I have a white line on the top. Also the footer is only 10px down from top, not 10px down from the bottom of the logo/user bar. Quote Link to comment Share on other sites More sharing options...
daveoffy Posted August 17, 2009 Author Share Posted August 17, 2009 Can't edit above post. The white box is due to my content box. So that is solved. But still I don't know why they are not getting positioned in order as the HTML. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.