Tuesday, May 8, 2012

how to make footer right hand side and left hand side as curve using css

![Actual Result of css and html files given below][1]![Expected Result image][2]
Hi All,
I have a table which has two rows and three columns.
The first row serves the purpose of body and The second row serves the purpose of footer.
I want to design footer using css.so that the look and feel is better.
However i can add the image However, there is gap between between each image.so it has not come out well.
As i mentioned above the row (tr) has three columns(td) and each td has one-one image.


Below is the code of html.

//left css class

//middle css class



some text


some text


//right css class

The Css class code are given below:
td.FooterLeftBG //css class for left td and left td is used to make left hand side curve footer
{
background: url('footer-leftbg.png') bottom left;
height:35px;
width:12px;
padding:0px;
float:right;
}
td.FooterRightBG // css class for right td and right td is used to make right hand side curve footer
{
background: url('footer-right-bg.png') bottom right;
height:35px;
padding:0px;
width:12px;
float:left;
}
td.FooterBG // css class for td where the footer holds some contents.
{
background:url('footer-middle-bg.png');
background-repeat:repeat-x;
border-collapse:collapse;
height:35px;
width:5px;
} Please help.I have been trying from 1week:( i have tried through google also.



Expected Format:


[1]: http://i.stack.imgur.com/c7ULg.png
[2]: http://i.stack.imgur.com/2J4zW.png




No comments:

Post a Comment