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 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!

Absolute Positioning

  • We will be looking at CSS absolute positioning
  • This type of page layout offers fixed sizes for your elements
  • This is not a method that is used much anymore, but I think it is important to be able to understand this positioning method
  • Open div-id.html (from a previous lesson) & save it as absolute-positioning.html
  • This page was created using the float property
  • We will remove the float & clear properties from our css rules by choosing the ID, and then clicking the disable CSS property in front of the float & clear properties for the various boxes
  • Look over the page layout once we do that, note the divs fall on their own line directly below one another on the page
  • We will add absolute positioning and position content where we want it
  • Start by selecting the header ID & add position: absolute;
  • Once we do that we can use the top & left properties to position based on where we want that specific box located from the top & left corner of the browser window
  • Browsers provide an 8-11 px offset which we will address later
  • Add top & left properties to each of our boxes
  • Then play with the top & left properties to get the layout we want
    • header: top-10px & left-10px
    • nav: top-75px & left- 10px
    • content: top-75px & left-220px
    • footer: top-800px & left 10px
  • Notice how the content does not have a height
  • Play around with these divs, if we do not have content in the boxes, they collapse
  • We will add heights for the sake of this exercise since we have no content within the boxes on the page
  • That is how you can work with absolute positioning

Absolute Positioning

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
  • Absolute Positioning Introduction 1:15
  • Modifying Div Color 1:33
  • Code View of Elements 3:11
  • Delete Styles 3:52
  • Using Absolute Positioning 4:34
    • Add Position Property
    • Add Left Property
    • Adjusting Position and Width
  • Insert Right Div Tag 10:39
    • Assign Properties
    • Adjusting Position and Height
  • Summary 14:19

Transcription: Absolute Positioning

Welcome back to Educator.com.0000

We are now going to take a look at a unique type of positioning in CSS; it is not used quite as much as it used to be when it first came out, but I think it's important to get a handle on understanding what it means.0004

What I am going to do is show you, and we are actually going to convert a page from basic default positioning; we are going to set it up so that we control the positioning using absolute positioning.0019

This will give you an idea of working with boxes a little bit more in CSS.0035

What I'm going to do is take the div-id page that I created earlier; so if you do not have this page available, go out to the Course Files, and you want div-id.html.0041

I'm going to re-save this page, because I am really going to change it around; and I'm going to re-save it as absolute-positioning...and that is exactly what we are going to change it to.0058

Now, when you are working in absolute positioning, it is a type of positioning in CSS.0075

I'll go ahead and open up my Styles; what I am going to do is modify this page as we have it now and control it just a little bit differently.0082

Right now, I have a property on this page that is controlling the column layout just a little bit.0093

I'm going to modify that; but I am first going to change the colors of the pages.0103

I will select the outer wrapper, and you can see that that is blue: I am going to make this a little calmer color...and sometimes it is harder to find a calmer color; that one ended up almost the same color.0109

What I'll do is go out choose a light yellow instead.0124

And then, I am going to select my header and change that color also; it is pretty much the same color; I'm going to adjust that one to an orange.0128

The next one...I'm just going to go down the list and modify these colors to make it look very different from what it looks like now.0140

Here is a greenish color for that one: wow, that is kind of bright--I think I'll tone that down just a little bit; there we go.0149

And I'll choose my content area, and I think I'm going to make my content area just plain old white, so we can read the text if we need to.0159

You can see how easy it is to modify these things when you're working in CSS; I love that feature.0170

I might actually make this a light grey, so it's a little more obvious; I'll just go right above the white here, and there is my grey.0178

We have a new page set up; let's continue to modify this.0187

Now, if we look at our code here, you can see there is an outer wrapper, and that is my outer div; and then, inside that, I have all of these pieces.0192

Up at the top, I have all of my CSS rules; and these are the rules that we are actually changing when we use the CSS Styles panel.0203

So, instead of coming into the code here to make my changes, I can just do it up in this nice CSS Styles panel and be able to view it in Design View at the same time.0215

That is one of the benefits of working with Dreamweaver.0228

Now, what I want to do is...my navigation bar has a type of positioning that we haven't really talked about yet.0232

I'm going to select the Float property (I'll be referencing that in another lesson), and I'm going to click the trash can to get rid of that.0240

And notice what happened to my box here for my content; notice, also, that it has popped out of its outer wrapper layer.0251

These are the strange things that can happen to you.0261

Now, my content is moved in from the left just a little bit, and I did that by using this Margin Left.0265

I'm going to select that and click the trash can, also.0274

You can see that I have a box here, and I have a box here; this one is not quite to the top, and the grey one is ending up underneath.0278

How do I get these boxes positioned right next to one another using absolute positioning?--and that is what we are going to look at.0290

I'm going to make both of these a little bit narrower, because what I want to do is actually pull in a third column piece.0300

I'll make this nav a little bit narrower; I'll make it 200 pixels wide; I am going to go down to my content, and my width here is 750; I'm going to make it 550.0308

It is quite a bit narrower...actually, I'll make it 500 here.0324

Now, what I want to do is: using absolute positioning, I want to place this green nav bar area and my grey content area side-by-side.0330

Well, the first step in setting up absolute positioning is to add position absolute to your content.0342

Now, my outer wrapper I don't really have to worry about; I'm just going to keep that where it is; and my header is fine; what I want to do is modify these two boxes.0351

I click and select the box I want and modify the properties, just like we have been doing in playing around with a few of these properties in this lesson.0363

But there is a property called position; and I'll scroll down to that one--here is my position.0374

And if I use the dropdown, you can see there are a few different types of positioning.0383

Those are the pieces we are going to explore within this chapter.0389

I'm going to choose absolute positioning; look at what happened to my content--the two are right on top of one another.0393

Now, I am also going to take this margin and delete it; I don't want that interfering in any way; and my content...I will do the same: I'll select margin and delete it.0403

Now, notice: I have two absolute positioned boxes, and they are right on top of one another.0417

So, what is the deal with that?0425

Well, what has happened is: when you absolute-position content, you are dealing with a 00 start point for the content--and the 00 start point for both of these boxes is the same.0428

We have it inside our wrapper layer (the outer yellow box), and we have it underneath our header (which is the orange box).0444

Because of that, both of them are sitting on top of one another; so what I am going to do is take my content layer, and I'm going to add...my nav has absolute positioning; I'm going to add absolute positioning here, as well.0453

So, let me go down to position; and I'll choose absolute here; now look what happened.0470

Where did my nav go?--so you can see, some really strange things start happening here.0482

So, what I am going to do is fix this so that they end up side-by-side; but how do I go about doing that?0488

Well, both of these boxes have the same top left corner as the start point; so what I need to do is take my grey box and position it from the left-hand side; I need to move it to the right however many pixels.0497

Well, my navigation bar is 200 pixels wide, so how about I take this one and move it 200 pixels to the right.0514

The way I do that is: I just say Add a New Property, and the new property is Left; and what I want to say is, "How many pixels from the left do I want this to start?"0522

Instead of starting at the 00 start point, I am going to move it over from that; so how many pixels over?--well, let's start with the width of the navigation bar.0536

This is going to be 200 pixels over from the left of where it would normally start; and there it is.0548

Now, it looks like 200 isn't quite wide enough; why is that?--well, that comes down to our box model.0557

I have 15 pixels on the left and on the right; so my navigation bar isn't just 200 pixels from the left--it is more than that.0565

So, let's look at that again: it is 200 pixels as a width, but then I have 30 pixels (15 on the left and 15 on the right) being added, so what I need to do is: I need to add 30; that 30 pixels of padding, I need to add here.0578

I'm going to say 230 pixels from the left; and there is my box, perfectly lined up.0596

Now, let me adjust this a little bit: this left box is still pretty wide, so let me go back and set this to 150.0604

There we go; now, I subtracted 50 from this, so if I want my content box to be right up against it, I need to subtract 50 from my left.0615

I'll set this one to 180, and it's nice and lined up once again.0628

That allows me to add another box over here on the right-hand side; so I'm going to insert another div over there.0634

I'll go ahead and create or insert a div tag; this time, I'm going to say at insertion point; I'll say after tag; the tag it is going to be after is my content.0643

I'll create a new rule, and this is where I can add all of those positioning pieces.0657

This is going to be called right, and I am going to assign some properties to this.0663

So, what I want is to make it absolute positioned first; so I'll go down to Positioning here, and in this position, I'll say Absolute.0671

What I am going to do is assign the properties here, instead of waiting until later.0681

I want it absolute positioned; let me set the width to 100 pixels wide; and when I go to do this, I need to place it, from the left...how far?0687

Well, it needs to be wide enough to adjust to this and wide enough to adjust to that; so let me start with 600 pixels, and let's see where it ends up.0702

I'll make it a color; so choose a color, whatever you want--I have a rather unusual color scheme going on here, anyway.0714

I'll make this one purple; there is my ID called right; and there it is.0722

Now, you can see, this is overlapping my content area; and what I need to do is move this over; so let me figure that out.0730

Now, I also didn't add a height, so you can see this does not end up very tall.0740

But let's figure out where this needs to go from the left.0746

My content area is 180 from the left; so I know I have that 180; plus I have my navigation bar, which is 150.0749

Let's see...let me go back to content: I have 180, and I have a width of 500, and I have some padding; so, if I add those three together, 180, plus 30 for the padding, is 210; plus 500--that would be 710 (is what my right should be instead of 600).0765

There it is; now, let's see if we can add a height in here.0789

I'll add a height, just to make it a little bit taller, so it doesn't look quite so funny.0796

I'll add 600 pixels in height, and now it's a matter of width.0802

So, my width is only 100; it looks like I can do 175 if I want; I can even do, I think, 200.0808

I haven't done the math, but let's see...not too bad: it looks just a little bit too wide, but I can fix that a little bit later.0818

But that is known as absolute positioning; and you will know it's absolute positioning when it has position:absolute listed.0829

What you do is: you start from the top or the left; we didn't have to worry about the top, because our header was already up there, so all we focused on was from the left.0839

Our top of 0 worked out fine, because we want all of these columns to line up exactly under our header.0851

That is absolute positioning using CSS.0860

It is not quite as commonly used as it used to be, but I think it is important for you to understand what absolute positioning is, just in case you see that on any web pages that you are taking over or looking at.0865

And, since we are covering the CSS positioning concepts, I think it's an important one to at least have been exposed to.0880

That is absolute positioning using CSS.0888