Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.
Archive for the ‘CSS Page Layouts’ Category
By default, the elements of a website line themselves up next to or under each other automatically. However, at times, the design requires them to overlap. When that happens, the stacking order becomes important, and the natural stacking order will need to be manipulated.
At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.
We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.
The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.
It’s always nice to have some pictures to go along with your text. However, if you just use the html to insert a photo into your text flow, you’ll find that it breaks up the flow of your text and just plops itself ungracefully right in the middle of your paragraph without rhyme or reason.
Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag.
Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems.
How to build a simple center-aligned fixed width two-column layout.