Using the DIV tag to display columns rather than tables Rumi, November 15, 2013 The TABLE element may be a convenient way of producing stable layouts, but the W3C WAI guidelines are pretty clear that tables are for displaying tabular information, not for arranging page content. The DIV element is used as the basic layout element as it does not add any extra meaning to semantic mark-up. With a bit of CSS you can position it and size it pretty much anyway you want. A basic set of columns The basic technique is shown by the columns below: These columns have been created by wrapping three DIV elements into one container DIV. The container has its width set to 900 pixels and each column is set to 300 pixels wide. In order to make the columns line up you need to set the float style of each column DIV to left. The HTML below shows how this is arranged in simple mark-up. <div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> <div class="red" >Column 3</div> </div> <div class="clear"></div> When calculating the columns size, take into account any padding and borders as they are included in the width of the column. For example, a column that is 150px wide with padding of 5px and a border of 1px should be set to 144px wide. Margins are added to the outside, so a 10px margin will make the same column run to 160px. Here are the styles: div.columns { width: 900px; } div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Note that there is a final DIV element where the clear style has been set to both. This effectively “re-sets” the layout after the floating columns so any further elements won’t try and line up with your last column. Using a grid Most layouts require more flexibility than a fixed set of columns, so a grid system is often adopted. This allows a page to be based on a more flexible set of styles. The example below shows a grid composed of three different types of column. The HTML is pretty straightforward: <div class="grid"> <div class="col100 red">100 pixels</div> <div class="col200 grey">200 pixels</div> <div class="col300 red">300 pixels</div> <div class="col100 grey">100 pixels</div> <div class="col200 red">200 pixels</div> </div> <div class="clear"></div> As are the styles: div.grid { width: 900px; } div.grid div { float: left; height: 100px; } div.col100 { width: 100px; } div.col200 { width: 200px; } div.col300 { width: 300px; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Aligning columns to the centre of the page Most column-based layouts use a fixed width that is centred on the page. This can be done by manipulating the text alignment of a containing DIV element but is more commonly achieved through the margin style of the content DIV. If you set this to auto then browsers will automatically line up the content in the middle. The example below shows a simple two-column DIV element that is centred in a container: The HTML shows how the DIV elements are arranged: <div class="centered"> <div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> </div> <div class="clear"></div> </div> The styles will be pretty familiar, save for the extra margin attribute. div.centered { width: 900px; } div.columns { width: 600px; margin: 0 auto;} div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Src: http://www.ben-morris.com/using-the-div-tag-to-display-columns-rather-than-tables Related Scripts DIVHTML
PHP enable error reporting December 11, 2013 You can set PHP error reporting on in php.ini file (in case you have access to this file). Set the following lines: error_reporting = E_ALL display_errors = On If you have no access to php.ini file but you can modify .htaccess file on your server (in root of your public_hml… Read More
Tweaking Afterlogic Webmail Pro 6 November 6, 2011 Removed the default footer texts and added up usermin module like this 😉 in inc.footer.php file- <!– Powered by <a href="http://www.afterlogic.com/products/webmail-pro" target="_blank"> AfterLogic WebMail Pro</a><br /> Copyright © 2002-2010 <a href="http://www.afterlogic.com" target="_blank">AfterLogic Corporation</a> –> <?php $domain= $_SERVER['SERVER_NAME']; echo ":: CLICK BELOW LINK TO :: <BR /> <a href= https://$domain:20000>Change Password… Read More
Send HTTP requests using cURL June 6, 2014 Reading a URL via GET: curl http://example.com/ Defining any HTTP method (like POST or PUT): curl http://example.com/users/1 -XPUT Sending data with a request: curl http://example.com/users -d"first_name=Bruce&last_name=Wayne" If you use -d and do not set an HTTP request method it automatically defaults to POST. Performing basic authentication: curl http://user:password@example.com/users/1 All together… Read More