Join Joseph Lowery for an in-depth discussion in this video Styling Spry tabs, part of Layouts with CSS in Dreamweaver.
In the previous movie, we added the Spry Tabbed panels to the page and realized…that they were existing CSS rules for which we'd have to find a fix.…And now I'll show you a strategy for discovering what those are.…To do this, let's go into Current mode and I want to use one of Dreamweaver's…really powerful tools in conjunction with Live View, and that's Inspect mode.…So if I click on the Inspect here, when I hover over any of the various…elements, if I'm in Current mode, I'll be able to see exactly what's going on…with the existing rules.…
And I can see that here I have one rule for the mainContent li or list item that…is giving me an additional margin-bottom of 0.75em and we can test to see if…that is the issue by disabling the CSS property temporarily.…And in fact, that's it, so that's one of the two things that we'll need to change.…And I notice up here that there is the parent of the li which is the ul, and…that very likely is causing my tabbed panels' labels to move over to the right…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- 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.