Join Chris Converse for an in-depth discussion in this video Creating the CSS for the Q and A containers, part of Create an Expandable FAQ Listing with jQuery and Dreamweaver.
Next we are going to create four CSS rules for the question-and-answer blocks.…Let's come up towards CSS panel.…Let's create our first rule.…First one is going to be called .faq.…This is going to be a Class. Let's click OK.…Let's come over to the Box properties.…Let's uncheck Same for all for Padding. Let's set a Padding Top of 35, Right of…15, Bottom of 15, Left of 70.…For Margin, uncheck Same for all.…
We are going to set the Top to 0, 15 on the Right, 35 on the Bottom, 15 on the Left.…Let's come over to Background.…For the Background-color, let's choose white. For the Background-image, let's…choose Browse, and let's grab note_top.jpg. Click OK.…For repeat, we are going to set this no repeat, 0 on the X, 0 on the Y for positioning.…And then lastly let's come down to Positioning, and let's set Positioning to relative.…
We are setting this to relative, so that later on when we add the Q and the A divs…that are going to be absolute positioned, they'll absolute position themselves…relative to this object.…
- Creating project folders
- Adding in sample question and answer content
- Creating CSS rules for graphics
- Animating the graphic states