How to Design CSS3 Styles - dummies

How to Design CSS3 Styles

By John Paul Mueller

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:

 text-align: center;
 width: 220px;
 .Selections .ui-selected
 background: blue;
 color: white;
 margin: 0;
 padding: 0;
 width: 150px;
 list-style-type: none;
 width: 533px;
 height: 400px;
 border: solid;
 position: absolute;
 left: 250px;
 top: 80px;
 width: 523px;
 height: 390px;
 margin: 5px;

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.