Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Positioning container elements

From: Dreamweaver CS3 Beyond the Basics

Video: Positioning container elements

Now that we have our content centered, we will begin positioning our container elements on the page. Now I am still working in the index_start.html and a layout.css file. So if you close them you need to open them back up again. And I am going to switch over to our layout file because we have some additional CSS to write. Remember from the previous movie, we had used a comment to separate different areas of our CSS syntax and we are going to keep doing that. So I am going to go down below the last one that I created which was Clear selector and I will do another single line comment, so that's /*, and I generally put a couple of lines in there so that it stretches across the screen, so as I am scrolling, it's really easy to find this. And we are just going to go ahead and call this position container elements and if you are ever typing in a comment yourself, be sure to end it with a */ so that the next time you be typing, it's uncommented out. We are going to position our elements in the order that we find them. So we will go Header, Content, Sidebar, and Footer. So I am just going to go ahead and type in #header, and we'll open up a curly brace and go down and again I am going to end that. We are going to go ahead and use a position relative on our header. This is actually again a very common technique but I want to talk a little bit about why we are doing this.

Positioning container elements

Now that we have our content centered, we will begin positioning our container elements on the page. Now I am still working in the index_start.html and a layout.css file. So if you close them you need to open them back up again. And I am going to switch over to our layout file because we have some additional CSS to write. Remember from the previous movie, we had used a comment to separate different areas of our CSS syntax and we are going to keep doing that. So I am going to go down below the last one that I created which was Clear selector and I will do another single line comment, so that's /*, and I generally put a couple of lines in there so that it stretches across the screen, so as I am scrolling, it's really easy to find this. And we are just going to go ahead and call this position container elements and if you are ever typing in a comment yourself, be sure to end it with a */ so that the next time you be typing, it's uncommented out. We are going to position our elements in the order that we find them. So we will go Header, Content, Sidebar, and Footer. So I am just going to go ahead and type in #header, and we'll open up a curly brace and go down and again I am going to end that. We are going to go ahead and use a position relative on our header. This is actually again a very common technique but I want to talk a little bit about why we are doing this.

Occasionally, you are going to run into styles on other people's sheets or even in your own, and you might not understand exactly why this is done. Anytime you see a positioning attribute and usually a positioning attribute is going to be relative because that leaves the element within the normal document flow but when you see that and then you don't see it followed up with like a top or left positioning and it's not actually moving the element. What it's really doing is making sure that any nested elements use it as a reference point to position itself, and not any other parent element. So we are making sure that things within the header like the navigation for example, position relative to the header and not relative to the wrapper or relative to the body tag. So we are going down to the next line, and I am going to type in background, and you can use shorthand so you don't have to say background-color or anything like that and I am just going to give it a background color, so we will say #d52e36 and we will type in a Semicolon there. And the last thing I am going to do here is give it a fixed height, and I am going to give it a height of a 123 pixels.

Now, how do I know that? Well in my Photoshop mockup, when I measured the height of the header area it was exactly a 123 pixels. So I am getting that from the mockup. So I will go down to the next line and we are going to do a content selector. So #content, and I will open up the curly brace and go down to the next line. Now the contents in the sidebar need to position themselves in a two column layout and based on our earlier movies, we know that all we have to do to do that is do a float and I will float the content to the left because I want it to show up on the left-hand side. I am going to go ahead and assign a width to all my content, and I will give it a width of 630 pixels. Now this is coming directly from the width of the wrapper div tag. The wrapper div tag is 900 pixels. So I have made this one 630 pixels and that leave me just enough space for not only my sidebar but also a margin between them. So I will go down to the next line and we will do our sidebar and I will do a float:right on the sidebar because remember I want the sidebar to float to the right of the main content. And I will also assign it a width and the width I want for it is 250 pixels. So I was an Art Major, I am not really good at math but I do understand that 630+250 comes out to be 880. So that actually leaves me with 20 pixels between them for a margin when I factor in the wrapper sort of holding them to 900 pixels wide. So again when you start to calculate that just remember whatever your parent element, in this case the wrapper is in terms of width, you have got that much to work with and if you are dealing with percentages, you would still want to leave some of the percentage empty in the middle. So if were doing a wrapper div tag, there was a percentage based layout I might do, my content say give me 78% and for my sidebar give me 20% and that would still leave a good bit of gutter in between them. So I will go down and we will finish up the positioning container elements section by installing my footer, and for the footer I am going to choose a color for it. And the color I am going to choose for the footer is #fff. Now we have mentioned background colors before and a lot of people think the color element refers to the color of the actual selector itself. I actually think of it more like a foreground color. So this would the color beneath text that was going to be positioned inside of it.

Next, we will do a font selector, and notice that we are not saying font-family or font-size. So we are going to some shorthand here, and I am a big fan of doing shorthand notation for styles but when you use the font shorthand notation there is something you really need to be aware of. Font shorthand notation takes into account the size of your text, the line height, the font style, the font weight and the font family. And if you do not explicitly describe one of those features then the browser will apply the default. No matter what else is going around it. So remember, the whole thing about inherited styles. So if I apply that to a child element and I don't specifically tell it to be normal for example and if it's in a header then the text is going to be bold, because that's what a browser does with the header.

So you want to be really careful about that when you are stating it, and make sure that you have got that where you wanted. So I am going to go ahead and type in 0.8ems for my size, and for the font family. I am going to pass along to next. I don't see the font that I want to use. So I could type this in myself, but Dreamweaver makes this a lot easier for me. You can see that it populates the font list. But the font list that comes up actually allows me to edit that font list. So I can click Edit Font List and in addition to all of the preset font list that come up, I notice that I can Add some fonts in list below to create my own set of fonts. So I am going to do that now, and I am going to scroll down through all the fonts, and I am going to go into the Ts and I am going to find new Trebuchet MS and add that. Now you can leave it with one but that's not really a good idea. I want to give it multiples in case the client machine doesn't have this font. So I am going to move up and find Helvetica. It's another system font, and add that. Now you could keep going here, and eventually you might run into a machine that doesn't have any of these fonts. So you always wanted at the very end of this give it a default and if I scroll all the way down to the bottom, I see all of the defaults available to me and we have Cursive and Fantasy, which I am always tempted to use but always end up as Comic Sans. A Monospace, Sans-Serif, and Serif. So since both of the fonts that I have chose are San- Serif, I'll choose sans-serif add that and so to my Font list now at the very bottom of this, I am going to have Trebuchet and then Helvetica and then and Sans-Serif. Now it's at the very bottom of my font list now. If I am going to use that a lot and I am, I might actually want to move that up in the stacking order. As a matter of fact the two font families that I am going to use most frequently in the site are the Trebuchet and the Georgia. So I am going to go ahead and move both of those up the stacking order, and now every time I see my code hinting for my fonts, those two will be the first two that show up. So I will go ahead and click OK.

So now when I look at my font list, Trebuchet shows up at the very top of the list. Typing in T gives me that and hitting Enter goes ahead and adds that to my selector. So type in a semicolon and then we will hit Enter to go down to the next line, and we just have a few more items on our footer here. We are going to go ahead and give it a background color. And you can use shorthand for background and it doesn't fill in any of the other defaults. So I am just going to type in background and I will type in #000, which will be Black and we will give it a margin on the top, so that it pushes the sidebar content away from it a little bit, and we will just go ahead and give it a margin of 5em. So we are going to tie that to the actual size of our text. Now using ems and for margin and padding and that sorts of thing, it takes a look at the parent elements font size and it uses that. So remember at very top of the body tag we set that to 85%. So if we increase the size of the font or decrease the size of the font, we are going to increase and decrease its margin as well. So we will save the layout.css file. We will switch back to our index_start page, and whoa! Well, that doesn't look really good, does it? We are in Design View and I don't think we are really expecting to see this. So let's make sure this is not just a rendering error here in Dreamweaver. We will go ahead and preview that in a browser. So we will preview that in Firefox, and whoa, sure enough. So remember we made our footer that black color, and as we scroll down through here, we see that all is not well with our layout. Well, remember the concept of floating elements. We didn't clear this float so the footer is looking at the content div tag and looking at the sidebar div tag and they have both been removed from the document flow. So the footer does what the footer should do which is basically just come up to replace those two. So we will go ahead and leave Firefox and go back into our file and we will need to fix that. So we will switch over to Code View and we know that we can fix that by clearing the float. So I am going to scroll down to our code until we find our footer tag and we will find our footer right down there towards the bottom, and right there at the Line 70. So we already have a selector written to deal with this and if we look back at our CSS Styles panel, we can see that we have the #clear selector and if I click on that, we can see that its only property is Clear Both. So anything with the clear ID applied to it is going to clear any floats that it might encounter. So what we will do is right in front of the footer div tag, we will go ahead and put in another div tag and we will go ahead and give it an id of clear, and don't forget to close that. So this is going to be a totally empty div tag. It really is non-structural markup.

It doesn't really mean anything other then clearing out that float. So when you do a layout occasionally you will have to put non-semantic code in your file and if you leave that at one or two lines for your layout, that's really not that big of a deal. Especially if you compare that using hundreds of lines that we used to have to do when we used the table. So we will save that, and we will switch back to Design View just to make sure that that's looking a little better. Now if I scroll down, I can see that my footer is where it's supposed to be. So we will go ahead and preview that in a browser just to make sure that fix worked. Now we don't have a footer coming up underneath everybody and as I scroll down, we see that we have our two-column layout. Our footer is down there at the bottom. Now our footer could maybe use a little bit more styling but so could every element on the page. So all that remains of our layout really is just styling and positioning those nested elements and in our next movie, we will explore how using background graphics to enhance your design and look at maybe styling some of these interior elements.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38840 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.