FORUMS: list search recent posts

Centering a page in a browser (NOT using tables)

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Rachel Fleming
Centering a page in a browser (NOT using tables)
on Dec 2, 2010 at 5:12:48 pm

Please help..I've tried tons of suggestions, but I'm still not doing it correctly, obviously.

I need to center my site within a browser (I did NOT use tables.) My code is below:

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



index

body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#apDiv1 {
position:absolute;
width:939px;
height:108px;
z-index:1;
left: 1px;
top: 52px;
}
#apDiv2 {
position:absolute;
width:962px;
height:566px;
z-index:2;
left: -1px;
top: 172px;
visibility: visible;
}
#apDiv3 {
position:absolute;
width:961px;
height:165px;
z-index:3;
top: 2px;
left: 0px;
visibility: visible;
}
#apDiv4 {
position:absolute;
width:961px;
height:215px;
z-index:1;
top: 181px;
left: 139px;
}
#apDiv5 {
position:absolute;
width:1036px;
height:336px;
z-index:4;
left: 163px;
top: 134px;
visibility: visible;
}
#apDiv6 {
position:absolute;
width:960px;
height:568px;
z-index:4;
left: 1px;
top: 158px;
visibility: visible;
}
#apDiv7 {
position:absolute;
width:974px;
height:234px;
z-index:1;
left: 324px;
top: -114px;
overflow: auto;
}
#apDiv8 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 1px;
top: 54px;
}
#apDiv9 {
position:absolute;
width:965px;
height:215px;
z-index:5;
left: -2px;
top: 68px;
visibility: visible;
}
#apDiv10 {
position:absolute;
width:52px;
height:692px;
z-index:5;
}
#apDiv11 {
position:absolute;
width:56px;
height:697px;
z-index:6;
left: 907px;
top: -178px;
}
#apDiv12 {
position:absolute;
width:182px;
height:35px;
z-index:5;
left: 92px;
top: 250px;
visibility: visible;
}
#apDiv13 {
position:absolute;
width:181px;
height:36px;
z-index:6;
left: 291px;
top: 247px;
visibility: visible;
}
#apDiv14 {
position:absolute;
width:181px;
height:35px;
z-index:7;
left: 491px;
top: 247px;
}
#apDiv15 {
position:absolute;
width:180px;
height:36px;
z-index:8;
left: 690px;
top: 247px;
}
body,td,th {
font-family: "Times New Roman", Times, serif;
font-size: 16pt;
color: #efa246;
}
#apDiv16 {
position:absolute;
width:587px;
height:52px;
z-index:9;
left: 148px;
top: 329px;
}
#apDiv17 {
position:absolute;
width:217px;
height:45px;
z-index:9;
left: 139px;
top: 383px;
}
#apDiv18 {
position:absolute;
width:196px;
height:44px;
z-index:10;
left: 137px;
top: 384px;
}
#apDiv19 {
position:absolute;
width:182px;
height:32px;
z-index:11;
left: 92px;
top: 248px;
}


function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i&lt;(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}




<div><img src="images/index-title_bar.gif" width="960" height="156" /></div>
<div>
<div>
<div><a href="#"><img src="images/menu.gif" name="menu" width="181" height="36" border="0" /></a></div>
</div>
<div>
<div><img src="images/index_final_animation.gif" width="960" height="218" /></div>
</div>
<img src="images/index-main.gif" width="960" height="565" />
<div><a href="#"><img src="images/reservations.gif" name="reservations" width="152" height="43" border="0" /></a></div>
<div><em>Welcome to the Cafe Caleo, where we're not only known for our down-home comfortable atmosphere, but our delicious Island food</em>.</div>
<div>
<div><a href="#"><img src="images/reviews.gif" name="reviews" width="159" height="36" border="0" /></a></div>
</div>
<div>
<div><a href="#"><img src="images/privateevents.gif" name="events" width="181" height="36" border="0" /></a></div>
</div>
<div>
<div><a href="aboutus.html"><img src="images/aboutus.gif" name="aboutus" width="182" height="36" border="0" /></a></div>
</div>
<div></div>
</div>






I need to know what code to use and exactly WHERE to insert the code within my existing code above. I've tried doing this w/ CSS, but I still cannot figure it out.

Can anyone provide exact, step-by-step instructions on how to do this?

My code doesn't seem to be showing up correctly when I "Preview Post" so I can email my code if this helps.

Thanks SO much!!!


Return to posts index

Fernando Mol
Re: Centering a page in a browser (NOT using tables)
on Dec 2, 2010 at 5:25:21 pm

You may want to read this tutorial first:

http://library.creativecow.net/articles/mol_fernando/css_centered_layout.ph...


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]