SEO Freelancer

Centering Div

Very nice, crossbrowser method for div centering.
Just use this css:

#centeringDiv {
  position:absolute;
  top: 50%;
  left: 50%;
  width:20em; /* width value */
  height:20em; /* height value */
  margin-top: -10em; /* minus 1/2 of your height */
  margin-left: -10em; /* minus 1/2 of your width */
}

Another smart centering option using float and clear.

CSS Optimization

In my everyday CSS coding practice I found a good way of CSS code optimization - in case you have a LOT of stylings in page.

I prepare a small pieces of code, which form big classes, as morphemes for high level CSS grammar.

My CSS grammar consist of elements, for example:

.tal {text-align:left}
.tac {text-align:center}
.tar {text-align:right}

.f10 {font-size:10px}
.f11 {font-size:11px}
.f12 {font-size:12px}

.cwhite {color:#fff}
.cred {color:red}
.cblack {color:#000}

.fb {font-weight:bold}

.pabs {position:absolute;}
.prel {position:relative;}

Using this approach you can easily create different combinations without using of big classes:

<p class="f10">text <span class="cwhite f12 fb">text text</span></p>

<p class="f12 cred">text <span class="cwhite f10 fb">text text</span></p>

Of course, there are another methods of CSS Optimization, but this one is good for page elements with a rich nuances.

IE7 CSS Filters

IE7 CSS Filters:

*+html

element [attribute] { property:rule; }

element { property /**/:rule; }

#test1 { color /**/:green; }

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Modern Separators In Lists Menu

Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers such as Firefox 2 or Opera 9, which allows us to make really interesting CSS pirouettes.

For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:

Item1 | Item2 | Item3 | Item4

Now we will use modern smart browsers. We will take a simple list without separators:

<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>

and add separators BY CSS itself with this style:

CSS

1. li {
2. display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1px solid #ccc
3. }
4. li:first-child {
5. border-left:none
6. }

Now we have:

Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.

Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.

Here is an another interesting approach:

1. #nav{
2. overflow:hidden;
3. width:100%;
4. }
5. #nav li{
6. margin-left:-1px;/* all elements go on left*/
7. }