Help: How do I centre/center my layers?
Posted: 13 May 2006 01:50 AM   [ Ignore ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

Hi

I’m trying to design a centred website, however I can’t get the layers to automatically centre in different browser dimensions (both Firefox and IE)

Could anyone help, it would be much appericated, please.

Thanks

Andy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Welcome to Northern Television Test page</title>
<
style type="text/css">
<!--
#Layer1 {
position:absolute;
left:170px;
top:-1px;
width:750px;
height:150px;
z-index:auto;
cursorauto;
border1px none #FFFFFF;
text-decorationnone;
list-
style-positionoutside;
list-
style-imageurl((URL));
list-
style-typeupper-alpha;
clearboth;
floatleft;
}
body {
background
-color#5E88AE;
page-break-beforealways;
page-break-afteralways;
floatleft;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color#CDD6FD;
list-style-positioninside;
list-
style-imageurl((URL));
list-
style-typenone;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color#B1C0FE;
}
.style1 {
font
-familyArialHelveticasans-serif;
font-size14px;
}
.style2 {color#FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color#A9BAFE;
background-imageurl(Untitled-1.png);
}
.style3 {font-familyArialHelveticasans-serif}
.style4 {color#354E84}
.style6 {font-family"Myriad Web"font-size14px}
-->
</
style>
</
head>

<
body>
<
span id="Layer1"><img src="header.jpg" width="750" height="150" /></span>
<
div id="Layer2"></div>
<
div id="Layer3">
  <
div align="center" class="style2">  <span class="style6"><marquee>Welcome to Northern Televisionserving the North West of England for SIX</marquee>
  </
span></div>
  <
span class="style1"><marque>
    <
div align="center"></div>
</
span></div>
<
div class="style3" id="Layer4">
  <
div align="center" class="style4"></div>
</
div>
</
body>
</
html

And here is the zip containing what the page looks like:
http://www.themocksfactory.co.uk/andy/Test.zip

Profile
 
 
Posted: 14 May 2006 10:41 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18

Use a wrapper which is centered using:

margin-left:automargin-right:auto
Profile
 
 
Posted: 14 May 2006 05:45 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

Thanks so much for responding, however where do I place the wrappers in the code, I’m still new to CSS.  :red:

Profile
 
 
Posted: 14 May 2006 06:06 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18
<div id="wrapper"><div id="yourheader"></div><div id="yourcontent"></div></div

Wrap your website in a nice blanket of wrapper-softness, making it very centered!

Profile
 
 
Posted: 14 May 2006 06:44 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

I think I may of done something wrong..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Welcome to Northern Television Test page</title>
<
style type="text/css">
<!--
#Layer1 {
position:absolute;
left:170px;
top:-1px;
width:750px;
height:150px;
z-index:auto;
cursorauto;
border1px none #FFFFFF;
text-decorationnone;
list-
style-positionoutside;
list-
style-imageurl((URL));
list-
style-typeupper-alpha;
clearboth;
floatleft;
}
body {
background
-color#5E88AE;
page-break-beforealways;
page-break-afteralways;
floatleft;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color#CDD6FD;
list-style-positioninside;
list-
style-imageurl((URL));
list-
style-typenone;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color#B1C0FE;
}
.style1 {
font
-familyArialHelveticasans-serif;
font-size14px;
}
.style2 {color#FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color#A9BAFE;
background-imageurl(Untitled-1.png);
}
.style3 {font-familyArialHelveticasans-serif}
.style4 {color#354E84}
.style6 {font-family"Myriad Web"font-size14px}
-->
</
style>
</
head>

<
body>
<
div id="margin-left:auto; margin-right:auto;"><div id="Layer1"></div><div id="Layer2"></div></div><div id="Layer3"></div></div>
<
span id="Layer1"><img src="header.jpg" width="750" height="150" /></span></div>

<
div id="Layer2"></div>
<
div id="Layer3">
  <
div align="center" class="style2">  <span class="style6"><marquee>Welcome to Northern Televisionserving the North West of England for SIX</marquee>
  </
span></div>
  <
span class="style1"><marque>
    <
div align="center"></div>
</
span></div>
<
div class="style3" id="Layer4">
  <
div align="center" class="style4"></div>
</
div>
</
body>
</
html

Was I correct in putting it, within the body tags.

Profile
 
 
Posted: 14 May 2006 06:52 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18

Close ALL div’s

Profile
 
 
Posted: 14 May 2006 07:13 PM   [ Ignore ]   [ # 6 ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

Done

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Welcome to Northern Television Test page</title>
<
style type="text/css">
<!--
#Layer1 {
position:absolute;
left:170px;
top:-1px;
width:750px;
height:150px;
z-index:auto;
cursorauto;
border1px none #FFFFFF;
text-decorationnone;
list-
style-positionoutside;
list-
style-imageurl((URL));
list-
style-typeupper-alpha;
clearboth;
floatleft;
}
body {
background
-color#5E88AE;
page-break-beforealways;
page-break-afteralways;
floatleft;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color#CDD6FD;
list-style-positioninside;
list-
style-imageurl((URL));
list-
style-typenone;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color#B1C0FE;
}
.style1 {
font
-familyArialHelveticasans-serif;
font-size14px;
}
.style2 {color#FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color#A9BAFE;
background-imageurl(Untitled-1.png);
}
.style3 {font-familyArialHelveticasans-serif}
.style4 {color#354E84}
.style6 {font-family"Myriad Web"font-size14px}
-->
</
style>
</
head>

<
body>
<
div id="margin-left:auto; margin-right:auto;"><div id="Layer1"></div><div id="Layer2"></div></div><div id="Layer3"></div></div>
<
span id="Layer1"><img src="header.jpg" width="750" height="150" /></span></div>

<
div id="Layer2"></div>
<
div id="Layer3"></div>
  <
div align="center" class="style2">  <span class="style6"><marquee>Welcome to Northern Televisionserving the North West of England for SIX</marquee>
  </
span></div>
  <
span class="style1"><marque>
    <
div align="center"></div>
</
span></div>
<
div class="style3" id="Layer4"></div>
  <
div align="center" class="style4"></div>
</
div>
</
body>
</
html
Profile
 
 
Posted: 14 May 2006 07:33 PM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18

I really should start paying some attention… You shouldn’t use absolute positioning!!!!!!

Profile
 
 
Posted: 14 May 2006 07:42 PM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

OK, What do you suggest?

relative?

Profile
 
 
Posted: 14 May 2006 07:56 PM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18

No positioning whatsoever. I suggest using a pre-made layout from http://www.maxdesign.com.au/presentation/page_layouts/.

Profile
 
 
Posted: 14 May 2006 08:12 PM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  6
Joined  2006-05-13

Thanks for your help, I guess I learned a huge lesson, never select any positioning. I’ll try those pre-made layouts. :)

Profile