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 Photoshop Designs to Code
  • Discussion

  • Study Guides

  • Table of Contents

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 Educator.com

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!

Correcting Box Placement

  • Now that we have the boxes built with div tags, and given each box a name by adding an id to each box, we can now position using CSS
  • Before we try & position these boxes we need to be sure they are nested correctly
  • We will have trouble with positioning if they are not nested properly
  • We will look over the wireframe once again and make sure our div boxes are correct
  • Notice the lowerColText & lowerColHeader are not showing up in light blue
  • These boxes are not located inside the lower content box so they are not getting the light blue color
  • We need to correct this
  • To move a box:
    1. select the border of the box you want to move
    2. Use edit->cut
    3. Move your cursor into the box where you want it
    4. Use edit->paste
  • Make sure that these 2 boxes are showing the blue
  • this is why I like to add a background color even if it is not perfect
  • this helps you see any errors that can happen
  • I have start & complete files for each of the lessons in this chapter
  • Go to the downloads area to download or open the chapter 9 begin folder
  • There is a pdf of Chapter 9 files that lists the start & end versions of each of these files so you can use those files in case you are having issues or wish to view only a specific chapter exercise
  • I also have a separate pdf with a listing of all the css properties for each item in the completed file for this lesson that you can use to compare with your version