deLight customization – suddenly it fits

Thursday, September 11th, 2008 | (X)HTML/CSS

My next attempt optimizing the deLight theme is about positioning the content. Two things are taken into consideration:

  • centring the content (the original style looks awkward on high resolutions IMHO)
  • make use of the available space AKA this page should fit easily on my eeepc

Okay, the page is divided into 4 parts, namely header, menu, content and footer. All these elements use a margin left of 100px. To centre an element we use an auto margin horizontally. That’s basically it. There was just one error in the original style that made the page break out to the right. #footer p is to blame. It had the size of the content (940px) and the 100px margin resulting in a size of 1040px. With the auto margin all elements have the same space around them so no elements breaks the page.

Here is the CSS to centre the deLight theme:

#header, #menu, #content, #footer p {
      margin: 0px auto;
}
#content {
      padding: 0px;
}

I also got rid of the bottom padding of the content.

Tags: , ,

No comments yet.

Leave a comment

Search

Categories