css tricks for non web designers, i.e. PHP developers

Those are some CSS tricks i’ve been used or testing all around the web. I think it’s good to share this for all the non web designers around (i.e. PHP developers like me).


1) Apply alternate CSS Class Background Color on List items

If you are generating dynamically rows for a list item, perhaps you’re styling a table or a form and each row you use the <UL><LI> tags.
You can automatically apply a class to the odd elements of the list in two ways: via CSS or via jQuery.

CSS3 method

The CSS3 method is the most simple. I just add the .alternate class to my UL tag and then i add the following CSS snippet:

ul.alternate li:nth-child(odd) { background: #F8F8F8; }
ul.alternate li:nth-child(even) { background: #E8E8E8; }

jQuery method

The jQuery method is good for browsers that does not support the CSS3 way. Add the following code to your document ready function:

$('ul.alternate li:odd').addClass('oddrow');
$('ul.alternate li:even').addClass('evenrow');


2) Formatting long headers (i.e. post titles)

When displaying heading text above a post image or thumbnail, on small displays and not only those, i’ve the problem of long titles
creating a 2nd line. Depending on grid layout this is causing unalligned images in the grid or un-aesthetic titles.

A solution could be aligning text vertically to the bottom and giving the heading a fixed height.

This can be done with the following CSS:

   display: table-cell;
   vertical-align: bottom;	
   height: 80px;
   padding-bottom: 20px;

If your heading is more then two lines you can also cut off the extra text with the following CSS:

   overflow: hidden;
   text-overflow: ellipsis;
css tricks for non web designers, i.e. PHP developers, 4.0 out of 5 based on 2 ratings
GD Star Rating