Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Help with CSS  >  Thread
Search  
  
  Advanced Search
   
 
Help: How do I centre/center my layers?
 
Andy B
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;
cursor: auto;
border: 1px none #FFFFFF;
text-decoration: none;
list-style-position: outside;
list-style-image: url((URL));
list-style-type: upper-alpha;
clear: both;
float: left;
}
body {
background-color: #5E88AE;
page-break-before: always;
page-break-after: always;
float: left;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color: #CDD6FD;
list-style-position: inside;
list-style-image: url((URL));
list-style-type: none;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color: #B1C0FE;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style2 {color: #FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color: #A9BAFE;
background-image: url(Untitled-1.png);
}
.style3 {font-family: Arial, Helvetica, sans-serif}
.style4 {color: #354E84}
.style6 {font-family: "Myriad Web"; font-size: 14px; }
-->
</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 Television, serving 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
 
 
j88st
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:auto; margin-right:auto; 
Profile
 
 
Andy B
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
 
 
j88st
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
 
 
Andy B
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;
cursor: auto;
border: 1px none #FFFFFF;
text-decoration: none;
list-style-position: outside;
list-style-image: url((URL));
list-style-type: upper-alpha;
clear: both;
float: left;
}
body {
background-color: #5E88AE;
page-break-before: always;
page-break-after: always;
float: left;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color: #CDD6FD;
list-style-position: inside;
list-style-image: url((URL));
list-style-type: none;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color: #B1C0FE;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style2 {color: #FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color: #A9BAFE;
background-image: url(Untitled-1.png);
}
.style3 {font-family: Arial, Helvetica, sans-serif}
.style4 {color: #354E84}
.style6 {font-family: "Myriad Web"; font-size: 14px; }
-->
</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 Television, serving 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
 
 
j88st
Posted: 14 May 2006 06:52 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  10
Joined  2005-03-18

Close ALL div’s

Profile
 
 
Andy B
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;
cursor: auto;
border: 1px none #FFFFFF;
text-decoration: none;
list-style-position: outside;
list-style-image: url((URL));
list-style-type: upper-alpha;
clear: both;
float: left;
}
body {
background-color: #5E88AE;
page-break-before: always;
page-break-after: always;
float: left;
}
#Layer2 {
position:absolute;
left:170px;
top:150px;
width:750px;
height:476px;
z-index:1;
background-color: #CDD6FD;
list-style-position: inside;
list-style-image: url((URL));
list-style-type: none;
}
#Layer3 {
position:absolute;
left:170px;
top:151px;
width:750px;
height:20px;
z-index:2;
background-color: #B1C0FE;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style2 {color: #FFFFFF}
#Layer4 {
position:absolute;
left:170px;
top:151px;
width:224px;
height:20px;
z-index:3;
background-color: #A9BAFE;
background-image: url(Untitled-1.png);
}
.style3 {font-family: Arial, Helvetica, sans-serif}
.style4 {color: #354E84}
.style6 {font-family: "Myriad Web"; font-size: 14px; }
-->
</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 Television, serving 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
 
 
j88st
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
 
 
Andy B
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
 
 
j88st
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
 
 
Andy B
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
 
 
   
 
 
‹‹ position background at very bottom of the screen      Help ››