# [SOLVED] How do I center my website in Dreamweaver?



## clueless_ (May 25, 2012)

Hello, to give you some background, I'm pretty new to programming. I'm in the beginning phase of learning python.

In the meantime, I've created a website in adobe fireworks with several pages (one master page with a menu that goes on all pages--this menu includes dropdowns). (ie. I add html content in dreamweaver in order for my pages to be indexed.) Before I had dropdowns, I could easily center the page in Dreamweaver, but since incorporating dropdowns, I've initiated css (I have html, css & an image folder on the servers) Now I don't know how to center the pages. The previous way I did it no longer works.

Can anyone help me figure out how to center all of my pages? Do I have to center each page individually?

Thanks in advance for the help!:thumb:


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless,

Could you provide your code or, preferably, a link to your site? It's difficult to give you an accurate answer to your problem without understanding the details of how you programmed the pages. There are dozens of methods to centering content, spanning from the <center>, <table>, <div, and <span> elements and their attributes to several variations available directly through CSS, which will take precedence over the elements almost everytime.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

DDAoN,

Thanks for responding. Can I send you a private msg w/ the link?


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Would you like me to post css or html? Also, which page? The master page?


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

After reveiwing your code, I think I know your problem. There's no element or attribute to declare the content to be centered.

Now, the easiest modification to the code is to wrap the content of the <body> element in a <center> element, but that requires modifying every page. Instead, add to your CSS:

```
body {
	text-align: center;
}
```
If this, for some reason, doesn't work for all your pages, I'll have to take another look, but testing your code on my testbed with it, that fixed it.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

DDAoN,

Thanks for getting back to me. So just copy & paste that code at the top of my css page? And should I paste it on the "master page" or index?


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Here is the top portion of the css. This is where I put it, & nothing happened...I tried it on the master page and the index

td img {
/* Another Mozilla/Netscape bug with making sure our images display correctly */
display: block;
}

body {
text-align: center;
}

#FWTableContainer1331112892 {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
width:1152px;
height:864px;
text-align:left;
}


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

From your mentioning that, I took another look at your site and see that for every page you have a seperate CSS file. From what I see, they are all generally the same file, so you're increasing the amount of storage space required needlessly. I suggest you take the little bit of code that is different and merge all your CSS together, having all pages access the one CSS file with the CSS for all pages, whether a portion is used or not is better than repeating the rest in every file.

Considering that you may leave is seperate, you'll have to insert the CSS snippet I gave into EVERY CSS file, or use the <center> element in EVERY HTML file. One, or the other, but as you current have it set-up, you'll have to do it across the board. I highly suggest you merge the CSS, it'll save a LOT of trouble with modifying templating in the future.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

I see. So I did put it in the correct place though? I just want to make sure I did it right, then I can take the time & merge the css a bit later today.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

For some reason, fireworks created a css for every html page. But if I can fix that, It will save me time later.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

it was quicker for me to just paste it in all css pages right now. & It's still not centered. am I pasting it in the correct place?


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

Annoyingly, now I can't get it to work on my testbed. After you posted your second reply, just before my own, I went back to recheck. It appears to be a glitch in both IE-based browsers AND Mozilla-based browsers, though for different reasons. With the introduction of IE8, Internet Explorer seems to have limited support for the text-align style, and Firefox hasn't supported it since before v1.5.

I have found a solution!

Please, bare with me, as this will require to you edit ALL you HTML files.

First, from your ORIGINAL CSS replace:

```
#FWTableContainer1331112892 {
	/* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
	position:relative;
	margin:0px;
	width:1152px;
	height:864px;
	text-align:left;
}
```
 with

```
body {
	text-align:center;
	text-align:-moz-center;
}

#FWTableContainer1331112892 {
	/* The master div to make sure that our popup menus get aligned correctly.  Be careful when playing with this one. */
	position:relative;
	margin:0px;
	height:864px;
}

body table tr td#content {
	text-align:left;
}
```
Now, in the actual HTML of EVERY file, you need to find the TD to corresponds to the content you have on your homepage and replace:

```
<td rowspan="2" colspan="14" valign="top">
```
 with

```
<td rowspan="2" colspan="14" id="content" valign="top">
```
I can't give you a 100% reason for the troubles with text-align:center; in Firefox or IE8/9, nor can I properly explain how the width from the DIVs ID helped to prevent it from working, but it did. In short, I isolated bits of your code until I finally got what remained to center, then restored bits, repeating until I had isolated all the areas causing problems, then I focused on their CSS. Thankfully, it was just the one.

Please note, I posted this having only seen to your post about how Fireworks made every HTML page with a seperate CSS (it does that), it doesn't know how to do anything else as it is designed for templating, not website building. Dreamweaver is for that. Personally, I prefer Notepad, but that's me.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

oh you're AWESOME~!


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

Tell me that AFTER it works on your live site.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

I'll let you know. It might not be today, b/c I'm juggling a few things. But I REALLY APPRECIATE ALL YOUR HELP! Should I come back & post my result here?


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

Yes, please. It does us no good to wonder if our work was helpful or not.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Ok, I'm so eager to make this work so I followed your first instruction w/ one change. The container number is different on every css page (I still haven't compressed them together), so I cut & pasted what you gave on the ORIGINAL file & Used the container number associated with that page. (maybe I shouldn't have done that?)

The next instruction you gave I followed on the index page only because it was the only page that had :

Code:
<td rowspan="2" colspan="14" valign="top">

So I replaced it.

I uploaded it all & all of the lower links are on centered pages except "recipes" &"healthy" . All of the links on the top still align left.

I'm so glad there is a fix!


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Also, if this helps any, I have ONE javascript page i noticed. it's a .js file. That file is for my master page which contains the "menu" for the site.


----------



## DDAoN (Mar 19, 2011)

*Re: How do I center my website in Dreamweaver?*

clueless_,

Yes, I noticed the JavaScript file, it was one of my primary suspects for the problem, but turned out otherwise.

Can I assume you applied the code offline? Your live site doesn't appear to have the changes.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

That's weird...I just checked internet explorer & everything's working well there except the dropdowns are in the wrong place. I'm using Opera & haven't uploaded firefox on this computer yet.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

ok, I just cleared my cache & both ie & opera are centered. The dropdowns are the only thing out of alignment! YAY! I uploaded them to the server & they've been live it just seems there was a lag & I had to restart my browser.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

let me know if you can see it.


----------



## brent.charlebois (May 8, 2007)

*Re: How do I center my website in Dreamweaver?*

First of all, do not use <center> as that is old news. We are going to HTML5.

Text-align:center is OK but remember it centers text only.

Then set the body width to accommodate the width of your table with a little space on the left and right.. Then calculate the margin-left that will center the table using an absolute value in the CSS. The same for the margin-top position of the table.

For your drop-down menu, which I gather is on another page? again set a width for the body and specify the margin-top and margin-left of the drop-down menu.

You only need javascript to make the drop-down menu to be visible or not on a mouse-over and mouse-out. Of course you can get fancy and use javascript to animate a gradual drop of the menu.

I hope this helps you. In reality you have to get right into coding to make things work right.

BC


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

@DDAoN Long week. So I added some new pages to my site. I'm pretty much ready except I can't figure out how to plug in a google search box AND use my exsisting button for it. But THAT'S ANOTHER THREAD!!!

When I exported the updated file from fireworks, I must've unchecked the "css" boxes b/c now the site has all html and one .js page ( I noticed BrentC also mentioned I don't need css only java?) But all my css is on each html page. It's better to have a seperate css page right?


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

@BrentC Right now I just want a functioning site. Afterwards, I want to program the entire thing w/o the use of fireworks except for designing images. Your suggestions sound great, but I'm not too familiar w/ how to execute it all. On one css page or each css page. Add the code or replace some code.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

@ anybody...


----------



## brent.charlebois (May 8, 2007)

*Re: How do I center my website in Dreamweaver?*

Try the following CSS code:


```
body, html {
		margin: 0;
		background-color: #007700;
		text-align:center;
    }

*{padding:0; margin:0}


 div#container{
position: relative;
top: 0;right: 0;bottom: 0;left: 0;/*stretch across the whole container (body)*/
width:50%; height:50%;/*shrink to half this size*/
/*plonk in the middle*/
margin: auto;
background-color:#000000;
text-align: left;
width: 800px;
height: 900px;
padding: 5px;
margin: 0 auto;

}
```
Change the values of color and container width and height as you wish.

Of course you have to put your whole page in a div with an id="container"

I hope this works for you!

BC


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

@ Brent. I tried placing the code on my css page w/ no luck. (more than likely I did something wrong.)

This part went at the top:
body, html {
margin: 0;
background-color: #007700;
text-align:center;
}

*{padding:0; margin:0}


The rest, I pasted the code as follows for every container as follows & changed the color, width & height.

#FWTableContainerXYZ{position: relative;
top: 0;right: 0;bottom: 0;left: 0;/*stretch across the whole container (body)*/
width:50%; height:50%;/*shrink to half this size*/
/*plonk in the middle*/
margin: auto;
background-color:#000000;
text-align: left;
width: 800px;
height: 900px;
padding: 5px;
margin: 0 auto;

}


----------



## liamm (Jan 6, 2012)

*Re: How do I center my website in Dreamweaver?*

It's not always necesary to use "text-align:center". I center my websites using : 
magin-left:auto; margin-right:auto; and i hadn't had problems so far..


----------



## ttb (Jan 23, 2012)

*Re: How do I center my website in Dreamweaver?*

works in most browsers.



```
html body{margin:0;text-align:center;}
any div id or class{margin:0 auto}
```


----------



## wmorri (May 29, 2008)

*Re: How do I center my website in Dreamweaver?*



liamm said:


> It's not always necesary to use "text-align:center". I center my websites using :
> magin-left:auto; margin-right:auto; and i hadn't had problems so far..


These isn't anything wrong with the way that you are doing it. Just that when you use margin: auto 0 it is expected that you mean both margins.


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Ok, so I made sure the "text-align: center" was used instead of "text-align: left" in the code for the containers. Nothing changed--still not centered.

But then I went back into dreamweaver & tried something I used to do before I initiated css. I selected "all" on the html page in dreamweaver and clicked "format" , "align", & "center". This time, it worked. I don't know what I did or how I did it unfortunately (it must've been a combination of things) but until I have a better grasp of programming, this is all I wanted for now.

Thank all of you for your help. W/o the info, I'd still be aligned to the left  
If anyone feels like helping me tackle another issue w/ my google search set up, feel free to check out my other thread <3 

Thank you all!!! Mission Accomplished! :thumb:


----------



## clueless_ (May 25, 2012)

*Re: How do I center my website in Dreamweaver?*

Just a quick update on my clearly defined solution.

I figured out what I did to fix the problem. (Ofcourse after I posted the previous reply, I realized I could just center the home page & after I got every page to align my dropdowns weren't working...) But after learning a tiny bit more of how html & css works, I now know what I need to do. After I export from Fireworks, I combine my css in to 1 page. I set my margin in each div container to = auto.

Then in my html, where I specify style type, urls should ALL link to my 1 css page. Because Fireworks exports an html & css document for EVERY page on my site, I had to link EACH html page to the index css doc. (no I haven't learned how to combine my html into 1 document & yes that would make things so much easier.)

And that was it. I tried div wrappers etc etc etc & the answer was SOOOO simple. Boy that was a lot of work to learn how to center my page but I LEARNED SOOO MUCH!

Now I just need help w/ my google search! Thanks all!


----------

