# Centering Website



## Ckyfan (Apr 1, 2003)

Hey everyone, I am designing a 800x600 site, but when I view it on my monitor 1024x768 
its not centered. I need a code for the site to be centered no matter what resolution you look at it cause as of right now the whole site sits in the right corner. Then one more thing, on my nav bar one of my buttons doesnt line up with the rest if I could get some help with that too. 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=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:280px;
	height:300px;
	z-index:1;
	left: 136px;
	top: 217px;
}
#apDiv2 {
	position:absolute;
	width:587px;
	height:400;
	z-index:2;
	left: 350px;
	top: 600px;
}
-->
</style>

<style type="text/css">
.menutitle{
	cursor:pointer;
	color:#000000;
	width:150px;
	text-align:center;
	font-weight:bold;
}

.submenu{
margin-bottom: 0.5em;
}
#apDiv3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 321px;
	top: 204px;
}
#apDiv4 {
	position:absolute;
	width:257px;
	height:214px;
	z-index:3;
	left: 13px;
	top: 271px;
}
#apDiv5 {
	position:absolute;
	width:500px;
	height:420px;
	z-index:4;
	top: 160px;
	left: 280px;
}
.style3 {font-size: 15px}
body {
	background-image: url(background.gif);
	background-repeat: no-repeat;
}
.style5 {font-size: 24px}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body>
<table width="800" border="0">
  <tr>
    <td>
<div id="Logo"><img src="upperlogo.png" width="752" /></div>
<!-- Keep all menus within masterdiv-->
<div class="style5" id="apDiv4">
<a href="aboutus.htm" target="iframe"  STYLE="text-decoration: none"><strong>About Us</strong></a><br />
<a  STYLE="text-decoration: none" href="cliental.htm" target="iframe"><strong>Cliental</strong></a><br />
<a href="customcomposites.htm" target="iframe"  STYLE="text-decoration: none"><strong>Custom Composite</strong></a><br />
<a href="production.htm" target="iframe"  STYLE="text-decoration: none"><strong>Production Work</strong></a><br />
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')"><a  STYLE="text-decoration: none" href="nationalrv.htm" target="iframe">National Rv</a><br />
    </div>
<span class="submenu" id="sub1">- <a href="accessories.htm" target="iframe"  STYLE="text-decoration: none">Accessories</a><br>
	  - <a href="pricing.htm" target="iframe"  STYLE="text-decoration: none">Price & Availability</a></span><span class="submenu"><br>
	  </span></div>
	<a href="contact.htm" target="iframe"  STYLE="text-decoration: none"><strong>Contact Us</strong></a><br />
</div>
   
    </div>
    </td>
  </tr>
</table>
<div class="style3" id="apDiv2">© Ortega Manufacturing 2008. All Rights Reserved.</div>
<iframe name="iframe" id="iframe" height="420" width="500"  SCROLLING=AUTO src="aboutus.htm" frameborder="0"
style="position:absolute; top:170px; left:270px"> ></iframe>
</body>
</html>
```


----------



## caraewilton (Nov 7, 2007)

Create a wrapper and place it around your content.

CSS
#wrapper {
width: 800px;
margin: 0px auto;
}

HTML

all the other stuff goes here


----------



## Ckyfan (Apr 1, 2003)

I changed it, but it didn't work I probably did it wrong, im a noob to all of this still so go easy on me.

```
<!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=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:280px;
	height:300px;
	z-index:1;
	left: 136px;
	top: 217px;
}
#apDiv2 {
	position:absolute;
	width:587px;
	height:400;
	z-index:2;
	left: 350px;
	top: 600px;
}
-->
</style>

<style type="text/css">
.menutitle{
	cursor:pointer;
	color:#000000;
	width:150px;
	text-align:center;
	font-weight:bold;
}

.submenu{
margin-bottom: 0.5em;
}
#apDiv3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 321px;
	top: 204px;
}
#apDiv4 {
	position:absolute;
	width:257px;
	height:214px;
	z-index:3;
	left: 13px;
	top: 271px;
}
#apDiv5 {
	position:absolute;
	width:500px;
	height:420px;
	z-index:4;
	top: 160px;
	left: 280px;
}
.style3 {font-size: 15px}
body {
	background-image: url(background.gif);
	background-repeat: no-repeat;
}
[B][SIZE="6"]#wrapper {
	width: 800px;
	margin: 0px auto;[/SIZE][/B]
}
.style5 {font-size: 24px}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body>
[B][SIZE="4"]<div id=wrapper>[/SIZE][/B]
<table width="800" border="0">
  <tr>
    <td>
<div id="Logo"><img src="upperlogo.png" width="752" /></div>
<!-- Keep all menus within masterdiv-->
<div class="style5" id="apDiv4">
<a href="aboutus.htm" target="iframe"  STYLE="text-decoration: none"><strong>About Us</strong></a><br />
<a  STYLE="text-decoration: none" href="cliental.htm" target="iframe"><strong>Cliental</strong></a><br />
<a href="customcomposites.htm" target="iframe"  STYLE="text-decoration: none"><strong>Custom Composite</strong></a><br />
<a href="production.htm" target="iframe"  STYLE="text-decoration: none"><strong>Production Work</strong></a><br />
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')"><a  STYLE="text-decoration: none" href="nationalrv.htm" target="iframe">National Rv</a><br />
    </div>
<span class="submenu" id="sub1">- <a href="accessories.htm" target="iframe"  STYLE="text-decoration: none">Accessories</a><br>
	  - <a href="pricing.htm" target="iframe"  STYLE="text-decoration: none">Price & Availability</a></span><span class="submenu"><br>
	  </span></div>
	<a href="contact.htm" target="iframe"  STYLE="text-decoration: none"><strong>Contact Us</strong></a><br />
</div>
   
    </div>
    </td>
  </tr>
</table>
<div class="style3" id="apDiv2">© Ortega Manufacturing 2008. All Rights Reserved.</div>
<iframe name="iframe" id="iframe" height="420" width="500"  SCROLLING=AUTO src="aboutus.htm" frameborder="0"
style="position:absolute; top:170px; left:270px"> ></iframe>
</div>
</body>
</html>
```


----------



## caraewilton (Nov 7, 2007)

I think the position:absolute and left:136px is what is messing with the centering.


----------



## Ckyfan (Apr 1, 2003)

nope wasn't it, it only centers my logo at the top the rest of the page still stays to the side.


----------



## caraewilton (Nov 7, 2007)

Can you provide a live link or can you upload a zip of the html and css so I can have a proper look at what is going on.


----------



## Ckyfan (Apr 1, 2003)

alright no problem, here it is.


----------



## caraewilton (Nov 7, 2007)

I got the html files. Do you have a css file.


----------



## caraewilton (Nov 7, 2007)

No worries I have found it!


----------



## caraewilton (Nov 7, 2007)

Hi there

Okay this is how I would do it.

I see you want to use frames. This is a very bad idea. Many browsers do not support frames. Search engines don't like them. They are in general not used any more.

It is better to have separate pages or use php.

I would go for separate html pages as these are easy. You will note there is a separate style sheet attached. You can set your font styles for paragraphs

headings h1, h2 etc here.

You can then attach this one sheet to all pages.

Here is an example of a site I am currently working on which uses this method. You will notice it is versatile and the effect is very similar to using frames without all the hassles.

LINK

(please note I am currently working on this site so not all links work yet, but most do).

I also try to use limited javascript as it slows down pages and some people have it turned off altogether.
For the left column navigation I have created a simple list navigation similar to the one shown in my example. In the style sheet you will see this as the .nav elements.

The other advantage to setting things out like I have is that the site validates. this means more web browsers will be able to render your page correctly.

Cheers
Cara

P.S. It is better to have a page that scrolls down as this is what people expect.


----------



## Ckyfan (Apr 1, 2003)

yea, I kinda knew that frames weren't a good thing to use, but I was left with no choice. I am not familiar with php nor javascript, and am basic at html. So that was the easiest approach for me. I appreciate the help though, it looks much better now. Thanks again

Edit: although I have a question now, I saw how on the about you had tripled the information, I deleted it so it just be the one paragraph instead of the 3 other copies but then the background shrunk down to the text how do you have so it fills the page regardless of the content filling that far. Is it still possible to make that drop down menu though that I had before? or would you just not recommend it at all since its javascript?


----------



## caraewilton (Nov 7, 2007)

Ckyfan said:


> yea, I kinda knew that frames weren't a good thing to use, but I was left with no choice. I am not familiar with php nor javascript, and am basic at html. So that was the easiest approach for me. I appreciate the help though, it looks much better now. Thanks again
> 
> Edit: although I have a question now, I saw how on the about you had tripled the information, I deleted it so it just be the one paragraph instead of the 3 other copies but then the background shrunk down to the text how do you have so it fills the page regardless of the content filling that far. Is it still possible to make that drop down menu though that I had before? or would you just not recommend it at all since its javascript?


I am not against javascript entirely, but just make sure the content is still available if somebody has javascript turned off.

You can create drop down menus using only css. Have a look at Stu Nichol's demonstrations on how to do this.

With reference to setting the height of the page there are some options.
You can use min-height (although older browsers like IE6 don't see it).

HTML

```
<body>
	<div id="wrapper">
		<div id="background">
			<div id="logo"></div>
			<div id="left-column">
				<div class="inner-wrap">
					<div class="nav">
						
						<ul>
							<li><a href="#nogo">About Us</a></li>
							<li><a href="#nogo">Cliental</a></li>
							<li><a href="#nogo">Custom Composite</a></li>
							<li><a href="#nogo">Production Work</a></li>
						</ul>
						
					</div>
					<p>&nbsp;</p>
				</div>
			</div>
			<div id="right-column">
				<div class="inner-wrap">
					<h1>About Us</h1>
					<p>We are based out of Hemet California we have recently merged with 
					a very reputable company out of Sanna Fe Springs CA, known as Del 
					Craft Plastics. They have been in the composites industry for 
					approximately 30 years and combined with Ortega MFG we have over 50 
					years experience in the fiberglass composite industry. Del Craft 
					Plastics has moved their operations and personnel to Hemet CA, this 
					has greatly expanded our client base. We have done business up to 15 
					years straight with these large corporations such as JBL 
					professionals, Edison, National RV, and Thor. No job is to small and 
					we are more than capable of handling high volume parts. While other 
					companies are going out of busyness we are growing even in this poor 
					economy. We have approximately 12,000 sq. ft. of production space 
					and over a half acre of land for mold storage.</p>					
				</div>
			</div>
		</div>
		[COLOR="Red"]<div id="footer">&copy; Ortega Manufacturing 2008. All Rights Reserved.</div>[/COLOR]
	</div>
</body>
```
Note I moved the footer div.

CSS Changes in red


```
body {
	font-family: Arial, Helvetica, "Trebuchet MS", sans-serif;
	font-size: 80%;
	color: #000000;
	margin: 0px;
	padding: 0px;
	[COLOR="Red"]height: 100%;[/COLOR]
}

#background{
	background-position: center top;
	width: 800px;
	background-image: url('background.gif');
	background-repeat: no-repeat;
	[COLOR="Red"]min-height: 600px;[/COLOR]
}
```


----------



## Ckyfan (Apr 1, 2003)

thank you very much again, you've been a load of help


----------



## caraewilton (Nov 7, 2007)

Happy to contribute and pleased if I have been of some assistance


----------



## Ckyfan (Apr 1, 2003)

I have another question I now have obtained a domain name, and host
where would I store all the site content like pictures, background, banner, etc.
I was thinking to create a images folder, then I would have to have everything on the site css and stuff linking to those images in that folder is that practical or should I just upload everything together in one folder?


----------



## caraewilton (Nov 7, 2007)

Good morning.
What program are you using to create these web pages?


----------



## Ckyfan (Apr 1, 2003)

dreamweaver, I know of that there is a thing where you can connect to the host server using it, but im not very familiar with it.

Edit: I did it outside of dreamweaver, I just uploaded the html files directly to the server in the main folder then created an images folder that the html pages link to.


----------



## caraewilton (Nov 7, 2007)

Ckyfan said:


> dreamweaver, I know of that there is a thing where you can connect to the host server I did it outside of dreamweaver, I just uploaded the html files directly to the server in the main folder then created an images folder that the html pages link to.


This sound fine.


----------



## Ckyfan (Apr 1, 2003)

alright, well just thought I would say thanks again


----------



## caraewilton (Nov 7, 2007)

Super, I would love to your site...maybe you could post the address.


----------

