Centering Div

19-07-2009

Very nice, crossbrowser method for div centering both horizontally and vertically.
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.

Comments (0)

Multiple Backgrounds In CSS3

11-09-2008

W3C CSS Working Group has published a Working Draft of CSS Backgrounds and Borders Module Level 3, which extends CSS2. The basic changes compared to Level 2 are borders consisting of images, boxes with multiple backgrounds, rounded corners and even shadows.

Comments (0)

YAML

30-06-2008

If you as me like an elastic or flexible designs, I like to introduce you YAML (”Yet Another Multicolumn Layout”) - XHTML/CSS–framework developed for creating a flexible and user-friendly layouts. We all know of the importance of flexible layouts as there are millions screens out there: mobile, handhelds, WebTV, etc. Flexible design (as here at SEO Freelancer) simplifies life. Watch demonstration of YAML-based design. Simple, elegant, cross-browser compliant. And flexible.

AJAX Generated Nofollow

17-01-2008

As you can see I've got a SEO Resources page with tons of links. Recently I've decided to insert 'nofollow' tag into every link on that page.

As there are over 1500 useful listed resources editing urls by hand would be immence waste of time. So, I've decided to use magic of AJAX. That looked impressive and realistic. The idea was simple - to find div by id containing tag <a> and to add rel='nofollow'. Mechanism for this purpose looked like this:

  • var links = document.getElementById(id).getElementsByTagName('a');
  • for (var i=0; i
  • links[i].rel = "nofollow"
  • }

Dreams, dreams... The end of this story is negative, because searchbot can't run AJAX :(

Comments (0)

CSS Optimization

29-08-2007

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.

Comments (2)

<< First < Previous [1 / 2] Next > Last >>