Hello Friends,
We always use table for grid at html pages. Recently I was working on a page where I needed a grid with three column and 5 rows.. where I had to use <ul>, <li> and <div> for designing...
I completed the project with the following way.. I hope it is OK and will help someone for this type solutions...
HTML page code
---------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test grid design</title>
<style type="text/css">
<!--
@import url("main.css");
-->
</style>
</head>
<body>
<div id="left">
<ul id="pages">
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
<li>
<div class="divstyle">This is Div1</div>
<div class="divstyle">This is Div2</div>
<div class="divstyle">This is Div3</div>
</li>
</ul>
</div>
</body>
</html>
----------------------------------------------
CSS style code
-----------------------------------------------
#left{
width:460px;
}
#left #pages{
padding:0px;
margin:0px;
list-style:none;
}
#left #pages li{
padding:0;
margin:0;
text-align:left;
margin-bottom:1px;
}
#left #pages div{
float:left;
width:140px;
padding:0 5px;
border:1px solid #cccccc;
height:25px;
line-height:25px;
background-color:#f5f5f5;
color:#000000;
text-decoration:none;
}
---------------------------------------
I just sharing my knowledge and findings, though I know many of you completed this type solution before.
Thanks
Table grid with css
- parthasarker
- Insanely Distorted
- Posts: 2369
- Joined: Mon Dec 01, 2008 5:17 pm
- Full Name: Partha Sarker
- Expertise: Web Design
- asifshahid
- Insanely Distorted
- Posts: 4329
- Joined: Tue Oct 16, 2007 2:35 pm
- Full Name: Asif Shahid
- x 37
amar moto manusher kaje lagbe thanks partha bhai....
Asif Shahid
Sydney, Australia
Sydney, Australia
- sweetafroza
- Proud Member
- Posts: 1979
- Joined: Fri Jun 27, 2008 8:30 pm
- Full Name: Luthfunnahar Hussain
- Expertise: Web Design
thanks partha bhai... eta amaroo kaje lagbe.. ----
- sislamrony
- Posts: 310
- Joined: Wed Jan 28, 2009 8:01 pm
- Full Name: Shamsul Islam Rony
- Expertise: Broadcast Graphics
Bojhar Onek chesta korlam.10% bujhte parchi.Baki 90% DD te member thaika bujhte hobe.
- sweetafroza
- Proud Member
- Posts: 1979
- Joined: Fri Jun 27, 2008 8:30 pm
- Full Name: Luthfunnahar Hussain
- Expertise: Web Design
hehehehehe... try kore jan rony bhai... its very simple :p
- sislamrony
- Posts: 310
- Joined: Wed Jan 28, 2009 8:01 pm
- Full Name: Shamsul Islam Rony
- Expertise: Broadcast Graphics
Sobkichu ki r akdin a hoi apa. Man is mortal-Manush matro vul hoi.Tai onekdin lage.he he he
css er oi deep e khokhono think kori nai... ar proyozon o pore nai..shotti bolte... peye balo laglo.....
tnx..partha da
tnx..partha da