Start learning with our library of video tutorials taught by experts. Get started

Creating an Online Resume: Hands-On Training

Nesting a div tag inside the Sidebar div and styling the sidebar content


From:

Creating an Online Resume: Hands-On Training

with Laurie Burruss

Video: Nesting a div tag inside the Sidebar div and styling the sidebar content

We need to create some content for the sidebar area, as well as get rid of the sidebar dummy content. It's going to be easier to do this if we do this in Split view, because remember whenever we're doing divs, we want to be sure that we get both the opening and closing tags. So I'm going to go into Split view right now and I'm going to move it, so that we can see what we were working on, and put my I-beam in the area, and bring that up so we can see it. So right now, there is our sidebar and there is the content that we have in there.
Expand all | Collapse all
  1. 9m 10s
    1. Welcome
      50s
    2. Using the exercise files
      4m 57s
    3. Creating a custom font list
      3m 23s
  2. 23m 7s
    1. Overview
      1m 52s
    2. Distributing your resume
      3m 29s
    3. Resume formats
      6m 43s
    4. Comparing good and bad resumes
      11m 3s
  3. 38m 0s
    1. Striving for fluidity, not rigidity
      5m 12s
    2. Font types, web-safe fonts, and font measurements
      10m 44s
    3. Principles of typography
      10m 35s
    4. Online resources and applications
      11m 29s
  4. 1h 26m
    1. Setting up the web site folder
      2m 46s
    2. Defining the web site
      3m 43s
    3. Setting up a custom workspace
      5m 26s
    4. Creating a new web page with resume content
      4m 56s
    5. Marking up header tags
      3m 53s
    6. Inserting tags for unordered lists
      3m 43s
    7. Inserting tags for definition lists
      3m 12s
    8. Formatting URLs
      5m 23s
    9. Creating and linking an external style sheet
      5m 9s
    10. Styling the body tag
      15m 31s
    11. Styling the header tags
      8m 6s
    12. Styling the paragraph tags
      4m 3s
    13. Styling an unordered list
      3m 48s
    14. Styling a definition list
      6m 1s
    15. Creating a custom class style
      4m 20s
    16. Creating a custom ID style
      3m 32s
    17. Applying a print-specific CSS layout
      2m 54s
  5. 52m 24s
    1. Creating a new document in Fireworks
      6m 15s
    2. Creating a background tile in Fireworks using Gradient Fill and Texture Fill
      5m 59s
    3. Slicing background tiles in Fireworks
      2m 37s
    4. Optimizing and exporting background tiles in Fireworks
      6m 12s
    5. Creating background tiles using online applications
      6m 5s
    6. Creating a page-like resume
      3m 50s
    7. Deleting unneeded CSS styles for this resume version
      1m 56s
    8. Adding a Wrapper div
      3m 33s
    9. Styling the Wrapper div
      8m 52s
    10. Controlling the vertical spacing
      1m 24s
    11. Zeroing out margins and creating a faux drop shadow
      5m 41s
  6. 1h 9m
    1. Setting up the HTML and CSS documents
      2m 15s
    2. Deleting unneeded CSS styles for the pro version
      1m 12s
    3. Creating the Header div
      3m 37s
    4. Creating the Content div
      2m 25s
    5. Creating the Sidebar div
      2m 20s
    6. Styling the Wrapper and Sidebar divs
      4m 56s
    7. Styling the Content div
      3m 7s
    8. Styling the Header div
      3m 33s
    9. Nesting a div tag inside the Sidebar div and styling the sidebar content
      6m 21s
    10. Inserting images to create rounded page edges
      4m 12s
    11. Styling images
      3m 59s
    12. Clearing floats
      3m 55s
    13. Creating font-size style for the Body tag
      2m 13s
    14. Fine-tuning resume styles
      4m 38s
    15. Adding a border to the Content div
      2m 38s
    16. Linking to a PDF
      4m 58s
    17. Organizing styles in the CSS panel and inserting comments in the style sheet
      4m 42s
    18. Creating and styling a print style sheet
      8m 56s
  7. 1m 33s
    1. Goodbye
      1m 33s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Creating an Online Resume: Hands-On Training
4h 40m Intermediate Sep 24, 2009

Viewers: in countries Watching now:

In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.

Topics include:
  • Creating a simple text document for use inside Dreamweaver
  • Formatting HTML tags with semantic or meaningful markup such as unordered and definition lists
  • Externally linking a Cascading Style Sheet to a web page
  • Creating and applying unique styles to XHTML documents using HTML tags, compound selectors, custom classes, and IDs
  • Creating tiling background images in Fireworks
  • Using the DIV tag in combination with CSS to create effective layouts that organize content
  • Applying principles of web typography
Subject:
Web
Author:
Laurie Burruss

Nesting a div tag inside the Sidebar div and styling the sidebar content

We need to create some content for the sidebar area, as well as get rid of the sidebar dummy content. It's going to be easier to do this if we do this in Split view, because remember whenever we're doing divs, we want to be sure that we get both the opening and closing tags. So I'm going to go into Split view right now and I'm going to move it, so that we can see what we were working on, and put my I-beam in the area, and bring that up so we can see it. So right now, there is our sidebar and there is the content that we have in there.

I'm going to select that content carefully and then delete it, and this is the important part. Don't move your mouse. So I have my I-beam inside this div, and I want to put another div or box inside of there. The way I like to think of this is you probably all have a drawer at home where you put another box inside of it for your silverware. That's called nesting. So we're going to put another box inside the sidebar box that will hold the content. I'll go up to the Common insert bar and choose the Insert Div Tag and notice again Dreamweaver checks and sees that I have an insertion point there, and I'm going to give this a specific ID name because it will only appear once.

I'm going to call this sidebar_content. Remember, meaningful names. Click OK. Again it inserts some dummy text, but we're going to replace this text with what we want to put in here. So at this point you can either work in Split view or in Design view. I'm going to go ahead and work in Design view, so you can see the screen a little bit better. So I'm going to select that text and when I start typing that text, we'll delete, I'm going to put in here Contact Info, followed by a colon, then I'm going to put in my ito@itointeractive.com email address, then I'm going to list my computer skills to highlight those and then type in a bunch of my computer skills.

And I'm hitting Return each time I type a name in. So I've got all my contact info and all of my computer skills listed and now just like I've done before, I'm going to go ahead and select different things and applies some HTML formatting to that. So I'm going to select Contact Info. I'm going to choose h4. We haven't used an h4 yet, but it's a smaller header. And because we created this h1 through h6, remember I told you this would be handy to create them all at the same time, t's putting the same kind of styling as it did on h1, h2 and h3.

I also going to select Computer Skills and give that an h4 heading. I am going to select all my skills and make that into a bulleted or unordered list, and finally I'm going to select my email address, and remember I told you there is two ways we can do this. We can go down here and type mailto: with no spaces followed by the email address, or I can go up to my Common menu and click on Email Link, and it says, "You have selected this text. Is that the Email?" And the answer is yes and select OK.

So if I deselect that you can see that I've got all of my text in, and I now have given it format and I can go ahead and start styling these things. Let's do a File > Save All, at this point. And the next thing we want to do is put our I-beam inside this nested box here, it's the outside box, which is the sidebar. Here is the nested box, which is the sidebar content, and we're going to make a style for the sidebar content. So I'll go over to my CSS Styles panel and check New CSS Rule and the only thing I want to style right now is sidebar content.

So I'm going to delete everything else, just sidebar content, click OK, and I'm going to go to the Box category and I'm moving my dialog box over so you can see what's going on. I'm not happy with the way this is because the text is pushing against the box. There is no breathing room, so I need to create some breathing room, and I could do that with margins or I could do that width. In this case, I'm going to make this box inside slightly smaller to give that breathing room. So I'm going to type in 180, and click Apply, and as you can see I just made the box smaller, but now I need to give it a centeredness inside the other one and I can use that same trick of Auto that we've used before.

So I'm going to deselect Same for All in Margin, type zero, then choose Auto and then 20 at the Bottom and then Auto, and click Apply. Isn't that cool? So you can use Auto a lot of different ways, if you're trying to center a box inside another box in nesting, this works really, really well. And then for Padding I'm going to deselect Same for All and I'm going to put zero in the first three places, Top, Right, Bottom, but this is too tight right here. Again, I'm trying to create some breathing room so on the Left.

I'm going to put in 20 pixels to move that over just slightly. Wow! That looks great. I'm really happy with that. Lots of breathing room and a good background. Now I've made a fixed width and height background. If I had more content just to show you, this would fall out. So if I hit Return, Return, Return notice that my box is not expanding back here. That's because I have a fixed width graphic image in here. I'm going to show you later in this tutorial how to do this with an expanding graphic, but I just want to show you that was made exactly for what the content I was going to put in here.

Again, I'm going to do a File > Save All, and since I've made so many changes both with the divs and the with styles, it's a good idea to go out to the browser one more time and preview this. As you can see it's working really great. I've got the space and breathing room that I need on the left and right. The style of the h4 looks it like it's part of the whole style of the whole webpage and of the resume. And I'm now able to call out in a special way my special skills and how to contact me, which are ultimately two the most important things that you want to do in a resume is make sure that people can contact you and see what your special skills are.

I'll close out of Firefox and then we'll go back and do some more styling.

There are currently no FAQs about Creating an Online Resume: Hands-On Training.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Creating an Online Resume: Hands-On Training.

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


OK

Course retiring soon

Creating an Online Resume: Hands-On Training will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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