W3D Problems: 11/01/2010

Sunday, November 28, 2010

Simple link rollover using css

Creating a simple image rollover using css is easy and great to use. It can be used in menus and banners and else where with a few modification.
For example if you you want to create a css menu button

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple link rollover using css</title>
    <style type="text/css">
        a
        {
            background: #0099CC;
            color: #FFFFFF;
            display: block;
            padding: 4px;
            text-align: center;
            text-decoration: none;
            width: 99px;
        }
        a:hover
        {
            background: AliceBlue;
            color: #000;
        }
    </style>
</head>
<body>
    <a href="#">Click Me</a>
</body>
</html>

you can even use a image instead of just color. To do so just append the following to background.

{
    background: url(image-normal.png);

and

a:hover

{
   background: url(image-hover.png);
}

Tableless form using HTML with CSS

Making a tableless form design using HTML with CSS is very easy. It is a good practice because tables are slower than div tags.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tableless form design using HTML with CSS</title>
    <style type="text/css">
        form div label
        {
            width: 112px;
            display: inline-block;
        }
        form div
        {
            margin: 0.5em 0;
        }
    </style>
</head>
<body>
    <form>
        <div>
            <label for="txtName">Name</label>
            <input name="txtName" id="txtName" />
        </div>
        <div>
            <label for="txtEmail">Email</label>
            <input name="txtEmail" id="txtEmail" />
        </div>
        <div>
            <label for="txtMobile">Mobile</label>
            <input name="txtMobile" id="txtMobile" />
        </div>
        <div>
            <label for="txtComments">Comments</label>
            <input name="txtComments" id="txtComments" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>
</body>
</html>

Saturday, November 27, 2010

Adding www to your domain with htaccess

The script below adds www to all the requests without the prefix www e.g. example.com and converts it to www.example.com

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Line one -> Switch on Rewrite Engine
Line two -> Looks for url without www and captures the rest of url
Line three -> Add the www to previous captured url and forwards the request

Thursday, November 25, 2010

How to attach a full width footer to an absolute width wrapper

When you absolute position any object using CSS, the width: 100% may not work correctly in any browser. To workaround this problem we use the anchor solution. For example you want a layout in which the footer should expand to 100% width use the following CSS

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>How to attach a full width footer to an absolute width wrapper</title>
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        *
        {
            margin: 0;
            padding: 0;
        }
        .main
        {
            height: 0 auto;
            min-height: 100%;
        }
        .footer
        {
            position: absolute;
            bottom: 0; /*To anchor with bottom border of container*/
            left: 0; /*To anchor with left border of container*/
            right: 0; /*To anchor with right border of container*/
            background: BurlyWood;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="top">Top</div>
        <div class="content">Somecontent</div>
        <div class="footer">Footer Content With absolute position</div>
    </div>
</body>
</html>

and you are done You can apply this solution to any absolute position object

Sunday, November 14, 2010

IIS cannot be started. Another web site may be using the same port

Sometimes when you try to start a stopped website, you receive an error message telling you

"IIS cannot be started. Another web site may be using the same port"

This problem occurs when this websites http(or other protocol) have been declared with no value or duplicate value. To solve this problem just

Right click on the web site and then click on "Edit Bindings...". If there are two binding to any port. Remove the one where the IP Address is empty.

Friday, November 12, 2010

Create counter using CSS and its benefits

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed on a page using the counter() or counters() function of the content property.
To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function.

<style type="text/css">tbody tr { counter-increment: rownum; }
 tbody { counter-reset: rownum; }
 table.name td.row:before { content: counter(rownum); }

</style>

This code will apply counter to the table(class='name') and column (class='row')
Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing counters</title>
    <style type="text/css">
        tbody tr
        {
            counter-increment: rownum;
        }
        tbody
        {
            counter-reset: rownum;
        }
        table.name td.row:before
        {
            content: counter(rownum);
        }
    </style>
</head>
<body>
    <table class="name">
        <thead>
            <tr>
                <td>#</td>
                <td>Item</td>
                <td>Description</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="row"></td>
                <td>Mac</td>
                <td>Apple</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Windows</td>
                <td>Microsoft</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Ubuntu</td>
                <td>Linux</td>
            </tr>
            <tr>
                <td class="row"></td>
                <td>Sun Solaris</td>
                <td>Sun</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Preview before sorting

Preview after sorting

Benefits
If you are using programmatic counters created using php or asp.net, and you apply table sorters the counter column also gets sorted. In some cases it does not matter but if it does then you can use the css counter because table sorters have no effect on them.

W3D Problems