Our HTML and CSS Codes – Lists and Boxes

Web pages are not just books on the Internet. Nor are they billboards. In general, they are informational and educational papers and brochures to help people learn and gather information to make decisions. The more precise the presention of the information, the faster the user can get to the information. Lists are excellent ways to present information in a quick and easy to read style. Highlighted container boxes within a page contain special information related to the content but distinct or worth calling attention to itself. Here are some examples of our lists and boxes.

Our Web Page Design Lists

Lists can be simple or fancy. We choose simple and clean. We have several different kinds of lists, including special list designs to fit within our various boxes and you will find those examples in our boxes section.

Our Basic List

This is our standard list found throughout our pages within the content. We’ve created a nested list with three levels. We mostly use only level one, but in our Links and Resources section of our site, we feature nested lists three levels deep.

• This is Item One
• This is Item Two
• This is Item Three
  • This is Item Three A
  • This is Item Three B
    • This is Item Three B-1
    • This is Item Three B-2
  • This is Item Three C
• This is Item Four
• This is Item Five

NOTE: Nested lists require a little attention to detail. Notice the lack of an end </li> tag on two lines in the HTML structure above. They are there, but they are listed at the end of each sub-list. With the new web standards, every opening tag requires an end tag, and nested lists require end tags at the end of the nesting section. To help you follow this, we’ve highlighted the list end tags in red.

When Little Sized Lists Are Needed: The Small List

There are times when we need to have a smaller graphic image for our list because the font within that section is smaller. We don’t need a font size specification in the style sheet rule as the small class has already been identified as 70% of the default size. We simply need to define the graphic image of the list style.

• This is Item One
• This is Item Two
• This is Item Three

Our Definition List

We started using definition lists recently to create a more sophisticated layout list that involve more than a line of text. A definition list can be designed in several ways but it basically is used as a glossary or dictionary layout. A word or phrase is set aside and then next to or below it is the definition. Here is our layout for our definition lists which are used on all of our main section pages.

This Is The Word Or Phrase

This is the definition or explanation of the word or phrase.

Definition List Add Style

We like the bold title and boxy element for a different style of list on our pages. We use them on all of our section title pages and throughout our Learning Zone to help make our points.

Resources about CSS and HTML Lists

• W3.org’s CSS-2 – Generated Content, Automatic Numbering, and Lists
• Taming Lists
• HTML Source: Lists
• Cascading Style Sheets Interactive Tutorial for Beginners: Lists
• Listamatic: One List, Many Options
• Max Design’s Definition lists – Misused or Misunderstood?
• Jessett.com’s Images as Bullet Points
• Sensually Styled Definition Lists
• Simplebits’ Style Nested Lists

Our Web Page Design Boxes

Our Website features four main box styles for holding highlighted content separate from the rest of the page’s content. We call them plain, tip, blue, and sidebar. These are often referred to as pull-quotes, sidebars, or tip boxes. They are used to highlight quotes, tips, or notes that related to the content of the article and need special attention paid to them.

When we shifted our thinking from tables grid layout to CSS layouts, we learned that every selector was a container. Since everything fit inside a container, and there could be containers within containers, the only problem was figuring out how to make the containers stay within their parent containers and work with the other containers around them.

Once that idea was absorbed, the freedom in design could cut loose. Here are some of our boxes (containers within containers) that we use starting with the most basic to more sophisticated and dramatic.

Plain Boxes

We have three types of plain boxes: right, left, and wide. The right and left boxes sit on the right and left side of the page with the content flowing around them. The wide box sits on the left side of the page and stretches the width of the page and the text flows from above to below but not around it. This box allows us to put several images next to each other with a greater amount of information to accompany the images. We use the wide box in our Learning Zone a lot.

You may notice a strange code at the very beginning of the example. It is html > body. This is a hack or bug fix for Microsoft Internet Explorer which adds up margins differently than other browsers. This code sets the margin for the box within the body of the document rather than the container it resides within which helps to align it properly within the flow of the document. Otherwise the box can overlap the text and surrounding content.

These three boxes have the same code save for a couple of minor differences. Here is the code for the right box and below we will highlight the different code between the three boxes.

While the HTML structure for the left box is the same, we changed the CSS declarations to change the float from right to left and adjusted the hack accordingly.

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. Vivamus eleifend hendrerit diam. Aenean sagittis, sapien in pellentesque dapibus, justo erat semper augue, porta condimentum lectus purus in justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque gravida neque sollicitudin lorem vulputate gravida. Praesent sollicitudin elementum elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Next is our wide box design. We’ve removed the float and stretch the width across the width of the page. The content text does not move around the sides of the box but is above it and then continues below the box.

We use the wide box a lot in our Learning Zone to showcase a point or example we need to make. As nature photographers, this often involves showcasing comparison photographs, showing what to do and what not to do, or similar images to make our point. We’ve included a graphic example of this technique to the right.

Plain Boxes – Titles, Headings, and Lists

Featured inside these plain boxes may be titles and headings and lists. They are the same for all three plain boxes, creating a uniform look throughout the Website.

Using CSS Style Sheets, if we want to change the look and feel of our text boxes, especially the heading, titles, and fonts, we can easily change the main linked style sheet and the change would be felt across the entire Website. The simpler the design and structure of your boxes, the easier they are to mainstain.

Tip Box

The tip box is a simple box which features three sections, the container, the title, and the text body. The container is outlined in blue with a dividing line between the title and the text. The title is centered in bold with forced uppercase letters and a wider letter spacing than normal to make it more interesting.

The layout is simple and can be easily changed to have colored backgrounds and borders. The title element can have a solid background color or image, as can the text body element. The structure is simple, it’s up to you to create your own unique style.

To add a list in our tip box, we added the following list code:

The HTML for this code is:

Blue Box

One of our favorite boxes is dramatic and attention getting. We call it the blue box as it features a two-toned blue color scheme with the title being darker and extending and overlapping the lighter blue box underneath. Into this box we put pull-quotes and information we really want to be noticed.

Like most web designers, we love to “borrow” design ideas. This particular look was inspired by Standardice in their Mimicking Magazines Experiment. We liked the look of the “Softer padding for the marginalized” box and did some tweaking to create our blue box.

The box elements consist of the outside container ( boxblue), the title ( bluetitle), a span within the title ( bluetitle span}
, the body ( bluebody) and a span within the body ( bluebody span). The two spans are inline modifications to those elements. The title span creates the dark blue background and allows the background to appear to extend outside the width of the main box. The title rule actually creates a fake “top” to the box underneath, which enhances the effect of the “floating off-sides” title.

The span within the bluebody text forces the beginning line of the body text to be in small caps and bold. This technique accentuates the opening paragraph and adds a bit of drama to the overall look. With a blue background, our blue links were lost in the background, so we changed the color of the links within the box so they would be visible.

The list style is the same as the tip box list style:

The HTML for the blue box is:

Sidebar Boxes

We feature two different container boxes within our sidebar. The first ones we call Connect the Dots and the second ones are tip boxes that have been adjusted to fit within the narrow margins of the sidebar. The Connect the Dots boxes are unique from the rest of our boxes visually. They are not enclosed but rather framed with a blue line below the title and along the right side. They are designed specifically to hold lists of links highlighted by a small silver ball as a bullet.

In the previous boxes, we established their division sets as classes which confined the content. Here, we simply set a class statement and then redesigned how the paragraph ( <p>) and list ( <ul>, <li>) descendent selectors should look under the dots class. The H5 header is followed by the paragraph, if there is some text to be had, and then the list codes to create the Connect the Dots look. This keeps the HTML elements code and structure simple and easy to manage.

These are examples of the container boxes we use on our web pages. In our CSS Fun, Tips and Tricks article, we come up with a wide variety of different looks for container boxes to help you learn more about the power of CSS.

Creating Boxes – Links and Resources

• CSS Sketchbook
• Mandarin Design’s Boxes and Borders: Box Tips and Tricks
• CSS Borders Design – Beauty in Simplicity
• CSS: Boxes and Page Layouts
• Basics of Element Boxes, Margins, Padding, and Stuff
• CSS Border Image Text Box Styles – great examples
• CSS Layout Examples from W3 Schools
• MaxDesign Presentations and Articles ***
• CSS Positioning
• How To Clear Floats Without Structural Markup