jwalker80
27 Feb 2007, 11:11 AM
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 {
}
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 {
}