Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Centering a Page in the Browser

  • We want to center our page in the browser
  • How do we do this with CSS?
  • Very misunderstood concept
  • There need to be 3 properties to the outer layer
    1. margin: auto
    2. width
    3. position: relative
  • You only need to add number 3 if you have absolute positioned elements on the page

Centering a Page in the Browser

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Centering a Page with Templates 0:11
    • Edit Template
    • Preview in Browser
    • Edit External Styles
  • Add Wrapper ID 3:30
    • Insert Div Tag
    • New CSS ID Rule
  • Save and Update Files 7:54
  • Preview in Browser 8:57
  • Delete Wrapper ID 11:15
  • Save and Preview in Browser 11:59
  • Summary 13:04

Transcription: Centering a Page in the Browser

We are now going to take a look at how to center content on a web page.0000

What I want to do is work with my Dreamweaver template file to do this.0006

If I open up this file, instead of going out to the Files panel to open it, it is possible to open it directly through this Templates area within your I'm going to do it that way; the more you can work with your templates within this area, the less likely you are to accidentally move things around within that Templates folder in your site files.0012

So, I am going to right-click this innerContent; this is my template I want to open, and when I right-click, you can see, I do get an Edit option.0036

This is one way to edit; or, I can always go down to the pencil at the bottom right-hand corner of this panel.0047

I'll choose Edit; you can see, that opens up my .dwt file for me; and what we are going to do is make some edits to this page.0055

Right now, this page is not set up to center (or be centered) in the browser.0066

So, this is my template file; if I preview it here in the browser and I go to move this, you can see how my content does stay somewhat centered on the page.0074

But what if I didn't want this orange area to go all the way across?--what I could do is just make sure that it stays centered at a specific width; and I would like to show you how to do that.0089

And then, we can decide if we want to keep the template that way, or if we want to go back to having that orange bar spread all the way across in the browser.0104

Now, in order to work with this, I need to work in CSS styles; now, right now, I have a slightly different style sheet attached to this template page.0114

This is styles-inner, and this is the style sheet for the inner pages of our website.0125

And, if I look at this (I'm going to double-click Assets and close it up), here are all the styles for this page.0133

Now, notice: all of my ID's (ID's begin with a pound sign) are listed first; and this is how I normally organize my styles in the Styles panel.0141

You can click and drag to place these in order; and what I tend to do is put them in the sequence they are on the page in the code: ID's first; then I add my HTML tags, which don't have a dot or a pound; and then, my classes go at the bottom.0153

What this allows me to do is locate some of these particular selectors, when I need to modify something, a little bit easier.0174

It's completely up to you, but I tend to find that I can speed things up if I keep things organized.0183

Now, notice, I don't have any outer wrapper layer for this page; so, what I want to do is create an outer wrapper box that is going to contain all my content; and that way, I can take that box and keep it centered in the browser.0190

So, that is what we are going to do: I am going to go ahead and add a wrapper ID to this page.0208

And in order to do that and surround all the content on the page (let me open up the Properties area just so you can see this a little bit easier), I am going to click the body tag.0217

Now, I know the body tag contains all of the content on the page, so that is the fastest way to select everything.0230

I know I have all of the code for the page; if I just do a Ctrl or Command, A, or an Edit, Select All, sometimes you can miss pieces of code.0238

Since we are in Dreamweaver, this will make sure we always get the exact correct code.0250

Think of the body tag as your Select All in Dreamweaver Design View.0255

Now that I have that selected, I am going to go up to the Layout tab and click the very first icon, Insert Div Tag.0261

This is going to put a div tag surrounding all of my content on the page.0270

Since I have it all selected, when I click the div, notice what I get: wraparound selection, which is exactly what I want.0275

If I didn't have anything selected on the page, this option would not show.0285

So, wraparound selection--and I'm going to create my new wrapper layer.0290

Now, I'll go ahead and create a new ID here; this ID is going to be called wrapper; I am going to add it to my styles-inner, that CSS file, and click OK.0297

Now, it is a matter of assigning those properties for this specific ID.0310

The first one I want to assign is a width; you must have a width assigned to your box that you want to center in the browser window.0315

If the browser doesn't understand the width of a box, it can't keep that box centered within the width of the browser.0328

So, I am going to set this: now, what width should I choose?0337

Notice: down here, the width that I have Dreamweaver set up right now is 1024x360; and if I move this, you can see that is a pretty good size.0342

I think what I am going to do is set my width to 1000, because subtracting 24 pixels is just fine from this, and I'll just keep it an even thousand--no real reason for that, other than I don't need it exactly 1024 anyway.0354

Scroll bars tend to take up a little bit of space, so this will allow for some of that.0373

Now, I need a width in order to center; the other thing I need is a margin; and the margin I choose is auto.0379

Now, I really only need this margin set up for the right and left; so I'm going to uncheck Same for All; in the right, I'm going to choose Auto; in the left, I'm going to choose Auto.0389

I have assigned a width (that is step #1) to my box; step #2--it needs a right and left auto.0404

Now, step #3 is only needed if you are using absolute-positioned elements on the page; if I was using absolute-positioned elements, what I would need to do is come in here and make sure this says Relative.0412

I have no absolute-positioned elements on the page, so I don't need to do that step.0429

I need a width assigned; I need a margin of left and right auto; and then, it's up to me if I need positioning or not, depending upon if there is any content inside that wrapper layer or on your page now that has absolute positioning: the wrapper must be set to Relative.0436

If there isn't, you don't even need to bother with that.0459

I'm going to click OK; the wrapper drops in; I'll click OK here; you can see, my page pulled in just a little bit; and let's put it in the browser and test it out.0462

Now, notice: when I save this template file, I have three files based on this; now, my Destinations and Specials need to be applied to the template.0474

That was not done in an earlier lesson by me, so I need to make sure that I do that.0488

This is my nice reminder about that.0494

So, I'll click Update; notice, all three files were looked at and updated.0497

Now, this is the thing that can catch you: notice, if I go to my CSS file, it has not been saved.0504

If I go to preview this in the browser, that is this message here--that is what this means.0513

Dreamweaver is prompting you, saying you changed the CSS file and have not saved it yet.0520

So, when it says some style is needed to accurately preview, that is usually what it is referencing--your style sheet.0526

I will say "Save them now--yes."0534

You can see, the save went away; on my style sheet, here is my page; and whatever browser window page I make, you can see--it stays nicely centered.0537

Now, there comes a point when it can't shrink any longer, right there; and I will deal with that when I look at my tablet and mobile size for the browser; but for now, we just made that work perfectly.0549

Let me check that, and I do have another update to do here; let me click Update, and it is going to go out and test my files.0563

I'll go ahead and close that one and say yes...0576

Now, here is my Update, and this is a little glitch I have started noticing in updating template files in Dreamweaver CS6--not the Creative Cloud version, but the DVD version: I do, once in a while, get multiple options for this.0580

Just keep clicking and updating, and they should go away, just like that.0598

If you happen to see those, and another extra one or two pop up, just click Update, and it will close itself out.0604

What I want to do is put this into Internet Explorer.0612

I want you to see that, even though this is a very old version of Internet can see, my page is moving just a little bit; when I click on the page, it is not quite centered perfectly.0617

So, some subtle little differences in I.E. 8...if I put this into Internet Explorer (or I.E.) 9, I would have no issues.0636

Just be aware: you want to be testing.0647

Here is my Update once again; and notice, it just kind of sits here for a second.0649

Now, I know I have already updated this a couple of times; so I am going to close; I'll click Update here and close that up.0657

OK, so that is updating our site, putting it into a centered browser.0668

Now, I have decided I don't really want this look; what it does is: it prevents that orange bar from going all the way across; so what I am going to do is delete that wrapper.0675

And the wrapper is right here; I had this rule selected, so it placed it there.0687

Any new rule always goes in right below whatever you have selected; I didn't worry about it, because I am not going to use this anyway.0694

Now, to delete an ID, I simply select it and click the trash can in the CSS Styles panel; and now, you can see, my orange bar goes all the way across.0704

Let me do a Save All; I'll go ahead and update; notice, nothing was updated, because all I did was modify the CSS file; I did not modify the pages themselves.0718

I'll close and put this back in the browser; I'll put it back in Internet Explorer, and I think that method looks a little bit nicer--keeping this all the way across and letting this adjust just a little bit.0732

Notice, now I have no issues in Internet Explorer: it is adjusting just fine.0747

That is how you can...0754

I will stop, and I'll go through that same process once more.0757

Close...and there we are--just a little glitch in Dreamweaver: I purposely did not do any updates to this version of Dreamweaver, so that it would be the basic, default version; and updates, I am sure, have corrected that issue.0762

But I wanted you to see some of the things that can happen with the default Dreamweaver view.0778

We just took a look at how to center content within the browser, if you wish to.0784

We also learned how to delete an ID from the CSS Styles panel, if you decide that isn't what you want to do.0790

To center content in the browser, you create the outer box by selecting the body tag; you create a new style rule for that box.0798

It must have a width assigned; you set left and right margin to auto; and you only need the third piece if there are any absolute-positioned elements on the page.0810

If there are absolute-positioned elements, set your position for that outer box to relative, and you will have nicely centered page content in the browser.0822

Even going back to older versions, that is usually very effective.0833

That is how you center page content in the browser, using Dreamweaver.0838

Thank you for watching; see you in the next lesson!0844