broknmindz Posted April 6, 2009 Report Share Posted April 6, 2009 Hi I'm having an issue with making my website flush to the top of the browser. I have left and right margins for the container the way i want it, which is center of the page but the site floats in the center and I would like to make it flush to the top of the browser. Here is the css code I have so far. I can't seem to locate what would be causing it not to move at all. a { text-decoration: none; } body { background: #0d383f; color: #ffffff; padding: 50px; width: auto; text-align: center; } h1 { background: inherit; border-bottom: 1px dashed #ccc; color: #933; font: 17px Georgia, serif; margin: 0 0 10px; padding: 0 0 5px; text-align: center; } p { clear: both; font: 14px Verdana, sans-serif; padding: 10px 0; text-align: center; } p a { background: inherit; color: #777; } p a:hover { background: inherit; color: #000; } /* =Hoverbox Code picture gallery ----------------------------------------------------------------------*/ .hoverbox { cursor: default; list-style: none; } .hoverbox a { cursor: default; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; } .hoverbox img { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; } .hoverbox .preview { border-color: #000; width: 200px; height: 150px; } #container { position: relative; top: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; width:900px; background: #0b4f66; font-size:1.20em; text-align:left; } #header { height: 400px; width:900px; background:url(images/layout/header.jpg) no-repeat; } #gallery1 { margin-left: 100px; margin-right:100px; } #menu { float:left; width:100%; background:#0b4f66; border-bottom:4px solid #0d383f; overflow:hidden; position:relative; } #menu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #menu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #menu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#0b4f66; color: #ffffff; text-decoration:none; line-height:1.3em; } #menu ul li a:hover { background:#369; color:#fff; } #menu ul li a.active, #menu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #footer { font-size: 14px; text-align: center; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 6, 2009 Report Share Posted April 6, 2009 (edited) Is the space at the top about 20px? This is the default margin applied by all browsers (to sides and bottom as well but if your page is centered you probably haven't noticed that). Add margin: 0; to the body style:- body { margin: 0; background: #0d383f; color: #ffffff; /*padding: 50px;*/ /*width: auto;*/ text-align: center; } I've deleted padding: 50px; and width: auto; as these can't apply to the body. Only margin applies to the body. Apply padding and width to a containing div for the whole page, as you have done for width; you may have to add the padding to #container. Your #container has margin-left: auto; and margin-right: auto which is the correct way to center a div provided that there is a width (which there is) and I assume that this is your main container with everything else inside. You can simplify code by saying margin: 0 auto; which means 0 top and bottom and auto to sides or margin: 0 auto 0 auto; which is top, right, bottom, left. Edited April 6, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 6, 2009 Report Share Posted April 6, 2009 A link to the page would be easier to diagnose the problem. And you do not show any html code there, so we would be merely guessing at the solution. Quote Link to comment Share on other sites More sharing options...
broknmindz Posted April 6, 2009 Author Report Share Posted April 6, 2009 (edited) Home Graphic Design Digital Art Resume Contact digital art gallery graphic design gallery © Zepheras.com 2009 Edited April 6, 2009 by broknmindz Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 6, 2009 Report Share Posted April 6, 2009 (edited) Delete body padding and width as I said in my last post. body { margin: 0; background: #0d383f; color: #ffffff; /*padding: 50px; width: auto;*/ text-align: center; } Add padding to #container if you need it. Edit: I added this doctype at the very top of the html page:- /p> "http://www.w3.org/TR/html4/strict.dtd"> I said that padding and width don't apply to body which is nearly true. The body always has 100% width so width is irrelevant. Body cannopt have anything outside so margins which are outside normal elements like divs are inside the body. I thought padding was not applicable to the body but it seems to be working here. Most people don't use padding for the body, only margins which as I said, work internally. Edited April 6, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
broknmindz Posted April 6, 2009 Author Report Share Posted April 6, 2009 yea it fixed the problem. I wasn't sure what was causing it and I should have thought of the body not having margin and width since its the background. Doh! Thanks! I'm still new at this and still trying to keep track of doing things. I appreciate the help 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.
Note: Your post will require moderator approval before it will be visible.