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 CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • 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 Page Content

  • We are going to center the page layout in the browser
  • We will add a new div tag called wrapper in order to contain the page in the browser
  • Select the body tag and choose insert div tag so a new div tag will surround all of our page code
    • Add a CSS rule for #wrapper, width of 90%, and a left and right margin of auto
    • This will wrap all the content into a div tag limiting the width and center the page in the browser
    • Add a background color to the wrapper id to make it easier to view the page so you can see what is going on
  • The header tag has left padding of 45 px which is extending the web page outside the wrapper layer
    • Reduce the left padding to 0 and it will take care of the issue
  • Change the background color for the web page by adding a new selector for the body tag and assign the tag a background color of black
  • Set the background color for the wrapper id to a different color

Centering Page Content

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
  • Properties 0:44
    • <body>
    • Insert Div
    • New CSS
    • Selector Type
  • Wrapper 1:47
    • Box
    • Set Width
    • Auto Margins
    • Background Color
  • Background Color for the Page 6:33
    • Body
    • Properties