Tuesday, May 10, 2011

CSS tables - Do you know this?

HTML table is a very easy way to display tabbed panes . Using css div based layout to achieve tabbed layout is bit complicated using float selector in CSS. This can be easily achieved by using CSS tables.

CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers.

Applying display property values to web page elements that is table-related  causes the elements to mimic the characteristics of their HTML table equivalents. Here, I will demonstrate how this will have a huge impact on the way we use CSS for web page layouts.

Here is How we can achieve it:

Specifying the value table for the display property of an element allows you to display the element and its descendants as though they’re table elements. The benefit of using  CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it—without the semantic problems of marking up non-tabular content as a HTML table in the document.

Let’s understand this with simple example: the three-cell grid layout shown below. We’ll look at three different HTML markup samples that will result in the same visual layout. 

<div class="holder">
<div class="table_row">
<div class="table_cell">CELL 1</div>
<div class="table_cell">CELL 2</div>
<div class="table_cell">CELL 3</div>

A set of nested div elements may not seem so very exciting, but hang in there, we’re building to something. The CSS is also very simple:

.holder {
  display: table;

.table_row {
  display: table-row;

.table_cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;

How Does This Work?

The display property allows you to specify a range of table-related values in order to make elements display as though they were table elements. The available display values are:
  • table makes the element behave like a table element
  • table-row makes the element behave like a table row (tr) element
  • table-cell makes the element behave like a table cell (td) element
  • table-row-group makes the element behave like a table body row group (tbody) element
  • table-header-group makes the element behave like a table header row group (thead) element
  • table-footer-group makes the element behave like a table footer row group (tfoot) element
  • table-caption makes the element behave like a table caption element
  • table-column makes the element behave like a table column (col) element
  • table-column-group makes the element behave like a table column group (colgroup) element

This article has presented a basic primer to the usage of the table-related values of the CSS display property—finally, a source of relief for all those struggling to construct reliable grid-based layouts using CSS!

Monday, March 14, 2011

HCL ME Laptop review

HCL has Re branded its Laptops under the new name as HCL ME ( Mobile Entertainment). I just Brought a new ME range laptop HCL ME ICON L 54 A.

So here is the Configuration:

Processor:     Intel® Core™ i3 380M Processor (2.53GHz,3M Cache)
Chipset:     Intel® HM55 chipset based , 2 Inbuilt Antenna
Memory :    2 GB DDR3 RAM
Hard Disk Drive:     320 GB SATA Hard Disk Drive
Optical Disk Drive :    Slim DVD DL Super Multi Drive
WLAN :    b/g/n WLAN card
Bluetooth/Web Cam:     Integrated Bluetooth & 1.3MP Web Camera with one Mono Internal Mic
Card Reader :    4 in 1 card reader (Multimedia Card (MMC) / Secure Digital Card (SD) / Memory Sticks (MS / MS Pro)
Screen:     14.0" Wide XGA TFT LCD Panel (LED backlit) , 16:9 aspect ratio, Glare type with Native Resolution:1366 x 768
Graphics Card :    Intel® HD Graphics-Inbuilt in HM55 chipset
Audio:     1 Audio Out , 1 DC-IN Jack
On Board:     10/100/1000 Mbps Gigabit Ethernet controller
Keyboard + Touch:     87 Keys Keyboard + 2 Hot Keys Keyboard , Touchpad with 2 click buttons and has Multimedia mode with illuminated touch buttons(called MMB – Multi-Media Buttons)

Input/Output Port:     PCI -e Slot, USB Port :Three (Ver. 2.0) -(one port combined with E-Sata) , 1 RJ 45 - LAN port , 1 VGA Port , 1 External Mic Input , 1 Audio Out , 1 DC-IN Jack, Finger Print Sensor, e-Sata Port,3G SIM Card Slot, HDMI Port, Kensington Lock
Weight:     Approx. 2.2 Kg weight without Adaptor
Colour :    Burgundy Red fade-out Black IMR finish
Warranty Support :    One Year On-Site Warranty with unique 24x7x365 days helpline support from HCL

It comes bundeled with Loads of  cool HCL proprietary softwares like Erase for ME, Encrypt ME, Lock ME, Secure ME, EC2 Technology and Split ME.
  • Value for Money (Priced at Rs. 28,600)
  • EC2 Data recovery software is great
  • Nice Bright Display
  • 3G SIM Card Slot available 
  • Touchpad  has Multimedia mode with illuminated touch buttons(called MMB – Multi-Media Buttons)
  • Free ME Backpack and addons (You have to pay bit extra) available for online purchase
  • Only 2 USB ports
  • The Battery life too isn’t great at only 2.5hours where company claims  it to be up to 4.5 hours :(
  • Bulky , Approx. 2.2 Kg weight without Adaptor

Friday, June 4, 2010

Flex 4

Flex 4 is a sexy framework that lets you write code that feels more like coding a desktop application—except it runs inside the Flash Player. Because it targets the Flash Player, you can build new rich Internet applications (RIAs) without worrying about browser compatibility nonsense, JavaScript, CSS, and so on. Because Flex 4 targets one platform (Flash 10),you don’t have to worry about platform compatibility issues. The write once, run anywhere (WORA) dream that client-side Java programmers had—before it turned into write once, debug everywhere—can finally be realized, but with Flex. Flex achieves what previous technologies such as Java applets failed miserably in attempting: applications that feel like desktop applications but that run inside any modern web browser on Windows and Mac.

Now that you’re excited about Flex 4, let’s take a deep breath and get an overview of the platform.

In Flex 4, we write code in MXML (XML files with an .mxml extension; M for Macromedia, the company that created Flex and that was acquired in 2005 by Adobe) and ActionScript (text files with an .as extension) files and compile them into an SWF file (that is, a Flash movie), which runs in the Flash Player.This SWF is usually referenced by an HTML file, so that when a user with a modern web browser loads the HTML file, it plays the Flash movie (prompting the user to download Flash 10 if it’s not present). The SWF contained in the web page can interact with the web page it’s contained in and with the server it was sent from.

Even if you’ve never created a Flash movie in your life, don’t consider yourself a designer, and wouldn’t recognize the Timeline if you tripped over it, you can use Flex to create attractive applications that run in the Flash Player. Flex development is easily learned by any intermediate level developer with either web (HTML and JavaScript) or desktop UI (such as Windows Forms or Java Swing) programming experience. A Flex 4 application is just a Flash movie (SWF), which lives inside a web page loaded by a web browser that has Flash 10 installed.