PDA

View Full Version : Centered content


9supratt4
04-05-2007, 05:56 PM
So I am having trouble trying to figure out how to have the entire page centered on the screen when it is viewed in IExplore or Firefox. How do I get the entire page to be centered on the screen?

Thanks.

davidj
04-05-2007, 06:23 PM
what are you using CSS or table layout?

9supratt4
04-05-2007, 06:29 PM
I'm using CSS

davidj
04-05-2007, 06:34 PM
http://www.dreamweaverclub.com/css-center-content.php

9supratt4
04-05-2007, 06:57 PM
Ok....I am a beginner at this and I am a little confused. Where should this code be inserted and what does "all page content goes here" mean?



The "Liquid" Method

The "liquid" method adjusts the content width on the fly by having the content width be always a certain percentage of the entire viewport width.
This a accomplished by using the following code:

THE HTML: <div class="wrapper"> all page content goes here </div>

THE CSS: div.wrapper {
margin-left : 10%;
margin-right : 10%;
}
This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.

davidj
04-05-2007, 07:49 PM
hi

you need to have a basic understanding first

i sugest you do a few tutorials or get a good book before you progress onto CSS

9supratt4
04-05-2007, 08:02 PM
I have done tutorials and read up on some of this, but I really need to get this done. It seems like something that should be so simple, but I just can't figure it out.

gmcrone
04-05-2007, 09:00 PM
Ok....I am a beginner at this and I am a little confused. Where should this code be inserted and what does "all page content goes here" mean?

The "liquid" method adjusts the content width on the fly by having the content width be always a certain percentage of the entire viewport width.
This a accomplished by using the following code:

THE HTML: <div class="wrapper"> all page content goes here </div>

THE CSS: div.wrapper {
margin-left : 10%;
margin-right : 10%;
}
This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.

In your HTML file, right after <body> Insert <div="wrapper">
Then at the end of your file just before </body> insert </div> to end the wrapper div.
All your content goes between these tags.

The CSS goes into your CSS file towards the top of it.
But read the entire article.....

Mike...

9supratt4
04-05-2007, 09:23 PM
In your HTML file, right after <body> Insert <div="wrapper">
Then at the end of your file just before </body> insert </div> to end the wrapper div.
All your content goes between these tags.

The CSS goes into your CSS file towards the top of it.
But read the entire article.....

Mike...

I think the problem is that there is no <body> tag in my document. I have the </body> tag but not the first one.

davidj
04-05-2007, 09:25 PM
that'll do it

9supratt4
04-05-2007, 09:29 PM
When I insert the <body> tag it still doesn't work. Why would dreamweaver not produced it, but produced a </body> tag?

davidj
04-05-2007, 09:31 PM
it probably did but you probably deleted it

never rely on point and click code. Always check it

9supratt4
04-05-2007, 09:33 PM
Could it be because the site was made using layers??

davidj
04-05-2007, 09:41 PM
it coul be that you deleted a layer and deleted the <body by mistake

9supratt4
04-05-2007, 09:44 PM
This is driving me so crazy!! I have been working on it all day!! I put in the <body> tag, but it still doesn't work. Is there anyway for me to send me code to you and you can take a look??

davidj
04-05-2007, 09:48 PM
post the code

9supratt4
04-05-2007, 09:54 PM
This is the page code:



<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>50/60 Productions, LLC</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
.style15 {font-family: Zeroes}
body,td,th {
color: #000000;
}
#Layer1 {
position:absolute;
width:132px;
height:227px;
z-index:1;
top: 179px;
left: 1px;
background-color: #FFFFFF;
}
#Layer2 {
position:absolute;
width:8px;
height:261px;
z-index:2;
left: 158px;
top: 168px;
}
#Layer3 {
position:absolute;
width:1005px;
height:160px;
z-index:3;
left: 1px;
}
#Layer4 {
position:absolute;
width:537px;
height:699px;
z-index:4;
left: 241px;
top: 180px;
}
#Layer5 {
position:absolute;
width:1014px;
height:1px;
z-index:1;
top: 160px;
left: 0px;
}
#Layer6 {
position:absolute;
width:228px;
height:827px;
z-index:5;
left: 788px;
top: 181px;
}
#Layer7 {
position:absolute;
width:551px;
height:733px;
z-index:6;
left: 198px;
top: 175px;
}
#Layer8 {
position:absolute;
width:8px;
height:750px;
z-index:7;
left: 766px;
top: 168px;
}
.style16 {font-family: Zeroes; font-size: 36px; }
.style17 {font-size: 30px}
.style18 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.style22 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
.style23 {font-family: Arial, Helvetica, sans-serif}
#Layer9 {
position:absolute;
width:157px;
height:9px;
z-index:8;
left: 1px;
top: 421px;
}
-->
</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">
<div id="Layer3"><img src="Picture Files/5060 Logo.jpg" width="1014" height="161" />
<div id="Layer5"><img src="Picture Files/Horizontal Black Bar.png" width="1013" height="8" /></div>
</div>
<div class="style15" id="Layer1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Home Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/Home Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/About Us Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/About Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Coming Soon Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/Coming Soon Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Whats Next Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Whats Next Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" ></embed>
</object>
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Contact Us Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Contact Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" ></embed>
</object>
</div>
<div id="Layer2"><img src="Picture Files/Black Bar.png" width="8" height="263" /></div>
<!--end navBar div -->
<!--end content -->
<br />
<div class="style15" id="Layer6">
<div align="center" class="style17"><u>COMING SOON </u></div>
<p><img src="Picture Files/DWI Shoot Front Page Pic.png" width="110" height="110" /><br />
<span class="style18">Hanover Park High School<br />
DWI Reenactment </span><span class="style22"><a href="#">full story...</a></span></p>
<p>&nbsp;</p>
<p><img src="Picture Files/Tribeca Logo for Home Page.png" width="110" height="110" /><br />
<span class="style18">Working with the Tribeca<br />
</span><span class="style18">Film Festival </span><a href="#" class="style22">full story...</a></p>
<p>&nbsp;</p>
<p class="style17"><u>WHAT'S NEXT <br />
</u></p>
</div>
<div id="Layer7">
<p>&nbsp;</p>
<p align="center" class="style16">ALWAYS GIVING 110% </p>
<p align="center" class="style23">&nbsp;</p>
</div>
<div id="Layer8"><img src="Picture Files/Black Bar.png" width="8" height="752" /></div>
<div id="Layer9"><img src="Picture Files/Horizontal Black Bar.png" width="157" height="9" /></div>
</body>
</html>

9supratt4
04-05-2007, 09:55 PM
This is the CSS code:


/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
border-color: #000000;
}
a{
color: #006699;
text-decoration: none;
}
a:link{
color: #006699;
text-decoration: none;
}
a:visited{
color: #006699;
text-decoration: none;
}
a:hover{
color: #006699;
text-decoration: underline;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
margin: 0px;
padding: 0px;
}
h2{
font-family: Arial,sans-serif;
font-size: 114%;
color: #006699;
margin: 0px;
padding: 0px;
}
h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}
h4{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}
h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}
ul{
list-style-type: square;
}
ul ul{
list-style-type: disc;
}
ul ul ul{
list-style-type: none;
}
label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
div.wrapper {
margin-left : 10%;
margin-right : 10%;
}
#masthead{
padding: 10px 0px 0px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

}
#headlines{
float:right;
width: 20%;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
padding-right: 10px;
}
#content{
float: left;
width: 55%;
}
/***********************************************/
/* Components */
/***********************************************/
#siteName{
margin: 0;
padding: 0 0 0 10px;
}

/************* #globalNav styles **************/
#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #cccccc;
}
#globalNav img{
display: block;
}
#globalNav a {
font-size: 90%;
padding: 0 4px 0 0;
}
/*************** #pageName styles **************/
#pageName{
margin: 0px;
padding: 0px 0px 0px 10px;
}
/************* #breadCrumb styles *************/
#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}

/************** .feature styles ***************/
.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}
.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}
.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

/************** .story styles *****************/
.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}
.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/
#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
}
#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}

/************* #search styles ***************/
#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}
#search form{
margin: 0px;
padding: 0px;
}
#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/
#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}
/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/
#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
font-size: 90%;
background-color: #FFFFFF;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
}
#sectionLinks h3{
padding: 10px 0px 2px 10px;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}

/*********** .relatedLinks styles ***********/
.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}
.relatedLinks h3{
padding: 10px 0px 2px 0px;
}
.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}
/************** #advert styles **************/
#advert{
padding: 30px 0px 10px;
}
#advert img{
display: block;
}

/************** #headlines styles **************/
#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}
#headlines p{
padding: 5px 0px 5px 0px;
}

davidj
04-05-2007, 09:58 PM
any CSS guru out there....

domedia
04-05-2007, 11:10 PM
If the original questiopn was how to center content, then use the tutorial mentioned:
http://www.dreamweaverclub.com/css-center-content.php

Didn't see you used anything from that tut.

gmcrone
04-05-2007, 11:11 PM
1. Your HTML is totally messed up

You have <body> before </head> (at top of page <body background color>
It must come after </head>

You also have the entire section from the first <body> to </style> commented out (<!--)
</head> should come just before your second <body onload> is entered.

You can only use one <body> not 2

In the embedded CSS code you are using absolute positioning which will not work with a centered page.
You also have a font-family called Zeros with no alternative.

Clean up your code first then try it again...

Mike...

9supratt4
04-06-2007, 12:28 AM
So I am completely lost and so are the other 3 people I have here trying to help. This is my cleaned up code as per the previous reply and it still doesn't work:



<!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">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>50/60 Productions, LLC</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
.style15 {font-family: Zeroes}
body,td,th {
color: #000000;
}
#Layer1 {
position:absolute;
width:132px;
height:227px;
z-index:1;
top: 179px;
left: 1px;
background-color: #FFFFFF;
}
#Layer2 {
position:absolute;
width:8px;
height:261px;
z-index:2;
left: 158px;
top: 168px;
}
#Layer3 {
position:absolute;
width:1005px;
height:160px;
z-index:3;
left: 1px;
}
#Layer4 {
position:absolute;
width:537px;
height:699px;
z-index:4;
left: 241px;
top: 180px;
}
#Layer5 {
position:absolute;
width:1014px;
height:1px;
z-index:1;
top: 160px;
left: 0px;
}
#Layer6 {
position:absolute;
width:228px;
height:827px;
z-index:5;
left: 788px;
top: 181px;
}
#Layer7 {
position:absolute;
width:551px;
height:733px;
z-index:6;
left: 198px;
top: 175px;
}
#Layer8 {
position:absolute;
width:8px;
height:750px;
z-index:7;
left: 766px;
top: 168px;
}
.style16 {font-family: Zeroes; font-size: 36px; }
.style17 {font-size: 30px}
.style18 {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.style22 {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
.style23 {font-family: Arial, Helvetica, sans-serif}
#Layer9 {
position:absolute;
width:157px;
height:9px;
z-index:8;
left: 1px;
top: 421px;
}
.style25 {font-family: Zeroes, Arial, "Times New Roman"}
.style26 {font-size: 30px; font-family: Zeroes, Arial, "Times New Roman"; }
-->
</style>
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</script>
</head>
<body {
background-color: #FFFFFF;
}>
<div class="wrapper">
<body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Macromedia Flash Player. Do you want to download it now?');">
<div id="Layer3"><img src="Picture Files/5060 Logo.jpg" width="1014" height="161" />
<div id="Layer5"><img src="Picture Files/Horizontal Black Bar.png" width="1013" height="8" /></div>
</div>
<div class="style15" id="Layer1">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Home Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/Home Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/About Us Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/About Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Coming Soon Button.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="Picture Files/Coming Soon Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" bgcolor="#FFFFFF"></embed>
</object>
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Whats Next Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Whats Next Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" ></embed>
</object>
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="122" height="46">
<param name="movie" value="Picture Files/Contact Us Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Contact Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="122" height="46" ></embed>
</object>
</div>
<div id="Layer2"><img src="Picture Files/Black Bar.png" width="8" height="263" /></div>
<!--end navBar div -->
<!--end content -->
<br />
<div class="style15" id="Layer6">
<div align="center" class="style26"><u>COMING SOON </u></div>
<p><img src="Picture Files/DWI Shoot Front Page Pic.png" width="110" height="110" /><br />
<span class="style18">Hanover Park High School<br />
DWI Reenactment </span><span class="style22"><a href="#">full story...</a></span></p>
<p>&nbsp;</p>
<p><img src="Picture Files/Tribeca Logo for Home Page.png" width="110" height="110" /><br />
<span class="style18">Working with the Tribeca<br />
</span><span class="style18">Film Festival </span><a href="#" class="style22">full story...</a></p>
<p>&nbsp;</p>
<p class="style17"><u><span class="style25">WHAT'S NEXT </span><br />
</u></p>
</div>
<div id="Layer7">
<p>&nbsp;</p>
<p align="center" class="style16 style25">ALWAYS GIVING 110% </p>
<p align="center" class="style23">&nbsp;</p>
</div>
<div id="Layer8"><img src="Picture Files/Black Bar.png" width="8" height="752" /></div>
<div id="Layer9"><img src="Picture Files/Horizontal Black Bar.png" width="157" height="9" /></div>
</div>
</body>
</html>

9supratt4
04-06-2007, 01:35 AM
So I decided to start from scratch. I started with a basic blank html page. I tried the same method to have it centered, but then realized there is no css file. Attached is the correct code, please help me get this centered.:confused:

Thanks!


<!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>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:1014;
height:161;
z-index:1;
left: 10px;
top: 14px;
}
#Layer2 {
position:absolute;
width:111px;
height:231px;
z-index:2;
top: 184px;
left: 12px;
}
#Layer3 {
position:absolute;
width:1013px;
height:8;
z-index:3;
top: 176px;
}
#Layer4 {
position:absolute;
width:250px;
height:660px;
z-index:4;
left: 774px;
top: 184px;
}
.style1 {
font-family: Zeroes, Arial, "Times New Roman";
font-size: 36px;
}
.style2 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
.style3 {font-family: Arial, Helvetica, sans-serif}
#Layer5 {
position:absolute;
width:8px;
height:660px;
z-index:5;
left: 766px;
top: 194px;
}
#Layer6 {
position:absolute;
width:8px;
height:663px;
z-index:5;
left: 766px;
top: 184px;
}
#Layer7 {
position:absolute;
width:8;
height:663;
z-index:1;
left: -643px;
top: 0px;
}
#Layer8 {
position:absolute;
width:635px;
height:488px;
z-index:6;
left: 131px;
top: 184px;
}
-->
</style>
</head>
<body>
<div id="Layer1"><img src="Picture Files/5060 Logo.jpg" width="1014" height="161" /></div>
<div id="Layer2">
<p>
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Home Button.swf" />
<param name="quality" value="high" />
<embed src="Home Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
<br />
<br />
</object>
<br />
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="About Us Button.swf" />
<param name="quality" value="high" />
<embed src="About Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Coming Soon Button.swf" />
<param name="quality" value="high" />
<embed src="Coming Soon Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Whats Next Button.swf" />
<param name="quality" value="high" />
<embed src="Whats Next Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Multimedia Button.swf" />
<param name="quality" value="high" />
<embed src="Multimedia Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Contact Us.swf" />
<param name="quality" value="high" />
<embed src="Contact Us.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
</p>
</div>
<div id="Layer3"><img src="Picture Files/Horizontal Black Bar.png" width="1014" height="8" /></div>
<div class="style1" id="Layer4">
<p><br />
<u>COMING SOON</u></p>
<p><u><img src="Picture Files/DWI Shoot Front Page Pic.png" width="110" height="110" /></u><br />
<span class="style2">Hanover Park High School<br />
DWI Reenactment <a href="#">full story... </a></span> </p>
<p><img src="Picture Files/Tribeca Logo for Home Page.png" width="110" height="110" /><br />
<span class="style2">Working with the Tribeca<br />
Film Festival <a href="#">full story... </a></span></p>
<p>&nbsp;</p>
<p class="style1"><u>WHAT'S NEXT </u></p>
</div>
<div id="Layer6"><img src="Picture Files/Black Bar.png" width="8" height="700" />
<div id="Layer7"><img src="Picture Files/Black Bar.png" width="8" height="663" /></div>
</div>
<div class="style1" id="Layer8">
<div align="center">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ALWAYS GIVING 110% </p>
</div>
</div>
</body>
</html>

gmcrone
04-06-2007, 09:18 AM
Like I said in my previous reply, if you use absolute positioning you cannot center a page.

Mike...

domedia
04-06-2007, 01:58 PM
Like I said in my previous reply, if you use absolute positioning you cannot center a page.

Mike...

Unless he uses your tutorial on centered content, and set the container to position relative.

9supratt4: what else do you want us to do than show you the exact tutorial that will do this for you? You've yet to implement it.

9supratt4
04-06-2007, 05:10 PM
Unless he uses your tutorial on centered content, and set the container to position relative.

9supratt4: what else do you want us to do than show you the exact tutorial that will do this for you? You've yet to implement it.

Ok so maybe I am a little slow or something, but when I go through the tutorial (http://www.dreamweaverclub.com/css-center-content.php) it says nothing about centering when using a basic html page. There is no information regarding absolute & relative positioning in that tutorial and I am no longer using CSS. I am using a basic html page with layers. Is it as easy as just switching all the positioning to relative instead of absolute? I tried to use the wrapper inforation from the tutorial on the basic html page and it didn't work, but if I add that and then switch everything to relative, will it work then?

Sorry for being a pain, but I am quite new to web design. Thanks again.

domedia
04-06-2007, 06:07 PM
I think you're trying to implement this on an existing page. Start with a blank page and do the tutorial, then add you stuff inside the wrapper. Much easier that way, but it does require the CSS mentioned.

9supratt4
04-06-2007, 06:18 PM
I think you're trying to implement this on an existing page. Start with a blank page and do the tutorial, then add you stuff inside the wrapper. Much easier that way, but it does require the CSS mentioned.

Ok so what your saying is to start over. If I go to File>New, what should I use? Three Column Left Nave CSS Page Design?

domedia
04-06-2007, 06:42 PM
The tutorial will not work if you are dependent on using one of the premade layouts, sorry. It requires that you know enough to write some HTML and CSS :-(

You have to start with a blank document, follow the tutorial, and then insert your stuff.

9supratt4
04-06-2007, 07:52 PM
OK so I started over and I have been able to get the page to center, but when I switch all the positions to relative it completely distorts the entire page. I have followed the tutorial and this is still what happens. I must be missing something :confused: . Any suggestions?? Thanks again.

<!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">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="3col_leftNav.css" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
position:relative;
width:851px;
height:161px;
z-index:1;
left: 4px;
top: -2px;
}
#Layer2 {
position:relative;
width:111px;
height:231px;
z-index:2;
left: 3px;
top: 168px;
}
#Layer3 {
position:relative;
width:850px;
height:2px;
z-index:3;
left: 4px;
top: 159px;
}
#Layer4 {
position:relative;
width:8px;
height:663px;
z-index:4;
left: 114px;
top: 167px;
}
#Layer5 {
position:relative;
width:541px;
height:488px;
z-index:5;
left: 122px;
top: 167px;
}
.style1 {
font-family: Zeroes, Arial, "Times New Roman";
color: #000000;
font-size: 36px;
}
#Layer6 {
position:relative;
width:250px;
height:660px;
z-index:6;
left: 757px;
top: 167px;
}
#Layer7 {
position:relative;
width:9px;
height:663px;
z-index:6;
left: 663px;
top: 167px;
}
#Layer8 {
position:relative;
width:250px;
height:660px;
z-index:7;
left: 672px;
top: 167px;
}
.style2 { font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--end navBar div --><!--end headlines --><!--end content --><br />
<div id="Layer1"><img src="Picture Files/5060 Logo.jpg" width="917" height="161" /></div>
<div id="Layer2">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/Home Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/Home Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
<br />
<br />
</object>
<br />
<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/About Us Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/About Us Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/Coming Soon Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/Coming Soon Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/Whats Next Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/Whats Next Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/Multimedia Button.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/Multimedia Button.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
<br />
<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="105" height="21">
<param name="movie" value="Picture Files/Nav Buttons/Contact Us.swf" />
<param name="quality" value="high" />
<embed src="Picture Files/Nav Buttons/Contact Us.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="105" height="21" ></embed>
</object>
</div>
<div id="Layer3"><img src="Picture Files/Horizontal Black Bar.png" width="917" height="8" /></div>
<div id="Layer4"><img src="Picture Files/Black Bar.png" width="8" height="663" /></div>
<div id="Layer5">
<p><img src="Picture Files/Current Projects Page DWI Picture.png" width="539" height="310" /></p>
<p align="center" class="style1">ALWAYS GIVING 110% </p>
</div>
<div id="Layer7"><img src="Picture Files/Black Bar.png" width="8" height="663" /></div>
<div id="Layer8">
<div align="center" class="style1">
<p><u><br />
COMING SOON </u></p>
<p align="left"><u><img src="Picture Files/DWI Shoot Front Page Pic.png" width="110" height="110" /><br />
</u><span class="style2">Hanover Park High School<br />
DWI Reenactment <a href="#">fu</a><u><a href="#">ll story... </a></u></span></p>
<p align="left"><img src="Picture Files/Tribeca Logo for Home Page.png" width="110" height="110" /><br />
<span class="style2">Working with the Tribeca<br />
Film Festival <a href="#">full story... </a></span></p>
<p align="left">&nbsp;</p>
<p align="left"><u>WHAT'S NEXT <br />
</u></p>
</div>
</div>
</div>
</body>
</html>

domedia
04-06-2007, 10:01 PM
don't change them over to relative, it makes no sense. Yo already have top and left positions defined for each layer. Are you pasting this from another document?
You don't have any of the styles for #wrapper etc for centering the content in there either, I think you somehow deleted it.

9supratt4
04-06-2007, 10:03 PM
don't change them over to relative, it makes no sense. Yo already have top and left positions defined for each layer. Are you pasting this from another document?

If I leave them at "absolute" then the page never centers. No I am not pasting from another document. Everything has been done using layers.

domedia
04-07-2007, 04:42 PM
No, it's not centered because none of the CSS from the tutorial is in your page.