Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Design CSS3 Styles

There are a number of considerations for this CSS3 application from a style perspective. However, the most pressing need is to provide a means of displaying the graphics in a way that the user would expect, despite the manner in which the tags are defined. Normally, these components would appear one over the other. You need to create some CSS in order to obtain the required appearance.

Here’s the CSS for this example:

<style>
 h1
 {
 text-align: center;
 }
 #Categories
 {
 width: 220px;
 }
 .Selections .ui-selected
 {
 background: blue;
 color: white;
 }
 .Selections
 {
 margin: 0;
 padding: 0;
 width: 150px;
 list-style-type: none;
 }
 #DrawingContainer
 {
 width: 533px;
 height: 400px;
 border: solid;
 position: absolute;
 left: 250px;
 top: 80px;
 }
 #Drawing
 {
 width: 523px;
 height: 390px;
 margin: 5px;
 }
</style>

Notice that the width of Categories is such that the DrawingContainer can appear to the right of it. The Selections are set up to fit fully in Categories. When setting the width of Selections, you must account for the indent that jQuery UI automatically provides as part of the Accordion widget.

The most important part of the DrawingContainer setup is the left setting, which must be configured to accommodate the Accordion widget to the left of it. The size of Drawing is such that the application can maintain the aspect ratio of the images it will display.

With some additional work, you could allow for images of multiple sizes to fit easily within the space — the example images are all the same size.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.