Cristian Posted February 6, 2012 Share Posted February 6, 2012 Hello, I have a very basic html/css file where I am trying to display a grey background with a blue header, and on the left, top and right sides of the blue header I can't seem to get rid of the grey margin/padding. <html> <head> <title>#</title> <style type="text/css"> html {background: #dcd1cd;} div#top{position:relative; width:100%; height:390px; background: #1e6fb0; margin:0px; padding:0px;} </style> </head> <body> <div id="top"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
sunfighter Posted February 6, 2012 Share Posted February 6, 2012 Not trying to be funny, but this is so elemental I think you should go to http://www.w3schools.com/ and read up on html and css. You need to put a container into your body and place the div there. <!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" xml:lang="en" lang="en"> <head> <title>#</title> <style type="text/css"> #content { background-color: #dcd1cd; height: 780px; width: 960px; margin-right:auto; margin-left:auto; } div#top { height:390px; background-color: #1e6fb0; } </style> </head> <body> <div id="content"> <div id="top"> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Cristian Posted February 7, 2012 Author Share Posted February 7, 2012 Thank you! I am just starting out with this. Thanks for the advice. Quote Link to comment Share on other sites More sharing options...
spiderwell Posted February 7, 2012 Share Posted February 7, 2012 w3schools isn't the most reliable of sources, I should add. If you are just learning css, it might be worth reading up about CSS resets, which resets all elements to zero margins and paddings, so consistency across browsers is easier to achieve. it does mean you have to re define the ones you reset, but at least you know they will match across browsers Quote Link to comment Share on other sites More sharing options...
floridaflatlander Posted February 7, 2012 Share Posted February 7, 2012 I suggest you get use Firefoxes Firebug. It is a God send, I think Chrome does the same thing. I can't see working without either. Anyway you open firebug, find the html code you have questions about or want to edit, click the tag and firebug will tell you where the style is coming from(example: index.css line 250), it will color the div or tag and then it colors the padding and magins so you can really see whats what and it will also show the heredity of the tag and their line numbers. Quote Link to comment Share on other sites More sharing options...
spiderwell Posted February 7, 2012 Share Posted February 7, 2012 latest versions of IE have deleoper tools which are basically the same as firebug too 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.