SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to convert table into div ?

    Hi,

    I made this table:

    HTML Code:
    		<table align="center" width="200" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td class="cell_head">Browse Categories</td>
    		</tr>
    		<tr>
    			<td class="cell_cont">Lorem ipsum dolor sit amet.</td>
    		</tr>
    		</table>
    And here's the css code:

    HTML Code:
    .cell_head
    {
    	height:30px;
    	width:200px;
    	background-image: url("images/category_cell.png");
    	font-size:13px;
    	font-weight:bold;
    	color:#fff;
    	padding-left:14px;
    	border:0px;
    }
    
    .cell_cont
    {
    	width:200px;
    	padding:3px;
    	border:1px solid #000;
    	font-size:12px;
    }
    How to convert the table into css layout to achieve same result ?

    Thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tapan View Post
    Hi,

    I made this table:

    HTML Code:
    		<table align="center" width="200" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td class="cell_head">Browse Categories</td>
    		</tr>
    		<tr>
    			<td class="cell_cont">Lorem ipsum dolor sit amet.</td>
    		</tr>
    		</table>
    And here's the css code:

    HTML Code:
    .cell_head
    {
    	height:30px;
    	width:200px;
    	background-image: url("images/category_cell.png");
    	font-size:13px;
    	font-weight:bold;
    	color:#fff;
    	padding-left:14px;
    	border:0px;
    }
    
    .cell_cont
    {
    	width:200px;
    	padding:3px;
    	border:1px solid #000;
    	font-size:12px;
    }
    How to convert the table into css layout to achieve same result ?

    Thanks.
    HTML Code:
    		<div id="divWrapper">
    		
    			<div class="cell_head">Browse Categories</div>
    		
    			<div class="cell_cont">Lorem ipsum dolor sit amet.</div>
    		</div>
    HTML Code:
    #divWrapper {
          width:20em;
          min-height:3em;
    }
    
    .cell_head
    {
    	height:3em;
    	width:100%;
    	background-image: url("images/category_cell.png");
    	font-size:13px;
    	font-weight:bold;
    	color:#fff;
    	padding-left:1.4em;
    	border:0px;
    }
    
    .cell_cont
    {
    	width:100%;
    	padding:3em;
    	border:1px solid #000;
    	font-size:1.2em;
    }
    Not tested, let me know if you have any trouble.

    Quick tip, stay away from fixed px widths and go for min/max em widths.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •