How To Center A DIV Element

Published May 16th 2009
Filed under CSS

Centering a DIV Element doesn’t work the same as centering everything else. Using style="text-align:center" doesn’t work. There is still a way of centering it. You have to use the following css code:

style="width: 600px; margin-left: auto; margin-right: auto;"

Set the width to whatever you want it to be and it centers the DIV Element as you want it to.

Backgrounds

Published April 19th 2009
Filed under CSS

There are a few different ways to place a background image using a Cascading Style Sheet (CSS). These include:

  • repeat (repeats the image all over the page)
  • repeat-x (repeats horizontally)
  • repeat-y (repeats vertically)
  • no-repeat (doesn’t repeat so the image only appears once)
  • fixed (stays in position so that the background doesn’t move when scrolled)

The background can also be placed more specifically such as:

  • fixed repeat top left
  • fixed repeat-x

These are useful because putting a background on a page using standard html doesn’t always display the background as you want it.

Creating Extra Block Headers

Published April 07th 2009
Filed under CSS, HTML

By default, html has 6 predefined headers which can be used by putting the number of the header inside the code around the header like this: <H1>Title</H1> up to <H6>Title</H6>.

These headers all display in block form as default which is invisible until a background is given to the header.

If you’ve run out of headers you can create your own by putting adding css style to your text but when you try doing this, you’ll notice that the custom header won’t display in block form.

To fix this, you need to define the block form in the style. This can be done like this:

<P style=”display: block;”>Text</P>

Following “display: block;” will be the rest of the style you want to give the header such as backgrounds, fonts, font colors and alignment.