Fun Things to Do with CSS
Alignment
Now that we have our background images set up, we have a problem. When we add text, it begins on the left side of the page and is difficult to read because of the images. We can solve this problem by creating a container to hold everything on the page.There are a LOT of containers in HTML but many of them are pre-formatted so I usually use use divisions. <div></div>
The important thing to know is that there are TWO BASIC types of ELEMENTS in HTML. BLOCK elements start on a new line and take up the full width of its PARENT element (ie inside a web page or another div). Block elements can contain other elements and this is what we call a CONTAINER.
INLINE elements do not start a new line and are only as wide or tall as necessary (ie a photo or clickable link). Inline elements cannot be containers for other elements. (Most can hold text or graphics but none can hold a div or span.)
The easiest way to set up this particular div is to
Allow the width of the widest background image as a left margin. <div style="margin-left: 225px;"></div>
Alignment can be tricky in CSS because we don't always align the correct part of the HTML.
If you want to center something inside a DIV, you can almost always use text-align: center; but you need to apply it to the DIV, not to the text or image. If you only want to center a specific item inside a container, you need to first consider what type of element you want to center.
Block elements can almost always be aligned by using auto. margin: auto;
Sometimes you may need to set both vertical and horizontal margins. margin: 0 auto;
Images can also be centered in this manner.
Spans and line breaks CANNOT be centered. (Put them inside a <p></p> or a <div></div>.)
The tricky part is that a block element takes up the whole width of its parent so you MUST set a width for the child in order to center a block element inside another element.
One last cool thing in alignment.
You don't necessarily have to change your whole page in order to move things.
I took the same page we already have loaded, left margin.htm, and made a couple of changes to JUST the CSS, and now it looks a little different.