CSS Tricks Part I

by Tony Hung on April 19, 2006

** Centered page:
Set your element — wrapper, whatever — to a given width, then margin: auto.
For example:
#wrapper {
width: 800px;
margin: auto;
}

Auto will automatically create automagic margins that are equal … thereby creating a “centered” element.

Another way to is to set “padding” or “margins” of the element … but this isn’t as slick (and fluid), because these are relative to the outside of the page!
So, if you set the “margins” to 20px on the right and left, the main element will be 20px from the right and left and therefore centered.
If the screen width is 800, then the centered element will be 800 – 20 – 20 = 740px.
But if the screen width is 1000, then the centered element will change its width!
1000 – 20 – 20 = 840px.

** ADDENDUM **
Explorer quirks!!
As accounted for here: http://www.quirksmode.org/css/quirksmode.html


** THIS MUST BE ADDED — or MSIE will not recognize the margin: auto all the time! **

—————
** Eliminating the gutters:
* {padding: 0; margin:0;}
– basically between every element I think there is a natural “gutter”, maybe its margin, or maybe its padding.
Doesn’t matter … you can eliminate the space between them easily so that the elements are flush against each other.

—————
** Creating effective elements:
* you can actually set the dimensions of an element by setting “width” and “height”!
* you can then set stuff INSIDE those elements by setting positional identifiers: relative or absolute

—————-
** Preventing spillover of images;
Either “overflow: hidden;” or …
Set the element to the exact dimensions of the image.

—————-
** Replacing text with images:
Wrap a “div” around some text
In the div, set the text-ident so it places the text way, way, way out of the screen
Create a background-image to replace the text

—————-
** Roll-overs, CSS style
Create an image that has all the roller over images TOGETHER

Leave your comment

Not published.

If you have one.

Powered by WP Hashcash