W3D Problems: Nov 28, 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>

W3D Problems

Sunday, November 28, 2010

Simple link rollover using css

Tableless form using HTML with CSS

Followers

Blog Archive

Contributors