Taming Lists – A Record Aside

by

As early as July of 1999 I used to be pontificating on e-mail lists concerning the virtues of favor sheets. Some issues by no means change.

Article Continues Under

What has modified is how I take into consideration CSS, and the underlying construction of (X)HTML to which it’s utilized. For instance, I discover that the majority pages on the net comprise a thực đơn of hyperlinks in a navigation space. These are sometimes marked up as a string of hyperlinks, typically in separate DIVs or paragraphs. Structurally, nevertheless, they’re an inventory of hyperlinks, and needs to be marked up as such.

After all the explanation that we don’t mark them up in that manner is that we don’t need a bullet in entrance of each hyperlink in our navigation space. In a earlier article I outlined a number of strategies for utilizing CSS to structure an internet web page. A kind of strategies concerned manipulating an inventory to show horizontally slightly than vertically.

On this article, I’ll display learn how to use CSS to carry unwieldy lists beneath management. It’s time so that you can inform lists learn how to behave, as a substitute of letting them run wild in your internet web page.

Setting the stage#section2

For functions of this text, I’m utilizing unordered lists. The identical CSS might be utilized, with comparable outcomes, to ordered lists as nicely. Until in any other case outlined, the entire examples on this article use the next code for the lists.

<ul>
 <li>Merchandise 1</li>
 <li>Merchandise 2</li>
 <li>Merchandise 3</li>
 <li>Merchandise 4</li>
 <li>Merchandise 5 we'll make a bit longer so
     that it'll wrap</li>
</ul>

Every record is just positioned inside a distinct DIV, and the CSS is written in order that the record’s conduct is set by the DIV it’s in. Every DIV has a base rule:

#base {
 border: 1px stable #000;
 margin: 2em;
 width: 10em;
 padding: 5px;
 }

With none extra kinds utilized, the record is rendered on this manner within the base DIV:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

Positioning#section3

Generally the default indent of an inventory is an excessive amount of for the design you’re engaged on. However merely altering the margin or the padding of the UL doesn’t work for all browsers. To make the record flush left, e.g., it’s worthwhile to change each the margin and the padding. It is because Web Explorer and Opera opted to create the indent with the left margin, whereas Mozilla/Netscape use padding. For extra on this see the DevEdge article Constant Record Indentation.

Within the following instance each the margin-left and padding-left of the UL within the DIV are set to zero:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

Notice that the markers lie outdoors of the DIV. If the containing field have been the BODY of the HTML doc, the markers may be rendered outdoors of the browser window, in impact vanishing. If you need the markers to line up contained in the DIV, however alongside its left facet, set both the left padding or margin to at least one em:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

Markers#section4

Perhaps you’ve had a mission that required a {custom} bullet. In that case you may need marked it up in a desk with one column containing the GIF picture bullets aligned prime and proper, and the opposite column containing the content material of what ought to have been LIs. With CSS it’s doable to make use of a picture as a bullet. If the browser doesn’t assist this a part of CSS (or doesn’t do photographs), the default bullet can be used (or you possibly can specify a distinct HTML bullet if you want).

The rule seems one thing like this:

ul {
 list-style-image: url(bullet.gif);
 }

And the browser renders it:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

To specify an HTML bullet to make use of if the browser doesn’t assist this a part of CSS, add:

 list-style-type: disc;

to your rule. Relying on the picture that you simply select chances are you’ll discover that it doesn’t align itself with the record gadgets the way in which that you simply intend. In that case chances are you’ll select to have the picture be positioned throughout the record merchandise block (slightly than outdoors the block). Including the next:

 list-style-position: inside;

to your rule will make that change. These three declarations might be mixed right into a single, shorthand declaration as illustrated within the following rule:

ul {
 list-style: disc url(bullet.gif) inside;
 }

which is the equal of:

ul {
 list-style-type: disc;
 list-style-image: url(bullet.gif);
 list-style-position: inside;
 }

That is what it seems like within the internet web page:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

There could also be occasions when you will have an inventory, however you don’t need any bullets, otherwise you need to use another character instead of the bullet. Once more, CSS gives a simple answer. Merely add list-style: none; to your rule and pressure the LIs to show with hanging indents. The rule will look one thing like this:

ul {
 list-style: none;
 margin-left: 0;
 padding-left: 1em;
 text-indent: -1em;
 }

Both the padding or the margin must be set to zero, with the opposite one set to 1em. Relying on the “bullet” that you simply select, chances are you’ll want to switch this worth. The adverse text-indent causes the primary line to be moved to the left by that quantity, creating a dangling indent.

The HTML will comprise our customary UL, however with no matter character or HTML entity that you simply need to use instead of the bullet previous the content material of the record merchandise. In our case we’ll be utilizing », the best double angle quote: ».

  • » Merchandise 1
  • » Merchandise 2
  • » Merchandise 3
  • » Merchandise 4
  • » Merchandise 5 we’ll make a bit longer so that it’ll wrap

I ought to level out that Netscape6/7/Mozilla (and different Gecko-based browsers) and Opera can create generated content material through the CSS2 :earlier than pseudo-element. We are able to make the most of this to mechanically generate the » character (or every other character) for the bullets. This enables us to go away the content material of the UL alone. If you’re utilizing Opera or a Gecko-based browser, the next CSS will create the identical record as above, however utilizing the usual UL with no further content material: 

#custom-gen ul li:earlier than {
 content material: "BB 20";
 }

The content material property could comprise strings, URIs and extra, together with particular characters. When utilizing these characters, like », it’s essential to encode them as their escaped HEX equivalents. For the best double angle quote, we use BB (the opposite character, 20, is an area). The ultimate consequence (keep in mind, the character will solely be seen in Opera or Mozilla/Netscape):

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

Actually inline lists#section5

Who says an inventory must be vertically aligned with bullets hanging off the left facet of every merchandise? Maybe you need the construction of an ordered record of hyperlinks, however visually you need it to appear to be a vertical navigation bar on the net web page. Or perhaps you need your record of hyperlinks to align themselves horizontally throughout the highest of your web page.

This is applicable to extra than simply lists of hyperlinks. There are occasions if you would possibly must record a number of gadgets within the midst of a paragraph, perhaps an inventory of books that you simply need to learn. Structurally it is smart to mark this up as an inventory, however presentationally you may not need break the movement of the paragraph. CSS to the rescue once more!

Since this record is not going to be separate and unto itself, I gained’t put it into the bottom DIV that the earlier lists have inhabited. This time the markup can be a paragraph, adopted by the identical record, adopted by one other paragraph.

I hear you crying,“FOUL! I believed you have been going to place an inventory inside of a paragraph, not between two paragraphs.”

To which I reply,“Effectively, sure. However (X)HTML doesn’t enable an inventory to look within a paragraph. Nonetheless, with the assistance of our model sheet, that’s the way it will look within the internet web page.”

Right here’s what the kinds appear to be:

#inline-list {
 border: 1px stable #000;
 margin: 2em;
 width: 80%;
 padding: 5px;
 font-family: Verdana, sans-serif;
 }#inline-list p {
 show: inline;
 }#inline-list ul, #inline-list li {
 show: inline;
 margin: 0;
 padding: 0;
 shade: #339;
 font-weight: daring;
 }

The markup consists of a <div id=“inline-list”>. This DIV accommodates a paragraph adopted by our customary UL, and a followup paragraph. The UL record has been modified so that every record merchandise has a comma after it, with the final merchandise adopted by a interval.

The outcomes are beneath (record seems daring and blue):

A little bit of textual content earlier than the record seems. Maybe the context is one thing a couple of husband getting a name from his spouse to select up a number of issues on the way in which residence from work. It doesn’t actually matter, for our functions we simply want some previous textual content earlier than the record:

  • Merchandise 1,
  • Merchandise 2,
  • Merchandise 3,
  • Merchandise 4,
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap.

After which there may be the textual content that follows the record within the paragraph. One or two sentences is adequate for the instance.

As within the {custom} bullet instance above, we might use CSS to mechanically generate the commas and interval that observe every record merchandise. If all you needed to fear about have been Opera and Gecko powered browsers, that’s. This time the kinds would appear to be:

#inline-list-gen ul li:after {
 content material: ", ";
 }
  
#inline-list-gen ul li.final:after {
 content material: ". ";
 }

Right here we use the :after pseudo-element so as to add a comma after every record merchandise, and a interval after an inventory merchandise with class=“final”, ensuing within the following (keep in mind, it’s going to solely be seen in Opera or Mozilla/Netscape):

A little bit of textual content earlier than the record seems. Maybe the context is one thing a couple of husband getting a name from his spouse to select up a number of issues on the way in which residence from work. It doesn’t actually matter, for our functions we simply want some previous textual content earlier than the record:

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4
  • Merchandise 5 we’ll make a bit longer so that it’ll wrap

After which there may be the textual content that follows the record within the paragraph. One or two sentences is adequate for the instance.

Navigation#section6

As I discussed beforehand, the menus of hyperlinks that seem on almost each website ought to actually be marked up as lists, since that’s what they’re. Since we normally don’t need the default record model to use to those hyperlinks, we are able to use CSS to alter the way in which they seem on the web page. As we noticed above, lists might be pressured to show horizontally (inline) slightly than stacked vertically (the default conduct). Whenever you do that the bullet goes away and you’ve got many selections about learn how to separate the record gadgets.

These examples of horizontal lists will all use the identical base DIV with the next kinds:

#h-contain {
 padding: 5px;
 border: 1px stable #000;
 margin-bottom: 25px;
 }

The subsequent two examples use the identical UL as within the earlier examples, however with out the ultimate record merchandise with its further textual content. In addition they embody a further class that units aside one of many LIs within the record.

Borders#section7

A pipe character, |, is usually used to distinguish between selections. It’s an apparent separating character, and might be emulated by including borders to record gadgets:

#pipe ul {
 margin-left: 0;
 padding-left: 0;
 show: inline;
 } #pipe ul li {
 margin-left: 0;
 padding: 3px 15px;
 border-left: 1px stable #000;
 list-style: none;
 show: inline;
 }
 
  
#pipe ul li.first {
 margin-left: 0;
 border-left: none;
 list-style: none;
 show: inline;
 }

Right here we add class=“first” to the primary LI in order that it doesn’t find yourself with a border on its left facet.

  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4

You possibly can modify these kinds to create a tabbed navigation impact:

#tabs ul {
 margin-left: 0;
 padding-left: 0;
 show: inline;
 } #tabs ul li {
 margin-left: 0;
 margin-bottom: 0;
 padding: 2px 15px 5px;
 border: 1px stable #000;
 list-style: none;
 show: inline;
 }
 
  
#tabs ul li.right here {
 border-bottom: 1px stable #ffc;
 list-style: none;
 show: inline;
 }
  • Merchandise 1
  • Merchandise 2
  • Merchandise 3
  • Merchandise 4

On this instance including class=“right here” to an LI creates a backside border that matches the background shade to point that the tab refers back to the present web page.

Notice: This system was first proffered by Randal Rust, after which riffed on by many on the css-discuss e-mail record

Breadcrumb trails#section8

One other record of hyperlinks that sometimes has a horizontal orientation on an internet web page is what has grow to be often called breadcrumbing. Breadcrumbs present you the place you’re within the hierarchy of a website, beginning with the house web page and drilling all the way down to the present part or web page. In case you actually need to make the markup significant, you’ll need to create a sequence of nested lists, since every new part is a part of the part earlier than it:

<div id="bread">
<ul>
 <li class="first">Residence
 <ul>
<li>» Merchandise
  <ul>
 <li>» Computer systems
   <ul>
  <li>» Software program</li>
   </ul></li>
  </ul></li>
 </ul></li>
</ul>
</div>

creates the next:

Including the next guidelines to the model sheet for the web page:

#bread {
 shade: #ccc;
 background-color: #006;
 padding: 3px;
 margin-bottom: 25px;
 }#bread ul {
 margin-left: 0;
 padding-left: 0;
 show: inline;
 border: none;
 } #bread ul li {
 margin-left: 0;
 padding-left: 2px;
 border: none;
 list-style: none;
 show: inline;
 }

creates this:

Once more, we are able to generate the » character (or every other character you would possibly need to use as a separator) with the :earlier than pseudo-element, mixed with a category=“first” in order that the primary LI doesn’t generate a separator:

#bread-gen ul li:earlier than {
 content material: "20 20 20 BB 20";
 shade: #ff9;
 }
 
#bread-gen ul li.first:earlier than {
 content material: " ";
 }

And the top consequence:

Within the Actual World#section9

I’d like to finish with an actual world software of a number of the strategies which have been mentioned right here. We’ll use an ordinary UL containing hyperlinks to create a dynamic thực đơn with hover results. In an effort to get hold of the hover results we’ll let the UL present the construction, and the anchor kinds will present a lot of the visible results.

This thực đơn of hyperlinks is definitely an answer to a query posed by Michael Efford on the css-discuss record. Michael had created this precise impact utilizing a desk, photographs, and JavaScript. He requested the record if it might be carried out with CSS. I took the problem, and with the assistance of a number of different members who tracked down some browser particular points, we got here up with a mode sheet that works on this markup:

<div id="button">
<ul>
 <li><a href="#">Residence</a></li>
 <li><a href="#">Hidden Cameras</a></li>
 <li><a href="#">CCTV Cameras</a></li>
 <li><a href="#">Worker Theft</a></li>
 <li><a href="#">Useful Hints</a></li>
 <li><a href="#">F.A.Q</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</div>

Let’s have a look at the model sheet rule by rule, and I’ll clarify why every rule is constructed the way in which that it’s.

#button {
 width: 12em;
 border-right: 1px stable #000;
 padding: 0 0 1em 0;
 margin-bottom: 1em;
 font-family: 'Trebuchet MS', 'Lucida Grande',
   Verdana, Lucida, Geneva, Helvetica, 
   Arial, sans-serif;
 background-color: #90bade;
 shade: #333;
 }

The primary rule is for the #button DIV. It defines the area that the thực đơn will occupy, and gives a context for the thực đơn in order that we are able to outline the way in which the record and hyperlinks will behave contained in the DIV. I selected to make the thực đơn fluid, primarily based on the browser’s font measurement preferences, so (nearly) all models are in ems. This consists of the width of the thực đơn. The stable black border on the best was primarily based on the unique design from Michael. The underside padding is there to increase the DIV down past the thực đơn of hyperlinks to be able to see the background of the DIV. Once more, this follows the unique design. The underside margin is to separate the DIV from what follows it. The colours got here from the unique design.

 #button ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  }
  
 #button li {
  border-bottom: 1px stable #90bade;
  margin: 0;
  }

Subsequent I outlined what the record will appear to be. Since all of the record gadgets have been to be hyperlinks, and the rollover performance can be constructed into the CSS for the hyperlinks, I primarily eliminated all styling from the lists. I did add a single pixel border on the underside of every hyperlink that matched the background of the #button DIV, to work because the separator. Within the unique design, this was a picture.

 #button li a {
  show: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px stable #1958b7;
  border-right: 10px stable #508fc4;
  background-color: #2175bc;
  shade: #fff;
  text-decoration: none;
  width: 100%;
  } html>physique #button li a {
  width: auto;
  } #button li a:hover {
  border-left: 10px stable #1c64d1;
  border-right: 10px stable #5ba3e0;
  background-color: #2586d7;
  shade: #fff;
  }

Lastly, I outlined the hyperlinks. The unique design has 10 pixel borders on the best and left. These borders, together with the background, change shade on the rollover. It is a comparatively easy factor to regulate with the :hover pseudo-class in CSS, so I put this model into the anchor kinds.

There’s one workaround on this a part of the model sheet. To make the hyperlinks lively for the total width of the DIV, I made them show: block;. This works for all the things however IE/Home windows. In case you give the block an specific width of 100%, then IE/Home windows performs alongside. However doing this creates issues with IE5/Mac and Netscape/Mozilla. So I used the kid selector“>” to redefine the width to auto. Since IE/Home windows doesn’t perceive youngster selectors, it ignores the rule. IE5/Mac, Opera and Netscape/Mozilla observe the rule, and everyone seems to be joyful.

The rule for the :hover pseudo-class creates the colour adjustments on the backgrounds and borders when the hyperlinks are moused over.

The model and record markup (about 1K price) changed about 5K of JavaScript and TABLE markup, to not point out one other 8K or so of photographs for the rollover results. It additionally made the markup extra readable, and simpler to replace, because you not must create new photographs if a hyperlink title adjustments. Now you merely modify some textual content. You possibly can view the ultimate consequence within the context of the location on the Asset Surveillance site.

Tip of the Iceberg#section10

Imagine it or not, we’ve got simply scratched the floor of what might be carried out to switch lists with model sheets. I gained’t declare that the entire strategies introduced listed here are probably the most sensible CSS that you simply’ll come throughout, however I do hope they make you consider how utilizing CSS can launch you to make use of extra structured markup.

Leave a Comment