Centering the Page

[jwalker80]

Hi,

I am trying to centre my whole page on the screen. I am currently viewing at 1024*768 which the page fits into but I want to center the page if the resolution is higher, say at 1280*1024.

I have tried adding a wrapper div and applying


#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background-image:url(images/bgtest.jpg);
background-repeat:no-repeat;
}

Not all the elements of the page are centered with this even when they are inside the wrapper. Also the background image is not appearing.

You can check out the page at http://justinwalker.info/skins/Interface.html

My CSS is


/* CSS Document */

body {
margin:0px;
padding:0px;
background-image:url(images/bgtest.jpg);
background-repeat:no-repeat;
}

h1 {
display:none;
}

/*#wrapper {
width:990px;
margin-left:auto;
margin-right:auto;
background-image:url(images/bgtest.jpg);
background-repeat:no-repeat;
}*/

#pageContent {
}

#header {
display:none;
}

#artistContent {

}

#artistLogo {

}

#introText {

}

#mediaPlayer {
position:absolute;
top:34px;
left:436px;
background-color:#000000;
width:500px;
height:390px;
}

/*#channels {
position:absolute;
z-index:2;
top:490px;
left:0px;
height:131px;
width:900px;
overflow-x:scroll;
}*/

#channels {
position:absolute;
z-index:2;
top:490px;
left:0px;
height:150px;/*131;*/
width:990px;
overflow:auto;
}

#channel1, #channel2, #channel3, #channel4, #channel5, #channel6, #channel7, #channel8, #channel9,
#channel10, #channel11, #channel12, #channel13, #channel14 {
position:relative;
background-image:url(images/channel_bg.png);
width:158px;
height:131px;
float:left;
}

#channels img {
display:none;
}

#footer {
display:none;
}

#artistNav {
background-image:url(../images/artist_nav_bg.gif);
height:32px;
width:990px;
background-repeat:repeat-x;
position:absolute;
top:640px;
z-index:4;
}

#muzuNav {
position:absolute;
top:672px;
background-color:#000000;
height:31px;
width:990px;
background-repeat:repeat-x;
z-index:4;
}

#muzuNav ul li {
display:inline;
}

#extra {
width:2212px;
}

.channel {

}

[Wickham]

You have the main image bgtest.jpg as a background-image for the body and for the #wrapper but a body background can't be centralised by margin: auto so delete it from body and leave it for #wrapper only.

It would centralise if you removed the delete tags from the css file around #wrapper. The #wrapper has no height because the divs inside like #mediaplayer and #channels are position: absolute (ie outside the normal flow so #wrapper ignores them and can't find anything else with a height so it assumes no height and doesn't show the background-image) so I have given #wrapper a height of 910px to allow enough for the divs below the background-image of 668px and colored it pink so that you can see the extent of it.

Also the div #channels which is position: absolute will take it's position from the top left window corner (ie be fixed) unless inside a position: relative div so I made #wrapper position: relative with enough height for #channels and #footer so they are fixed within #wrapper but #wrapper can centralise.

You also have display: none in some places which means the div content is not showing.

Leave your html file as it is and just substitute the css below:-


/* CSS Document */
body {
margin:0px;
padding:0px;
/*background-image:url(images/bgtest.jpg);
background-repeat:no-repeat;*/
}

h1 {
display:none;
}

#wrapper {background-color: pink; position: relative;
width:990px; height: 910px;
margin-left:auto;
margin-right:auto;
background-image:url(images/bgtest.jpg);
background-repeat:no-repeat;
}

#pageContent {

}

#header {
/*display:none;*/
}

#artistContent {

}

#artistLogo {

}

#introText {

}

#mediaPlayer {
position:absolute;
top:34px;
left:436px;
background-color:#000000;
width:500px;
height:390px;
}

/*#channels {
position:absolute;
z-index:2;
top:490px;
left:0px;
height:131px;
width:900px;
overflow-x:scroll;
}*/

#channels {
position:absolute;
/*z-index:2;*/
top:710px;
left:0px;
height:150px;/*131;*/
width:990px;
overflow:auto;
}

#channel1, #channel2, #channel3, #channel4, #channel5,
#channel6, #channel7, #channel8, #channel9,
#channel10, #channel11, #channel12, #channel13,
#channel14 {
position:relative;
background-image:url(images/channel_bg.png);
width:158px;
height:131px;
float:left;
}

#channels img {
display:none;
}

#footer {
position:absolute;
top:860px;
left:0px;
height:60px;
width:990px;
}

#artistNav {
background-image:url(../images/artist_nav_bg.gif);
height:32px;
width:990px;
background-repeat:repeat-x;
position:absolute;
top:640px;
z-index:4;
}

#muzuNav {
position:absolute;
top:672px;
background-color:#000000;
height:31px;
width:990px;
background-repeat:repeat-x;
z-index:4;
}

#muzuNav ul li {
display:inline;
}

#extra {
width:2212px;
}

.channel {

}






There are lots of co***icting codes and I don't like mixing position: absolute with position: relative and the code is still a bit of a mess but it's better than it was before!

The validator http://validator.w3.org/ is unable to validate until you replace the copyright symbol with the code ©
Also you should remove the <style type="text/css">
</style> just before <h1>Network Homepage</h1>

Check the image urls as I changed some to suit my folder structure.