shanenin Posted February 23, 2008 Report Share Posted February 23, 2008 I am trying to use css to put an image center and on top of my web page. I am able to get it centered, but I have a small space above the image. I think this is a margin property, but I am not sure. I just want to have my logo at the very top of the web page without any spacing. I have tryed setting margin-top to 0, but that does not seem to help. What am I doing wrong?here is what I have for code<!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>Bright-Eyed Computer</title><style type="text/css">body { background-color: black }img.head {display: block;margin-left: auto;margin-right: auto;}</style></head><body><img class="head" alt="Bright-Eyed Computer (507)252-0334" src="images/header.jpg" /></body></html> Quote Link to post Share on other sites
Bubba Bob Posted February 24, 2008 Report Share Posted February 24, 2008 Make your undefined margins 0. Add this into your style sheet/integrated css:* {margin: 0; padding: 0;}Now it *should* be at the top. If not, now try setting your top margin to 0. Quote Link to post Share on other sites
shanenin Posted February 24, 2008 Author Report Share Posted February 24, 2008 it does not seem to be working. I am using this code. img.head {display: block;padding: 0;margin-top: 0;margin-left: auto;margin-right: auto;}I also triedimg.head {display: block;padding: 0;margin: 0;margin-left: auto;margin-right: auto;}and img.head {display: block;padding: 0;margin: 0;margin-top: 0;margin-left: auto;margin-right: auto;} Quote Link to post Share on other sites
Bubba Bob Posted February 24, 2008 Report Share Posted February 24, 2008 Ok, then get rid of all the HTML and CSS for the image, and add this:body { background-image: url(xxxxxxxxxxx.jpg); background-position: center top; background-repeat: no-repeat;Keep your default margins zero. Quote Link to post Share on other sites
shanenin Posted February 24, 2008 Author Report Share Posted February 24, 2008 Keep your default margins zero.What exactly do you mean. By default, don't margins get assigned to everything? Quote Link to post Share on other sites
Bubba Bob Posted February 24, 2008 Report Share Posted February 24, 2008 (edited) Keep your default margins zero.What exactly do you mean. By default, don't margins get assigned to everything?Yes. If no margin is specified it's up to the browser to decide. I believe most browsers assume no margin = 10pixels. Always make your default margins 0 ( * {margin: 0; padding: 0;} ) in all your style sheets. Makes it uniform across all browsers.EDIT:All I ment by "keep your default margins zero" was make sure you keep * {margin: 0; padding: 0;} in your style sheet. Edited February 24, 2008 by Bubba Bob Quote Link to post Share on other sites
shanenin Posted February 25, 2008 Author Report Share Posted February 25, 2008 Thanks for your help. After putting "margin: 0" in the body instead of the image it is now working. That must mean the margin I was seeing was not from the image, but from the body. Quote Link to post Share on other sites
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.