Categories
CSS

Centering a DIV element

Trying to center a DIV element can be a frustrating experience.

<div id="content">
This is a DIV block that is to be centered. I don't
want the text to be centred, though, just the block.
</div>

The trick is to specify a width for the div, then set the left and right margins to auto.

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

Just remember, this won't work if you haven't set a width for the

element.

Categories
CSS PHP WordPress

Changing the font of code blocks with geshi syntax highlighter

By default, geshi-derived syntax highlighters use a serif font to display code blocks.  Many people find serif fonts less clear than the visually simpler sans-serif fonts.

A good choice is Lucida Console.  Consolas is even better because it has a slashed zero, which is easier to distinguish from the capital letter "O", though not as many computers have Consolas installed. To account for this, list the fonts in order of preference, the browser will use the first one that it can display.

To change the default font for code blocks, find the geshi code folder (usually under plugins), open geshi.php and look for the following code:

1
2
3
4
5
    /**
     * The overall style for this code block
     * @var string
     */
    var $overall_style = 'font-family:monospace;';

And modify is as seen here. Note that two word font names must be quoted, and the quote marks may need to be escaped, as seen below;

1
2
3
4
5
    /**
     * The overall style for this code block
     * @var string
     */
    var $overall_style = 'font-family:Consolas, \'Lucida Console\', monospace;';
Categories
CSS Web Development

Avoid 'page jump' by forcing a scroll bar

Occasionally a web page jumps horizontally because a switch of page or change of content causes a vertical scroll bar to appear.

This can be avoided with a little CSS trick;

1
2
3
  html {
    overflow-y: scroll;
  }

This can be placed in the <head> element of a page that is prone to the problem, or in the header include file for a site.

The result of this is that when a vertical scroll bar is not needed on a site, its place is taken by an unobtrusive pseudo-scroll bar, greyed out like other inactive controls.