with Lorelle and Brent VanFossen

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
CSS Style Sheet:
ul li, li.number {
list-style-type:upper-alpha}

ul {
margin:0.3em 2em; list-style-position:outside; list-style: url(images/core/ball.gif) disc; font-size:98%}

ul ul {
margin-top:0.3em; list-style: url(images/core/bullet.gif) square; font-size:96%}

ul ul ul {
margin-top:0.3em; list-style: url(images/core/ball1.gif) circle; font-size:95%}

li, li li, li li li {
padding:0.25px 10px 5px 0.25em}
HTML Structure:
<ul><li>This is Item One</li>
<li>This is Item Two</li>
<li>This is Item Three
<ul><li>This is Item Three A</li>
<li>This is Item Three B
<ul><li>This is Item Three B-1</li>
<li>This is Item Three B-2</li></ul> </li>
<li>This is Item Three C</li></ul> </li>
<li>This is Item Four</li>
<li>This is Item Five</li></ul>

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
ul.small {
list-style:url(images/core/ball1.gif) circle;}
<ul class=”small”>
<li>This is Item One</li>
<li>This is Item Two</li>
<li>This is Item Three</li>
</ul>

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.
 
CSS Style Sheet:
dl {
position:relative; margin:0 0 0 .5em; font-size:97%;font-weight:normal}

dt {
position:relative; font-weight:600; padding-top:.5em font-weight:normal;}

dd {
position:relative}
HTML Structure:
<dl>
<dt>This is the word or phrase</dt>
<dd>This is the definition or explanation of the word or phrase.</dd>
<dt>Definition List Add Style</dt>
<dd>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 <a title=”Our Learning Zone with articles about nature photography, travel, computers, and the Internet and web page design and development” href=”../../learn.html”>Learning Zone</a> to help make our points.</dd>
</dl>

Resources about CSS and HTML 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.

html > body .boxright {
margin-right:12px}

.boxright {
display:block; position:relative; float:right; margin-left:6px; width:40%; text-align:left; border:3px outset #333399; padding: 5px; background: transparent}

.boxright p {
font-size:85%; padding: 5px}

This is text that goes inside of the box and wraps around dependent upon the width of the box.

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.

<p> <div class=”boxright”><p>This is text that goes inside of the box and wraps around dependent upon the width of the box. </p></div>Lorem ipsum dolor sit amet, consectetuer adipiscing…

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.

html > body .boxleft {
margin-left:12px}

.boxleft {
display:block; position:relative; float:left; margin:0 2em 0 6px; width:40%; text-align:left; border:3px outset #333399; padding: 5px; background: transparent}

.boxleft p {
font-size:85%; padding: 5px}

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.

Example of a wide box in use from our Learning Zone educational articles 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.

 

html > body .boxwide {
margin-left:12px}

.boxwide {
clear:both; display:block; position:relative; float:none; margin:1em; width:95%; text-align:left; border:3px outset #333399; padding: 5px; background: transparent}

.boxwide p {
font-size:85%; padding: 5px}

Plain Boxes – Titles, Headings, and Lists

Heading
Title Text

This is the text inside the box below the heading and title. We use different styles for the heading and title so we can choose between the two depending upon the emphasis we need to attract attention to the box. We usually only use one.

  • Item One
  • Item Two
  • Item Three

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.

 
.title {
display:block; font-weight:bold; font-size:90%; text-align:center}

.heading {
display:block; color;navy; font-weight:bold; font-size:110%; padding:0 0 5px 8px}

.boxleft ul, .boxright ul, .boxwide ul {
position:relative; margin:0; list-style: url(images/core/ball1.gif) square inside; font-size:90%}

<div class=”boxright”>
<div class=”heading”>This would be the heading if one was needed </div>
<div class=”title”>This is the Title </div>

<p>This is the text inside the box below the heading and title. We use different styles for the heading and title so we can choose between the two depending upon the emphasis we need to attract attention to the box. We usually only use one.</p>

<ul><li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>

</div>

Tip Box

Tip Box Title
This is the body of the tip box and below we have a list of the reasons why we use this tip box style:

  • It is consistent with the colors and design of the site
  • It attracts attention without screaming
  • Distinctive style lends recognition as good “tip” information found here
  • Simplistic design blends in with the content

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.

html > body .boxtip {
margin-right:12px}

.boxtip {
display:block; position:relative; float:right; background:transparent; width:150px; padding:0; margin: 1em 0 1em .5em; border: 1px blue solid}

.tiptitle {
display:block; position:relative; background:transparent; width:100%; border-bottom:1px solid blue; padding: .15em .15em; color:navy; text-align:center; font-weight:bold; font-size:90%; text-transform:uppercase; letter-spacing: .1em}

.tipbody {
display:block; position:relative; background:transparent; margin: .6em .3em .6em .6em; font-size:85%; width:99%}

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

.boxtip ul {
margin:0; list-style: url(images/core/ball1.gif) square inside; font-size:90%}

.boxtip li {
margin:0}

The HTML for this code is:

<div class=”boxtip”>
<div class=”tiptitle”>Tip Box Title </div>

<div class=”tipbody”>This is the body of the tip box and below we have a list of the reasons why we use this tip box style:

<ul>
<li>It is consistent with the colors and design of the site</li>
<li>It attracts attention without screaming</li>
<li>Distinctive style lends recognition as good “tip” information found here</li>
<li>Simplistic design blends in with the content</li>
</ul>

</div>
</div>

Blue Box

Blue Box Title
This is the span text which is different from the rest of the text within the blue box. We use this box because:

  • It is consistent with the colors and design of the site
  • Attracts attention loudly
  • Distinctive style lends recognition as “important information” here
  • Simplistic design attracts attention while blending in with the content
  • Links are different colors because of the blue background

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.

html > body .boxblue {
margin-right:12px}

.boxblue {
position:relative; float:right;width: 30%; font: 1em/98% “Trebuchet MS”, Arial, Helvetica, sans-serif}

.boxblue div.bluetitle {
background:#0066FF;color:#99CCFF;font-size:15px;line-height:22px;z-index:1}

.boxblue div.bluetitle span {
padding:2px 3px;background:#000099;text-transform:uppercase;letter-spacing:0.1em;font-weight:bold}

.boxblue div.bluebody {
margin: 0 0 0 1.5em; padding: 10px;background:#0066FF; color:black;font-size:90%}

.boxblue div.bluebody span {
font-variant: small-caps; font-weight: bold; color:#000099}

.bluebody a {
color:#99FFFF}

.bluebody a:visited {
color:#99FFFF}

.bluebody a:hover {
color:navy}

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

.boxblue ul {
margin:0; list-style: url(images/core/ball1.gif) square inside; font-size:90%}

.boxblue li {
margin:0}
}

The HTML for the blue box is:

<div class=”boxblue”>
<div class=”bluetitle”>
<span>Blue Box Title </span>
</div>

<div class=”bluebody”>
<span>This is the span text which is different </span> from the rest of the text within the blue box. We use this box because:

<ul>
<li>It is consistent with the colors and design of the site</li>
<li>It attracts attention with screaming</li>
<li>Distinctive style lends recognition as “important information” here</li>
<li>Simplistic design attracts attention while blending in with the content</li>
<li>Links are <a title=”link to this page” href=”thispage.html#bluebox”>different colors</a> because of the blue background</li>
</ul>

</div>
</div>

Sidebar Boxes

Graphic of our Connect the Dots sidebar - click to see the real thing. 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.

/* Connect the Dots */
.dots {
padding:5px 3px 5px 0}

.dots h6, .dots h5 {
font-family:”Comic Sans MS”, Arial, helvetica, geneva, sans-serif; text-align:left}

.dots h5 {
margin:0; color:#003399; font-size:1em}

.dots h6 {
color:blue; font-size:.85em; margin-bottom:2px;padding-right:3px}

.dots a:link {
text-decoration:none}

.dots ul {
list-style:url(images/core/ball1.gif) disc; list-style-position:outside; margin:0 ; padding:.2em 0 .3em 1em;border-top:1px blue solid; border-right:1px blue solid}

.dots li {
margin:0; font-size:80%}
<div class=”dots”>
<h5>Dots Title </h5>
<p>This is text for dots, if required.</p>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>

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

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.