Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Help: How Do I Centre/center My Layers?


  • Please log in to reply
1 reply to this topic

#1 I hate spyware!

I hate spyware!

  • Members
  • 44 posts
  • OFFLINE
  •  
  • Local time:04:40 PM

Posted 13 May 2006 - 02:48 PM

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) :thumbsup:

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>
&lt;style type="text/css"&gt;
&lt;!--
#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; }
--&gt;
</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

Edited by I hate spyware!, 13 May 2006 - 02:50 PM.


BC AdBot (Login to Remove)

 


m

#2 nosnhoj#3

nosnhoj#3

  • Members
  • 245 posts
  • OFFLINE
  •  
  • Location:127.0.0.1
  • Local time:01:40 PM

Posted 13 May 2006 - 07:00 PM

Hello,

I only had a few minutes, but I cleaned your syntax up a bit, and centered it for you. I suggest starting over from scratch, relatively named attributes rather than "Layer1' "Layer2". It is way to easy to get lost, instead name them in sequential order like "Container" "Header" "Scroll_Text" "Float_image_left". Basically just name the attribute what ever the element is doing.


If you need some help, I can lend you some pointers, or point you in the direction of some information.


Here's the markup, aas close to your original as I could keep it.

<!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">
<!--
body {
	background-color: #5E88AE;
	margin:0;
	padding:0;
}
#Layer1 {
	width:750px;
	height:150px;
	margin-right: auto;
	margin-left: auto;
}
#Layer2 {
	width:750px;
	height:476px;
	background-color: #CDD6FD;
	margin-left: auto;
	margin-right: auto;
}
#Layer3 {
	width:525px;
	height:20px;
	background-color: #B1C0FE;
	float: right;
	text-align: right;
}
#Layer4 {
	float:left;
	width:224px;
	height:auto;
	background-color: #A9BAFE;
}
.scroll_text {
	font: normal italic 14px "Trebuchet MS, Times New Roman, Times, serif";
	color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div id="Layer1"><img src="header.jpg" width="750" height="150" /></div>
<div id="Layer2">
  <div id="Layer3">
	<div class="scroll_text">
	  <marquee  behavior="scroll">
	  Welcome to Northern Television.
	  </marquee>
	</div>
  </div>
  <div id="Layer4"><img src="untitled-1.png" /> </div>
</div>
</body>
</html>


Hope this helps,

nos :thumbsup:
When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users