# How to center frame based webpage



## DavidLang (Sep 20, 2007)

I have created a website in Dreamweaver that uses multiple nested frames. I need to have the site horizontally center on the screen (right now it is stuck to the left side of the webpage).


----------



## tomdkat (May 6, 2006)

If you're using a frameset, I think you might be stuck. Are you using "traditional" frames or iframes?

Peace...


----------



## DavidLang (Sep 20, 2007)

I suspect that I am using traditional frames, given that I am mostly punching buttons in Dreamweaver and I have never heard of "iframes".


----------



## tomdkat (May 6, 2006)

Ok, assuming you are using traditional frames (if you look at your HTML source, if you see a tag, you know you're using traditional frames), you won't be able to do the manipulations you desire. At least I don't think you'll be able to. 

A friend of mine was in a similar situation where he was using traditional frames and needed a "browser level" scroll bar so he could scroll the entire page. We got him switched over to a 3-column CSS layout and his site is working better than it ever did! 

Maybe if you post your HTML, we can better help you. 

Peace...


----------



## namenotfound (Apr 30, 2005)

Couldn't he just center the page itself, then it will appear centered within the frame. Though the frame itself won't be centered, the page within the frame *should* be.


----------



## tomdkat (May 6, 2006)

Sure, he could try centering the page that's displayed inside the frame but I'm not sure how consistent that would be across browsers and at different screen resolutions, etc.

If we get to see his actual HTML, maybe we could cook up a brilliant scheme to help him and take over the world... 

Peace...


----------



## DavidLang (Sep 20, 2007)

Thanks for the dialogue. I will be happy to post the html code and appreciate the input.

What is the best way to post the code? Paste it into here? Direct you to the website so you can view the source code there?

Thanks


----------



## Anthony:-P (Nov 24, 2006)

Hi,

If you click the < > on the advanced reply / post screen it'll put html tags around your code. Or, links to the site may also help.

Regards,
Anthony


----------



## DavidLang (Sep 20, 2007)

I am unclear if this is the code that people are looking to see but here it is.

The URL is http://www.storyasmedicine.com

Thanks for the help.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Story As Medicine  The Healing Powers of Hypnotherapy with Teressa O'Caer
```


----------



## tomdkat (May 6, 2006)

Thanks for posting your HTML. That paints a much better picture of what's going on.

Looks like you will want a different page layout. Ditch the traditional frames and use iframes. Using iframes will allow you to have areas that can be independently scrolled from the rest of the page AND you can scroll the entire page, if necessary. Plus, you can put all of the iframes in a DIV that can be centered or justified as you like.

I'll see about working up a prototype to illustrate what I mean. I'll also see if I can use DreamWeaver CS3 to do it. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here is some HTML I cobbled up in DreamWeaver CS3 that mimics what it looks like you're trying to do:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Story As Medicine The Healing Powers of Hypnotherapy with Teressa O'Caer</title>
<link href="story-style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	background-color: #dbdbc9;
}
-->
</style></head>

<body>

<div class="pagebody">
  <div class="navigation">Navigation menu goes here</div>
  <div class="mainarea">
    <div class="header">Header goes here!</div>

    <div class="maincontent">
      <p align="center">Main page content goes here!</p>
    </div>
    <div class="rightarea">Right plants goes here</div>

  </div>
  <div class="footer">Copyright &copy; Footer blah blah</div>
</div>

</body>
</html>
```
 Here is the CSS stylesheet:

```
@charset "utf-8";
.pagebody {
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	border: thin solid red;
	height: 650px;
}
.navigation {
	display: block;
	float: left;
	width: 10%;
	position: relative;
	margin: 0px;
	padding: 0px;
	border-right-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: #666666;
	height: 600px;
}
.mainarea {
	display: block;
	border: thin none #66CCFF;
	float: right;
	height: 500px;
	position: relative;
	width: 89.5%;
	margin: 0px;
	padding: 0px;
}
.rightarea {
	display: block;
	float: right;
	width: 20%;
	position: relative;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #9966CC;
	border-right-color: #9966CC;
	border-bottom-color: #9966CC;
	border-left-color: #999999;
	margin: 0px;
	padding: 0px;
	height: 400px;
}
.header {
	display: block;
	height: 200px;
	width: 100%;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
.footer {
	display: block;
	height: 100px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	float: right;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: italic;
	text-transform: capitalize;
	text-align: center;
}
.maincontent {
	display: block;
	float: left;
	height: 100%;
	border: thin none #990033;
	width: 79%;
}
```
This isn't complete but should demonstrate how the page can be "sectioned" yet centered as a whole.

Attached is a screenshot of the above HTML in Opera 9.23 on Windows XP.

Is this in the right direction, at least? The sections identified could be iframes, allowing you to load whatever HTML files you were loading in the frames you have now.

Peace...


----------



## tomdkat (May 6, 2006)

So, what did you end up doing?

Peace...


----------



## Tact (Sep 9, 2002)

haha. reminds me of my old site. all those beatiful frames.

i'm agreeing with being able to use a single iframe for that particular setup. (gorgeous btw) very very beatiful. 

my only quick fix suggestion however if you don't want to redo the whole thing (i know i wouldn't) would be perhaps adding one more frame to the very very far left, which wil just have a green background, and simply having it push everything else to the center. but using percentages for that prolly wouldn't work. they'd either push all the way right or... not push at all. and a specific width might be too little or too much for certain resolutions. 

so i'm going with the single iframe alternative. as it has been suggested.


----------

