Join Chris Converse for an in-depth discussion in this video Styling the main timeline container and heading, part of Creating an Interactive Animated Timeline with jQuery.
So, now that we have all of our content in place, let's come back to our project folder.…Let's open up the includes directory, and let's open up timeline.css in our text editor.…Now, we've already hooked this into our HTML file.…So, up here, let's come in and let's start adding some rules.…The first one is going to be the body tag. So, we'll start with body, beginning bracket.…Let's set a margin of zero, a padding of zero.…Let's set font size to 16 pixels, and then we'll set the font family to Arial.…
Add a semicolon, then an ending bracket. Next, we'll target the timeline class.…Beginning bracket, let's set position to relative.…Margin, we're going to set top to 30, right to 0, bottom to 20, and left at 0,…end the rule. Next, we're going to target the h1 tag…inside of the timeline. First property is going to be position, we…will set that to absolute. Set top to 10 pixels.…Left is set to 0. Text align, we're going to set to center.…
Width, we're going to set to 100%. Margin, set to zero.…Border bottom, we're going to set that to 1 pixel solid.…
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features
Skill Level Advanced
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.