CSS Unleashed – Experiments with Lists, Menus, Tables of Content, and More

There are many ways of arranging content. Articles often feature tip boxes, pull-quotes, blockquotes, lists, tables of contents, and menu items helping people get the information they need within and without of the scope of the article. These can also include step-by-step instructions pulled from the article to help take people through the process.

We decided to experiment with a few of these content handling designs to find ways of moving beyond the pull-quote or blockquote to actually presenting bits and pieces of information in an interesting and eye catching fashion with CSS as part of our CSS experiments. In general, the HTML is simple, but the design elements can be sophisticated. As mentioned before, these are CSS experiments, so test them thoroughly within your own design to make sure they work.

Most of these content handling designs begin with a list. It’s what you do with the list that makes the design interesting and part of our CSS experiments.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

CSS Experiments

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Item One
Item Two
Item Three

Today’s List

Item One
Item Two
Item Three

Camera Equipment Tips

Buying a Camera Overcoming the camera buying fears.
Buying a Used Camera A great camera can be a once-loved camera.
Lighting Accessories Light is the trick of all photography.
The Camera Bag Know before you go what you need to lug it with you.

Let’s go back to the simple list and remove the list images and see what we come up with.

Item One
Item Two
Item Three

Today’s List

Item One
Item Two
Item Three

We’ve looked at some simple lists, now it is time to explore menus and tables of contents and step-by-step procedure design examples and CSS experiments. These handle text like lists but in a different presentation style.

The HTML for these CSS experiment designs can be set up in lists, paragraphs, or other HTML tag divisions and containers. We’ve kept the style codes inline for tweaking and messing, and we discuss how to pull these inline CSS codes out to become style sheet references in our last section on this series.

As with all these types of designs and CSS experiments, the color choices are unlimited, so use your imagination and play with these designs to match your own web page designs.

Feature Articles

How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen

Background Magic Investigating your backgrounds Lorelle and Brent VanFossen

Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen

Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen

Digital Camera Tips and Tricks Techno-age meets tree huggers Lorelle and Brent VanFossen

Ann Smart photographs an insect up close and personal, photograph by Lorelle VanFossen

How To? What For? Basics of Nature Photography

Introduction to the basics of nature photography, from the first step to advanced techniques, including digital photography

Wild Thing, I Think I Love You

Wildlife photography is an exciting part of nature photography. We have the the tips, techniques and advice you need for photographing wildlife and wild things

Patterns in ferns and clover, photograph by Brent VanFossen

Patterns in Nature

New article series on exploring the geometry of nature through line, shape, texture, color, pattern and rhythm, shape recognition

WANT SOME ANSWERS?
If you are looking for answers to your nature photography questions, you’ve come to the right place.

QWhat camera do you use?

AWe use two different camera brands, Canon and Nikon. The Canon equipment is lighter, travels well, and we have a wide range of lenses well suited for travel photography. Our Nikon equipment is older, heavier, and ideal for serious nature photography. We have the long and fast lenses which are ideal for both wildlife and scenic landscapes.

QWhat kind of film do you use and why?

AWe currently use two types of film from one brand: Fuji. We use Fuji’s Sensia 100 for our normal work on just about everything. We also use Fuji’s professional film, Velvia, for high contrast and quality color and slower ISO 50 when the moment cries out for vivid colors, such as for the wildflowers of Texas.

QWhat are your favorite photographic subjects?

AAs nature and travel photographers, our interests are both narrow and diverse at the same time. In general, we avoid photographing people unless they add something to the scene like a cultural event. Yet, we photograph a wide range of animals from large elk, moose, and bear, to the smaller insects and butterflies of the world. We do a lot of scenic landscapes and closeups, and feature a wide range of textures and patterns in our inventory. You could call us focused and selectively diverse.

FOR MORE INFORMATION

Email Address
Email us at either fred@fred.com or fredlet@fred.com. We travel a lot so please don’t expect a prompt reply.

Telephone
You can also call 020 020 020 0200 but never during the day or night.

Mailing Address
We are rarely home but if you want to mail something to us, please send it to:
Fred.com
1234 Fred Street
Fredville, FRED 002000

Step By Step Instructions

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris.

Step By Step Instructions

1Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

2Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris.

3Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

Step By Step Instructions

STEP BY STEP INSTRUCTIONS

The following are step by step instructions for the process involved.

STEP ONE

STEP TWO

STEP THREE

STEP BY STEP INSTRUCTIONS

STEP ONE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

STEP TWO Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris.

STEP THREE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

STEP BY STEP INSTRUCTIONS

STEP ONE

STEP TWO

STEP THREE

How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen

Background Magic Investigating your backgrounds Lorelle and Brent VanFossen

Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen

Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen

3 Trackbacks

By Lorelle on WordPress » Navigating Your WordPress Site on August 18, 2005 at 14:30

[…] For more information on styling lists, menus, and other graphic in-post containers, see CSS Unleashed – Experiments with Lists, Menus, Tables of Content, and More. […]
By Lorelle on WordPress » CSS Tabs - The Ultimate Tab Menus on April 4, 2006 at 11:49

[…] CSS Experiments with Lists and Menus […]
By Blog Exercises: The Art of List Making « Lorelle on WordPress on August 20, 2013 at 8:28

[…] ago, I have many examples of how to style content and graphics using only HTML and CSS including experiments with Lists, Menus, Tables of Content, and more, if you are looking for pushing your list making to new horizons. The styles presented are free to […]

CSS Unleashed – Experiments with Lists, Menus, Tables of Content, and More

Social:

3 Trackbacks

Post a Comment Cancel reply