Problem with layers and centering in Dreamweaver

Cogworks · 11-05-2007

Hi Guys,

I'm totally new, both to these forums, and to web design in general. I'm guessing I might take a bit of flak for this, but I'm desperately trying to design a website for myself speedily, as I'm on a trial version of Dreamweaver. The method I used to construct the site below was to create a background image and then use layers to place additional mouseover images to form the nav bar, and insert additional pictures and text in layers as needed. The site in question is below:
Charles Mathews - Cogworks Entertainment: Composer and Arranger

What I can't seem to work out, and I have been looking and trying for a few days now, is how to make all the content of each page center in the web browser, regardless of the monitor size or screen ratio. This seems to be a pretty common newbie problem, but all the solutions I found confused me without any specific reference to my own site.
I did try one method that sort of worked, but it seemed to move the base image, but left all the button and content layers where they were, messing the whole site up completely. Would any kind soul on here take a look at my site and advise me on how to proceed? I can understand that its probably horribly designed, and it would be good to start again, but for now, and I would like to get better at this, but for now, I really need to get that site centered and working so I can use it for the intended purpose.
Thanks in advance!
Charlie

*notjustgraphics* · 11-05-2007

Hey Charlie...

No Sweat!

Actually it's easier than you might think.

It requires the use of a 'wrapper' or an outer container with a predetermined width.

For simplicity, i used your splash page as an example. Your image is 1024px wide so it made sense for the wrapper to be 1024px wide.

HTML Code:

<body>
  <div id="wrapper">
    <img src="Splash Screen Jpg.jpg" width="1024" height="768" />
  </div>
</body>

Now of course, we have to apply some CSS to the div to make it center automatically.

HTML Code:

#wrapper {
    width:1024px;  //Defining the width - necessary for centering
    margin:0 auto; // The magic
}

I'm sure you can apply this to your pages.

Hope it helps!

Cheers.
Mike.

Cogworks · 11-06-2007

Thanks Mike,

I kind of understand what those two pieces of code do. If I'm not mistaken, it makes an invisible box around everything and then centers that box, and thus everything in it, relative to the center of whatever screen or resolution the user is running.
I don't even know what css is yet, apart from what it stands for, but I think I'd better try and start learning fast.
I tried using this code though, and nothing happened. I expect its because my knowledge of html is so shaky I don't know where in the code to paste it. Think you could tell me exactly where in the string of code to insert those two snippets, and whether they need blank lines above and below etc?

*notjustgraphics* · 11-06-2007

Sorry Cogworks...

I didn't notice that all your layer's are set for position:absolute

Unfortunately, the way these layers are created, i don't think centering is possible.

an absolute position means just that, absolute. So if you place the top left corner of a div (or layer) at 10,10 it's always going to appear their no matter whether the users screen size is 640x480 800x600 1024x768 or larger...

Your CSS has to be reworked to achieve the centering that you want... Unfotunately, i don't have the time to do it for you now... i will try this evening.

Regards,

Mike.

Cogworks · 11-06-2007

wow, thats a pain! I think I read on here somewhere that the absolute positioning thing is a problem with html editors like dreamweaver. I don't entirely understand what you're referring to with the css, but I'll try and find out. If you were able to give me some pointers for fixing it, I'd be mighty grateful!

Charlie

Jacorre · 11-06-2007

When using Dreamweaver, if you allow the software to create the CSS and divs for you then I believe it always absolutely positions everything for you. Basically it's trying to do exactly what you see on your screen.

For better control, my recommendation is to learn more about CSS and HTML in order to achieve your desired results.

CSS can be placed within the head tags on a page or you can use an external file as well.

The div tags are defined within the body of the page.

Look for tutorials on CSS. As a starting point you could use W3 Schools.

Cogworks · 11-07-2007

Once I know what CSS is, and how they work, can I somehow make those layers center with the rest of the page without having to redesign the whole site from the ground up?

*unleash* · 11-07-2007

You don't have to redesign the page, but you do have to alter you're complete script behind it, as all you're layers are absolute, and therefore they should all be changed to get what you want....

just start with learning CSS and when you know the basics, then you should try to rewrite parts of the script, that is my personal opinion on this matter

*notjustgraphics* · 11-13-2007

I was just about to work on this for you but I see you've already gotten it centered!

Sorry i took so long.

Cheers
Mike.

Roosta · 11-30-2007

Can you just change the absolute value to something else? I'm having the same problem. What did you do to get it to work cogs?

index

Kenneth · 11-30-2007

Quote:

Originally Posted by Roosta

Can you just change the absolute value to something else? I'm having the same problem. What did you do to get it to work cogs?

index

I haven’t seen Cogs around here for some weeks, but when I saw his question and that he was using Dreamweaver, I just liked to see how it would look in GoLive
So I centered it in GoLive and sent it to him, he made some adjustments and that is probably what it looks like right now. (I can still see some auto generated crap code there!)
But if you could just give an address and what program you are using. I´m sure many here are willing to help!
ken.

*notjustgraphics* · 11-30-2007

Hey Roosta

Try this... it's a quick fix, but it should work without too much code changing.

Immediately under the <body> tag, add the following two lines of code:

HTML Code:

<div style="width:100%"> <!-- create container div -->
  <div style="position:relative; width:950px; margin:0 auto;"> <!-- center inner div within the container div -->

Then, immediately before the </body> tag you need to close the two divs created above with:

HTML Code:

  </div> <!-- close div.inner -->
</div> <!-- close div.container -->

That should work for ya...

Basically, we're creating an envelope to tuck the entire site into... The envelop is sized in percentage (100%) to 'learn' the window size of the user's browser.

Then, inside of the main envelope, we tuck another envelope, but now, because we've learned the overall width of the user window, we can position the inner envelope in the center using the margin:0 auto; css tag.

In order for this to work, the width of the inner div (or envelope) has to be declared. I used 950px in my example because it appeared to be the maximum width of your site, but you can fine tune that value if necessary.

I find dreamweaver (and golive for that matter) to be great editors but when it comes to WYSIWYG generators, they do what they can but are no substitute for a strong knowledge of HTML and CSS.

Cheers.

Mike.

Roosta · 11-30-2007

You guys RAWK! Gonna give it a whirl right now & post back! Wish me luck!

Roosta · 11-30-2007

Quote:

Originally Posted by Roosta

You guys RAWK! Gonna give it a whirl right now & post back! Wish me luck!

OMG! You guys are great! That did the trick!

Thanks so much!

peace
roosta

GBW · 12-07-2007

"Notjustgraphics" thank you!
I have been wondering how to resolve the problem of centering layers on the screen and decided to Google it. The first site I came across said it couldn't be done and then I found this forum. These couple of lines of code solved my problem so easily. I had to join just to tell you that.