Positioning issue with website using css

[broknmindz]

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;

}

[Wickham]

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

[jlhaslip]

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.

[broknmindz]

Home

Graphic Design

Digital Art

Resume

Contact

digital art gallery

graphic design gallery

&copy Zepheras.com 2009

Edited April 6, 2009 by broknmindz

[Wickham]

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

[broknmindz]

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