Tag: CSS

Categories
Web Development

Make your site easy on the eyes with an off-white background

A glaring white background is common on websites, but a little subtlety in the background colour can make things a little easier on the eyes.

There are a number of websites that will provide color palettes, but it's best to choose a faintly off-white tone.  The idea is to cut the glare, not burden your website with a coloured background remeniscent of the web design abuses of the 90's

Pick what works for you, but a good example is #FDFDF0.  Here's a sample. The difference is subtle, but effective;

 

#FFFFFF
PURE WHITE		 #FDFDF0
OFF WHITE

 

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 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.