How to convert unitx timestamp to date using MYSQL

You can convert the timestamp to date in mysql by using DATE and FROM_UNIXTIME function. The command given bellow,

> SELECT DATE( FROM_UNIXTIME( `created` ) ) AS pDate FROM phpkit

OUTPUT as follows,
------------------------------
2008-07-14
------------------------------

Inline and block elements

While creating an HTML page, it is important to understand the difference between the 2 elements categories inline and block to avoid coding errors and impost the CSS for the best.

Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..

  • block: an element which forms a separate block
  • inline: an element which stays inline with the rest of the content

Block element

A block element has the following characteristics:
  • Forms a block and positions itself vertically underneath with a new empty line above and under
  • Takes all the available width based on the measure of its parent element (container)
  • Its height changes in rapport to its content
  • Can contains other inline and/or block elements (es: a <p> inside a <div>)
  • Via css, we can impost a fixed width and/or height
  • Example of natural html block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Inline elements

An inline element has the following characteristics:
  • Positions itself horizontally inline with the rest of the content of its parent element (container)
  • Takes the minimum width and height in rapport to its content
  • Can contains ONLY other inline elements (es: an <img/> inside a <a>)
  • Via css, we can NOT impost fixed measure
  • Example of natural html inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

Using the css display:block; and display:inline;, we can change the property of the element from block to inline or from inline to block.


CSS Block & CSS Inline Elements

The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:


Block
       Takes up the full width available, with a new line before and after
       (display:block;)

Inline
       Takes up only as much width as it needs, and does not force new lines
       (display:inline;)

Not displayed
       Some tags, like <meta /> and <style> are not visible
       (display:none;) 

Block example

<p> tags and <div> tags are naturally displayed block-style.

(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Here I’ve started a paragraph and now I’m going to insert a <div>

new div inside my paragraph

and then continue the text here…

See how the <div> jumped in and took over the full width of the space?

Common HTML elements that are naturally block-display include:
<div>
        Your general-purpose box
 
<h1> … <h6>
        All headings
 
<p>
        Paragraph
 
<ul>, <ol>, <dl>
        Lists (unordered, ordered and definition)
 
<li>, <dt>, <dd>
        List items, definition list terms, and definition list definitions
 
<table>
        Tables
 
<blockquote>
        Like an indented paragraph, meant for quoting passages of text
 
<pre>
        Indicates a block of preformatted code
 
<form>
        An input form

Inline example

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

So here I’ve got a paragraph going on, and I’m going to add a <span> tag that has a yellow background and italic text. See how it just fits right in with the flow of the text?

More elements are naturally inline-style, including:

<span>
        Your all-purpose inline element
 
<a>
        Anchor, used for links (and also to mark specific targets on a page for direct linking)
 
<strong>
        Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
 
<em>
        Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
 
<img />
        Image
 
<br>
        The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element. 
 
<input>
        Form input fields like and
 
<abbr>
        Indicates an abbr. (hover to see how it works)
 
<acronym>
        Working much like the abbreviation, but used for things like this TLA.
 

You change the display property of any elements


Although each HTML element has its natural display style, you can over-ride these in CSS.

This can be very useful when you want your page to look a particular way while using semantically-correct HTML.

Examples

Say you want to provide a list of items, but you don’t want a big bulleted list. You just want to say that you’re going to the store to buy:
  • some fizzy drinks,
  • a chainsaw,
  • and some nylon stockings.
Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a
    .

Here’s the code


<ul>
<li><a href=”#”>Home</a></li> <li><a href=”#”>About us</a></li> <li><a href=”#”>Products</a></li> <li><a href=”#”>FAQs</a></li> <li><a href=”#”>Contact us</a></li>
</ul>

Here’s how it looks as a normal list


Just adding the class “toolbar”…

<style type=”text/css”>
.toolbar li {
display:inline; background-color:#eee; border:1px solid; border-color:#f3f3f3 #bbb #bbb #f3f3f3; margin:0; padding:.5em; zoom: 1;
}
</style>
<ul class=”toolbar”>
<li><a href=”#”>Home</a></li> <li><a href=”#”>About us</a></li> <li><a href=”#”>Products</a></li> <li><a href=”#”>FAQs</a></li> <li><a href=”#”>Contact us</a></li>
</ul>

Here’s how it looks with the CSS styles applied



Validating HTML5 in the browser

I like to be alerted of any validation errors that sneak into my markup as soon as possible. That’s why I find the HTML Validator Extension for Firefox very hard to live (well, work) without.

Unfortunately, it does not support HTML5. I’ve been looking hard for an alternative that does and has the same features as the HTML Validator Extension, i.e. runs locally in the browser without sending anything to a remote server and validates every page you load automatically.

No luck.

There are tools that validate markup by sending it to a remote server, either automatically or manually, but I don’t want that. I want to be able to check my work even though it’s behind a login or if I’m not connected to the Internet.

If you happen to know of a browser extension that solves this problem, please let me know. It doesn’t have to be for Firefox – Opera, Chrome or Safari would be fine too as long as it runs on my Mac.

Be careful with non-ascii characters in URLs

One thing that is rather common, especially on websites whose content is not in English, is URLs that contain unencoded characters such as space, å, ä, or ö. While this works most of the time it can cause problems.

Looking at RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax, characters that are allowed to be used unencoded in URLs are either reserved or unreserved. The unreserved characters are a-z, A-Z, 0-9, -, ., _, and ~. The reserved characters are used as delimiters and are :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and =.

In essence this means that the only characters you can reliably use for the actual name parts of a URL are a-z, A-Z, 0-9, -, ., _, and ~. Any other characters need to be Percent encoded.

So what does using an unencoded character like space or å in a URL mean in practice?

  • It doesn’t work in all user agents. Recent browsers seem to handle it pretty well, but older browsers may not be able to follow links or load images. It also causes problems for some other software that expects URIs to be valid (Ruby’s URI.parse is one).
  • It may make URLs ugly and hard to read since browsers may percent encode some of these characters before displaying them in the location bar. This varies from browser to browser. A URL like http://example.com/å ä ö/ may be displayed as http://example.com/å ä ö/, http://example.com/å%20ä%20ö/, http://example.com/%C3%A5%20%C3%A4%20%C3%B6/, or even http://example.com/√•%20√§%20√∂/.

To keep things simple and predictable, consider sticking to the unreserved characters in URLs unless you have a really strong internationalisation requirement for using other characters.

Remember non-vendor-prefixed CSS 3 properties (and put them last)

Everybody wants to use CSS 3 now that even Internet Explorer will support parts of it once IE 9 is out. But since parts of CSS 3 are still subject to change, most browsers use a vendor prefix for many CSS 3 properties to signal that their implemenation is “experimental” and may change in a later version of the browser.

This means that for a property like border-radius to work cross-browser you need to specify it several times with different vendor prefixes, like this:

.box {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

The -moz- prefix targets Firefox and other Gecko-based browsers, -webkit- is for older versions of Safari and other WebKit-based browsers, and the non-prefixed border-radius property is currently used by Safari 5, Chrome, Opera 10.5, and IE 9.

“Inspect element” is not the same as “View source”

Tools like Firebug for Firefox, WebKit’s Web Inspector and Opera’s Dragonfly are indispensible tools for front-end Web developers, letting you view the DOM as the browser sees it.

And that’s where these tools can actually cause some problems, or at least a bit of confusion. When you choose “Inspect element” or otherwise bring up one your browser’s DOM inspector, what you’re looking at is the document tree after the browser has applied its error correction and after any JavaScripts have manipulated the DOM. It is not necessarily the same as what you see when you choose “View source”.

CSS Colors: Take Control Using PHP


While many web sites use powerful programming environments to create HTML, these same tools are usually ignored when it comes to creating Cascading Style Sheets (CSS). This article describes how to take control of your colors in CSS using PHP. You will learn how to:

  • Centralize your color definitions using variables.
  • Separate presentation and content by referring to colors using abstract names such as base and highlight.
  • Automatically generate a color gradient from a single base color:
    -5
    -4
    -3
    -2
    -1
    0
    +1
    +2
    +3
    +4
    +5
  • Automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:
    -5
    -4
    -3
    -2
    -1
    0
    +1
    +2
    +3
    +4
    +5

Learn CSS Positioning in Ten Steps

his tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float

1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Simple 2 column CSS layout

This is a tutorial on how to use CSS to create a simple two column layout.


The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.


To see the full CSS used for each step, view source on the example documents.