Join Chris Converse for an in-depth discussion in this video Adding CSS styles for the panel images, part of Creating an Interactive Animated Timeline with jQuery.
Now to style the images inside of the panels, if we go back to the index.html,…from the snippets file, you'll see that each one of the images, I've put a class…on here. So, Arpnet has a class of Arpnet on the…image, tcp has one for the TCP panel. So, if we come back to our timeline.css.…After our navigation rules, let's come in here and add some rules that target those…specific images. So, first we'll do dot timeline…space.panel space img.arpnet, start our brackets.…
We're going to set margin properties here. We're going to set top to zero, right to…zero, bottom to 10 pixels, and left to zero pixels.…Next, we'll target timeline .panel, img.tcp, begin our brackets.…We're going to set a float property here of left, then a margin top of 10 pixels,…20 pixels on the right, zero on the bottom, and zero on the left.…Next, we'll target the timeline .panel, then img.tcp_ip.…
We'll set the float to left and then margin-right to 20 pixels.…Next, we'll target timeline .panel img.www.…We're going to set a float of left, and then margin top 10 pixels, 15 on the…
- 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.