Disjecta Membra: June 2006 Archives

⇠ May 2006 · Main · July 2006 ⇢

Lists; centering

Lists

Lists differ from ordinary text in two ways. Ordinarily they have space above and below; and list items can have inline markers—numbers or bullets. If you don’t specify the formatting of a list (its margins, padding, and so forth) the browser will apply defaults. These may or may not be to your liking. In the example below, the left margin, the space between the list-item numbers, and the space above and below the list have their default values. These will differ from browser to browser.

Top Three Philosophers

Kant
Hegel
Quine

The treatment of lists in CSS looks more complicated than it is in practice. CSS2 has provision for counters and counter-styles (see “Generated Content” in the CSS spec), but browsers don’t support it. The only “generated content” that you can expect most browsers to display is the content generated for list items (and by the :before and :after pseudo-elements).

The block-level formatting of lists is like that of other block-level tags. The only difference is that an <li> tag generates a principal box and a marker box. The marker box can contain a bullet of some sort or an index.

Position

The position of the marker box can be inside or outside the principal box; the default is outside. Example:

Top Three Philosophers

Kant was by far the greatest philosopher who ever lived. He makes everyone else look shallow. Not only that, but he wrote in German, and he took a walk at the same time every day. You could set your clock by him.
Hegel is said in his later years to have looked like “death upon the chair”. He wrote a lot of books. Some of them are called The Phenomology of spirit and The Philosophy of right.
Quine

Type

The “type” of a list item is the kind of bullet or the numbering system it uses.

For bullets, there are various default types, including disc, circle, and square. Browsers will generate more-or-less appropriate characters to realize these types.

Top Three Philosophers

Kant
Hegel
Quine

For numbers, there is a wide variety of options. The ones you are likely to use are decimal, lower-roman, upper-roman, lower-alpha and upper-alpha.

Top Three Philosophers

Kant

Critique of pure reason
Dreams of a spirit-seer

Hegel

Phenomenology of spirit
Lectures on the philosophy of art

Quine
Maimonides
Crescas

Here’s the code for the list above:

<ul>
<li style="list-style-type: lower-roman">Kant</li>
<ul>
<li style="list-style-type: lower-alpha"><i>Critique of pure reason</i></li>
<li style="list-style-type: lower-alpha"><i>Dreams of a spirit-seer</i></li>
</ul>
<li style="list-style-type: upper-roman">Hegel</li>
<ul>
<li style="list-style-type: lower-alpha"><i>Phenomenology of spirit</i></li>
<li style="list-style-type: lower-alpha"><i>Lectures on the philosophy of art</i></li>
</ul>
<li style="list-style-type: square">Quine</li>
</ul></div>

Notice that you can mix types in a single list. A list embedded within a list will be doubly indented as it would be in an outline.

Images as bullets

The “bullet” for a list item can be an image specified by the style sheet. Notice that the image has to be no taller than the line-height specified for the list items. If that is set in ems, you may have problems if the user sets the default font-size much smaller than you expect. The disadvantage of using list-style-image is that formatting is up to the browser. I found it difficult to position the bullet-image nicely. In the examples below, I’ve used background images instead to get the same effect.

Quine
Hegel
Kant

li.listfig {

margin-left: -2em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/listfig.png");
background-repeat: no-repeat;
background-position: 0% .625ex;
}

li.checkmed {

margin-left: -2em;
margin-bottom: .625em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/checkmed.png");
background-repeat: no-repeat;
background-position: -2pt .25em;
}

Because the default in most browsers is to give an li tag a bullet (usually of disk type), if you want your default list times to be unadorned, you must specify that in your style sheet.

li {

list-style-type: none; }

Centering

Sometimes you want an image or a caption to be centered in the column it appears in. In CSS there is only one way to center anything: you put it inside a div with the attribute text-align: center.

Examples from the style-sheet for this weblog:

HTML:
<div class="imgboxcentered"><img src="http://tlonuqbar.typepad.com/djm/images/scrollsmall.png" alt="scrollsmall" title="Small scroll" /></div>

Stylesheet:
.imgboxcentered {

padding-top:.5em;
padding-bottom:.5em;
padding-left:1em;
padding-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}

Another example (a caption style):

.caption {

padding-top: .5em;
line-height: 1.25em;
text-align: center;
text-decoration: none;
font-size: .87em;
}

June 27, 2006 in Talking about design

CSS Layout

CSS (Cascading Style Sheets) combines two functions: it tells the browser how to style and format individual blocks of text; it also determines how those blocks are to be laid out in the viewport (for browsers) or the page (for print).

Flows

A web page has two kinds of flow. The first is the “box flow”—the positioning of boxes on the page. This is determined by the “document tree”, which is part of the “Document Object Model” or DOM. (Use “Websites as Graphs” to exhibit the tree structure of any webpage.) To the “descendant” relation in the tree corresponds the “nesting” relation in the layout. Immediate descendants of the same node (“sisters”) are laid out side-by-side if possible, or above-and-below if not. This is called the normal flow.

The immediate ancestor of a box is called its “containing box”. Normally in a visual presentation a box will be entirely within its containing box, but by using negative values for the margins you can make a box that protrudes outside its container (see the “Articles” page in the sample pages for some examples.) The <html> tag is the root of the document tree; in HTML its immediate descendants are the <head> and the <body> tags. The <body> tag is the containing box for all text that is not contained in some other box.

The other flow is the “text flow” within each box. The text flow is a line (text is “linear”, as the McLuhanites like to say) which is broken up into distinct line-boxes so as to fit whatever box it’s contained in. (If it isn’t contained in any box, it will occupy one line. Text without whitespace will also occupy a single line. That can be a problem when you cite a very long URL. It can also be a problem if you are using a large font size. Remember that unless you specify the width of a box, its width will probably not be the same for every viewer.)

honorificabilitudinitatibus

You can force a line-break (if your text is in verse, or if you are presenting raw code) by using <br />. Otherwise line-breaks will be inserted as needed by the browser. You can’t count on line-breaks occurring in any particular place (except that they will always occur at whitespaces in the text). A header, for example, that in your view of the page occupies one line may in other people’s views occupy two lines.

Columns

Many pages now, including the pages generated by some weblog and wiki software (Moveable Type and TypePad, WordPress, MediaWiki), are laid out in columns. Column layout ought to be straightforward. But it isn’t. Browsers differ significantly in their rendering of the code used for columns. If you want to make sure that your layout works for all browsers, there is no substitute for testing. (If you have a Mac, use a library computer to test Explorer for Windows.)

The easiest way to do columns (and to have some assurance that they will work on most browsers) is to start with someone else’s layout and modify it. Examples:

Glish: CSS Layout Techniques:
Two- and three-column layouts. Old, but still useful.
CSS Beauty
Lots of examples. Not all of them are great design, but you can see all sorts of techniques.
CSS Garden
One page, many designs. All the designs can be downloaded. Give credit where credit is due if you use one.
Design Inspiration
List of sites.
CSS Vault
Yet more examples.

The principle behind all column designs is floating boxes. In the CSS Specification the display, position and float properties determine where a box is placed in the “flow” of text on a page.

Display

This property rarely needs to be specified explicitly. The most important distinction is between block and inline display. A block is just what the name implies: a rectangular area, which may or may not overlap with other blocks. An inline box is a “line” of text which may include linebreaks. Blocks are part of the block flow mentioned above; inline boxes are construed to be part of the text-flow within their containing block.

The HTML tags div, p, and li are automatically given the display: block attribute. The span, sup, and sub tags are automatically inline. It would be bad form to change those defaults.

Position

The position attribute tells the browser how to interpret positional information. The default position is static, which means that the box is laid out according to the normal flow. Only if the position is not static do you need to specify it explicitly. The coordinates of the position are given by the top, bottom, right, and left properties.

The alternatives to static positioning are

absolute: the coordinates determine the position of the box with respect to its containing box. Other boxes will ignore an absolutely positioned box; they will flow as if it didn’t exist.
relative: the position of the box is first calculated as if it had static position; it is then offset according to its coordinates. For example, a subscript could be given the attribute top: .25em;. This block has been offset by .25em. Note that the positive value for top pushes the block down.
fixed: the position of the box is “fixed” with respect to the viewport, which in most cases is the browser window. For an example, see the alternative style for Philosophical Fortnights. The CSS for this is
/* the fixed menu */
.forevermenu {
position: fixed;
left: 0%;
bottom: 0%;
margin-bottom: 12px;
margin-left: 12px;
background-color: #f3f3f3;
text-align: center;
font-size: .92em;
font-family: "American Typewriter", URWGalaxieT, URWImperialT, Galaxie, Arial, Helvetica, sans-serif;
}

.forevermenuitem {
width: 7em;
height: 1.5em;
padding-top: .5em;
padding-bottom: .125em;
padding-left: .5em;
padding-right: .5em;
background-color: transparent;
/*background-repeat: repeat-y;
background-image: url(images/menubarimgtop.png);
background-position: 0% 0%;*/
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #303030;
line-height: 1.125em;
font-size: .92em;
font-family: MinisterT, Palatino, 'Times New Roman', serif;
}

.forevermenuitem + .forevermenuitem {
width: 7em;
height: 1.5em;
padding-top: .5em;
padding-bottom: .125em;
padding-left: .5em;
padding-right: .5em;
border-top: dotted 1px #aaaaaa;
background-color: transparent;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #303030;
line-height: 1.125em;
font-size: .92em;
font-family: MinisterT, Palatino, 'Times New Roman', serif; }

And the corresponding HTML is:
<div class="forevermenu">
<div class="forevermenuitem">
<a href="http://tlonuqbar.typepad.com/phfn/ix2005.html">Main</a>
</div>
<div class="forevermenuitem">
<a href="#recentitems">Recent</a>
</div>
</div>

Floats

A multi-column layout is first of all a set of floating boxes. The float attribute, whose values are left and right, tells the browser to take a box out of the normal flow (as if it had absolute position) and to position it as close as possible to the point in the normal flow at which it was referred to. Further positioning is usually specified by margin attributes.

A simple two-column layout looks like this:

#column1 {
float: left;
width: 18em;
border-right: solid 1px #aaaaaa;
}

#column2 {
float: left;
width: 24em;
margin-left: 1em;
background-color: #fafafa;
}

The corresponding HTML is this:

<div id="column1">Les hommes en société sont si peu faits pour les choses positives, qu’ils ne s’attachent à la recherche de la vérité même, que jusqu’au point où cette découverte cesse d’intéresser l’imagination.</div>
<div id="column2">Les hommes en société sont si peu faits pour les choses positives, qu’ils ne s’attachent à la recherche de la vérité même, que jusqu’au point où cette découverte cesse d’intéresser l’imagination.</div>

Each box is set to float left. The browser should set them side-by-side if they fit the window. Notice that the column-widths are specified in ems. One problem with column layout is that if the total width is more than that of the browser window, the columns will be laid out top-to-bottom instead of side-by-side. There are various ways to deal with this. For example, you can specify the widths in pixels, making sure that the sum is not more than say 800. The browser should leave the columns side by side even if the window isn’t wide enough to show them. Or you can use percentages. The columns will remain side-by-side, and fit the window, but the layout will look crowded if the user has specified a large default font. There isn’t any solution that will work in all circumstances.

Postils

A postil is a small marginal note. Here’s an example:

.postil {
float: right;
width: 108px;
margin-top: .5em;
margin-left: .5em;
margin-right: .0em;
padding-top: .5em;
padding-bottom: .625em;
padding-left: .5em;
padding-right: 0em;
border: none;
border-left: 1px solid #e4e4dc;
background-color: #fcfcfa;
font-size: .87em;
line-height: 1.25em;
text-indent: 0em;
}

This is a postil. Notice that it is positioned at the right edge of its containing box. Its containing box is the paragraph beginning ‘For an example’. Since the postil is longer than the paragraph, it extends outside its containing box into the next paragraph.

For an example, see “Spume” at Philosophical Fortnights. The first note in the main body text is produced by the code below. Notice that even though the text for the postil is in the middle of the paragraph, it is displayed in a box of its own on the right, and other text flows around it.

<div class="norm">One of the targets of Nietzsche’s critique is the view, held by Descartes and many others, that for some, if not all, volitions the will, or the mind itself, is the proximate <i>undetermined</i> cause. Desmond Clarke, in his recent book <i>Descartes’s theory of mind</i>, rightly emphasizes the limits of Cartesian will. <div class="postil"><span class="addendum">Added</span> 5 May: A précis of <i>Descartes’ theory</i> was just published in the <i><a href="http://tls.timesonline.co.uk/">Times Literary Supplement</a></i>.</div> But he goes too far, I think, in holding that according to Descartes the will is supervenient upon the body-machine(<a name="ref601"></a><a href="#note601">↓</a>). Descartes is quite conventional in that respect: our freedom may be less than we think, but we <i>are</i> free; and no machine is. Nevertheless the scope of a Cartesian agent’s freedom is, as Clarke says, hemmed in by sensations and the passions that result from them. It is more like an embattled Freudian ego than like God—whose freedom in acting is absolute—even though the freedom of the will is that aspect of the mind with respect to which we most resemble God. </div>

Another example—code for a floating image box:

.imgbox {
float: right;
margin-left: .5em;
margin-right: .5em;
padding-top: 1ex;
padding-bottom: .5ex;
padding-left: .5em;
border: none;
}

The corresponding HTML would be:

The image floats right. The left margin, set at .5em, keeps nearby text from crowding up against it.

June 20, 2006 in Talking about design · Web/Tech

Style Sheets

Formally speaking, a style sheet is nothing more than a simple rewrite grammar. In the body of a web page a browser may find a tag that looks like this:

The attribute class tells the browser to look in the style sheets associated with the page for a piece of code that looks like this:

.special {

[attribute-value list]

}

(Notice the dot in front of "special".) The browser substitutes for the attribute-value class: special the contents associated with the value special in the style sheet. The result is

The rewrite rule defined by the style sheet is:

class="special" → style="[attribute-value list]"

The emphasized portions are required by HTML/CSS syntax, and will be taken account of automatically by the browser. Effectively your contribution is the style-designator special and the contents associated with that designator in the style sheet.

You can also associate styles with HTML tags (see the stylesheet below). Specifying the style of an h1 tag, say, amounts to inserting a style attribute with the specified attributes into every h1 tag. If you define a body style, all the text in your document will use that style unless it is overridden.

The primary reason to specify styles for HTML tags is to override browser defaults. In the style sheet below you will see text-decoration: none; specified for anchor (a) tags. This will override the default setting for links, which in most browsers is underline unless the user has changed the default. Similarly in many browsers header tags (h1 and so forth) are put into boldface, which in large font sizes is unsightly. You can get rid of the boldface by specifying font-weight: 400; or font-weight: normal; for h1 and so forth.

Inline style sheets

A style sheet can be placed in the head of a document. The HTML/CSS preview form at the top of this page creates an HTML document and inserts the style information you specify in the first box between style tags in the head of that document. That style information will control the appearance of whatever code you put into the second box (which defines the contents of the body tag).

<head>

<style>
body {

}

h1 {

}

h2 {

}

.special {

}

a:link {

color: #222288;

text-decoration: none;

}

a:visited {

color: #883322;

text-decoration: none;

}

a:active {

color: #bbbb22;

text-decoration: none;

}

a:hover {

background-color: #aaaaaa;

text-decoration: none;

}

</style>
</head>

You can also link to an external style sheet using (of all things) the link tag. See the code below. You can use either relative or absolute URLs.

The advantage of using an external style sheet is that more than one page can link to the same sheet. You can thus have a single sheet that creates a uniform “look” for your site, and for those pages that deviate or add to it use inline style sheets. The following is part of the head section of my home page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Dennis Des Chene</title>
<base href="http://www.artsci.wustl.edu/~ddeschen/" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />

<link rel="icon" href="Images/siteicon.jpg" type="image/jpg" />
<link rel="Stylesheet" href="styles/index.css" charset="utf-8" type="text/css" />

</head>

June 6, 2006 in Talking about design

⇠ May 2006 · Main · July 2006 ⇢

Recent

Categories

Cætera

Lists; centering

CSS Layout

Style Sheets