Advance CSS Row and Column

With my latest blog design I promise before that I will write a new advance tutorial for CSS Row and Column. This tutorial is tested in Safari, Opera, IE7 and especially our favorite browser Mozilla Firefox. I try to preview this tutorial using IE6 and the problem was the height of the layer and its border. Why I am using border? You’ll find it out if you read the step by step tutorial bellow.

VIEW DEMORow and Column

Step 1
For the first step I will use unordered list to start the title for each column cell and the column cell for the members. Don’t forget to give each layer a class names especially the unordered list cos we need to call those classes for CSS coding.

<ul class="members-table">
<li class="title-table">
<div class="check-box"><input name="select" type="checkbox" value="" /></div>
<div class="title-name">Name</div>
<div class="title-email">Email</div>
<div class="title-country">Country</div>
<div class="title-group">Group</div>
<div class="title-cart">Cart</div>
<div class="title-member-since">Member Since</div>
<div class="title-action">Action</div>
</li>
<li class="row-hover">
<div class="mem-check-box"><input name="select" type="checkbox" value="" /></div>
<div class="mem-name"><a href="#">Member's Name 1</a></div>
<div class="mem-email"><a href="mailto:username@domain.com">username@domain.com</a></div>
<div class="mem-country">Philippines</div>
<div class="mem-group">Wholesale</div>
<div class="mem-cart">00</div>
<div class="mem-member-since">Jan 03, 2008</div>
<div class="mem-action"><a href="#">Edit</a> - <a href="#">Delete</a></div>
</li>
</ul>

Step 2
Let’s now start coding for unordered list for your row and column. For the ul set the margin and padding to 0. For the li set its padding to 0, float to left and list style to none. As you notice in margin for li there is 3 pixels on it. That part is defining for margin bottom to 3 pixels so that each row won’t stick to each other.

.members-table{
margin:0;
padding:0;
}
.members-table li{
margin:0 0 3px 0;
padding:0;
float:left;
list-style:none;
}

Step 3
Were done for step 2 and let’s proceed in defining the padding, height and arrangement of the layers. This step is to define all layers so that there will be no hassle in repeating the codes. Each layer will be defined float to left, padding top is 3 pixels, padding right is 5 pixels, padding bottom is 3 pixels, padding left is 5 pixels and height will be 15 pixels. Why there is a height? Because there was a problem in the background color for each row located at the check box.

.members-table li div{
float:left;
padding:3px 5px 3px 5px;
height:15px;
}

Step 4
Our title row was not given a design yet what I mean a background color and space in each cell, right? Ok let’s now define the code for that part.

.title-table{
background-color:#666666;
}

The code bellow will be use for cell spacing. If your site uses background white, the border-right will be 2 pixels and it is solid with color white.

.check-box, .title-name, .title-email, .title-group, .title-group, .title-cart, .title-member-since, .title-action, .title-country{
border-right:2px solid #FFFFFF;
color:#FFFFFF;
}

Step 5
Here in this step we will begin defining the width for all cells. As you notice in check box part, I define the alignment to center so that the check box will look good in there.

.check-box, .mem-check-box{
width:15px;
text-align:center;
}
.title-name, .mem-name{
width:150px;
}
.title-email, .mem-email{
width:250px;
}
.title-country, .mem-country{
width:133px;
}
.title-group, .mem-group{
width:80px;
}
.title-cart, .mem-cart{
width:35px;
}
.title-member-since, .mem-member-since{
width:80px;
}
.title-action, .mem-action{
width:60px;
}

Step 6
From step 4 what I did was defining the arrangement of the title, right? Here in step 6 we will define the member’s cell by setting the border right to 2 pixels and font size to 11 pixels.

.mem-check-box, .mem-name, .mem-email, .mem-group, .mem-cart, .mem-member-since, .mem-action, .mem-country{
margin:0;
border-right:2px solid #FFFFFF;
font-size:11px;
}

Step 7
This step will be our row effect guys. What I’m going to do is define a hover effect for member’s row. Please check the code from step 1 to see that we have defined a class name for the member’s list.

.row-hover{
background-color:#CCCCCC;
}
.row-hover:hover{
background-image:none;
background-color:#999999;
color:#FFFFFF;
}

Step 8
For our finale, the code bellow is used to define the check box cell. The cell padding and margin is set to 0 so the check box will be align properly inside his cell.

.mem-check-box, .check-box{
padding:0;
margin:0;
}

The code bellow is defining the color for the text link into white.

.members-table li:hover a{
color:#FFFFFF;
}
.members-table li a:hover{
color:#000000;
}