Web Design Forums

NsightET · 24-01-2006, 15:42

Yes this is a stupid question I thought I'd figured out long ago, but I'm trying to center a layer with multiple layers within it so it will center when different screen resolutions are used. Here’s the code I was working with:

<style type="text/css">
.centre {
width: 940px;
margin-right: auto;
margin-left: auto;
position: relative;
left: 6px;
top: 7px;
height: 449px;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>

The problem is the horizontal scroll bar shows up even when there’s no content on the far right of the site. I’m sure I’m making this harder then it is, but can someone give me a hand or show me an alternate way to center a single layer with multiple layers within?

Thanks in advance!

smallbeer · 24-01-2006, 16:12

you shouldn't need left: 6px;

can we see the (x)html?

NsightET · 24-01-2006, 16:20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.centre {
width: 940px;
margin-right: auto;
margin-left: auto;
position: relative;
left: 6px;
top: 7px;
height: 449px;
}
/*hack for IE5*/
body {
text-align: center;
}
</style>
<title>Nsight Creations - films : photos : graphics by John N. Haswell // nsightcreations.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('NETCLick%202.jpg','Enter tainmentinfo.jpg','IntroInfo.jpg','NDE%20Click%202 .jpg','Designinfo.jpg','Viewportfolio2.jpg','Portf oliotinfo.jpg')">
<div class="centre">
<div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2">
<div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1"></div>
</div>
<div class="centre">
<div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1"></div>
</div></div></body>
</html>

Probably a lot of stuff I don't need on there, but I cleaned it up to only a single layer. Just want to center that layer and I'll add all the content to the centre layer.

smallbeer · 24-01-2006, 16:39

right. .centre is doing what it should be and is centred on the page.

what was the expected outcome of this?

Code:

<div class="centre">
<div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2">
<div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1">hello</div>
</div>

?

do you have a layout you're rying to achieve?

could I recommend closing dreamweaver, opening a text editor, and learning css?

NsightET · 24-01-2006, 16:49

CSS is something I'm going to learn, and I have a few turtorials on centering with CSS, but I'm always open for some more. I'd like to stick with Dreamweaver though. I've been using it for a year and have a hold on the interface.

Visual Studios .NET is something I need to learn for my job, but let me know if there are any tutorials to learn what I need in CSS in about a week. Thanks Smallbeer.

smallbeer · 24-01-2006, 16:57

you could start from the bottom up.

stop relying on dreamweaver to add "layers" for you.

I'll ask again cos I really am tryin to be nice tonight. What were you tryin to do here?

Code:

<div class="centre">
<div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2">
<div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1">hello</div>
</div>

24-01-2006, 15:42	#1 (permalink)
NsightET Registered User Join Date: Jan 2006 Posts: 8	Centering Issue in Dreamweaver Yes this is a stupid question I thought I'd figured out long ago, but I'm trying to center a layer with multiple layers within it so it will center when different screen resolutions are used. Here’s the code I was working with: <style type="text/css"> .centre { width: 940px; margin-right: auto; margin-left: auto; position: relative; left: 6px; top: 7px; height: 449px; } /hack for IE5/ body { text-align: center; } </style> The problem is the horizontal scroll bar shows up even when there’s no content on the far right of the site. I’m sure I’m making this harder then it is, but can someone give me a hand or show me an alternate way to center a single layer with multiple layers within? Thanks in advance!

24-01-2006, 16:39	#4 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,235	right. .centre is doing what it should be and is centred on the page. what was the expected outcome of this? Code: <div class="centre"> <div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2"> <div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1">hello</div> </div> ? do you have a layout you're rying to achieve? could I recommend closing dreamweaver, opening a text editor, and learning css?

24-01-2006, 16:57	#6 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,235	you could start from the bottom up. stop relying on dreamweaver to add "layers" for you. I'll ask again cos I really am tryin to be nice tonight. What were you tryin to do here? Code: <div class="centre"> <div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2"> <div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1">hello</div> </div>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

24-01-2006, 16:12	#2 (permalink)
smallbeer I Ain't Losing Any Sleep™ Join Date: Apr 2003 Posts: 5,235	you shouldn't need left: 6px; can we see the (x)html?

24-01-2006, 16:20	#3 (permalink)
NsightET Registered User Join Date: Jan 2006 Posts: 8	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> .centre { width: 940px; margin-right: auto; margin-left: auto; position: relative; left: 6px; top: 7px; height: 449px; } /hack for IE5/ body { text-align: center; } </style> <title>Nsight Creations - films : photos : graphics by John N. Haswell // nsightcreations.com</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- //--> </script> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW \|\| innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); 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&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&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<(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];} } //--> </script> </head> <body bgcolor="#FFFFFF" onLoad="MM_preloadImages('NETCLick%202.jpg','Enter tainmentinfo.jpg','IntroInfo.jpg','NDE%20Click%202 .jpg','Designinfo.jpg','Viewportfolio2.jpg','Portf oliotinfo.jpg')"> <div class="centre"> <div id="Layer1" style="position:absolute; left:22px; top:20px; width:613px; height:59px; z-index:2"> <div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1"></div> </div> <div class="centre"> <div id="Layer24" style="position:absolute; left:717px; top:11px; width:0px; height:2px; z-index:1"></div> </div></div></body> </html> Probably a lot of stuff I don't need on there, but I cleaned it up to only a single layer. Just want to center that layer and I'll add all the content to the centre layer.

24-01-2006, 16:49	#5 (permalink)
NsightET Registered User Join Date: Jan 2006 Posts: 8	CSS is something I'm going to learn, and I have a few turtorials on centering with CSS, but I'm always open for some more. I'd like to stick with Dreamweaver though. I've been using it for a year and have a hold on the interface. Visual Studios .NET is something I need to learn for my job, but let me know if there are any tutorials to learn what I need in CSS in about a week. Thanks Smallbeer.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)