CSS XHTML Tutorial

CSS XHTML Tutorial
CSS XHTML tutorial

Wednesday, January 13, 2010

CSS Based Vertical Navigation With Mouse-Over Effect


Create following styles in your head section ;

<style type="text/css">

*{padding:0; margin:0;}

body{background:#f6f6f6; font-family:Tahoma, Geneva, sans-serif;}

ul.nav{ list-style:none inside; margin:10px; width:200px; font-size:14px; font-weight:bold;}

ul.nav li{ height:auto; margin:0; border-top:1px #9cf solid; border-bottom:1px #369 solid;}

ul.nav li a{ text-decoration:none; display:block; color:#fff; border-left:20px #069 solid; background:#09C; padding:5px 10px;}

ul.nav li a:hover, ul.nav li.active a{ text-decoration:none; display:block; color:#036; border-left:20px #09c solid; background:#ace; padding:5px 10px;}

</style>

Type the following code in your body section

<body>

<ul class="nav">

<li class="active"><a href="#">Link-1</a></li>

<li><a href="#">Link-2</a></li>

<li><a href="#">Link-3</a></li>

<li><a href="#">Link-4</a></li>

<li><a href="#">Link-5</a></li>

<li><a href="#">Link-6</a></li>

<li><a href="#">Link-7</a></li>

</ul>

</body>

</html>

Saturday, December 26, 2009

How to design a CSS based Login Form

css based login form












<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Based Login Form</title>

<style type="text/css" media="all">

*{padding:0; margin:0}

body{margin:10px; font-family:Arial, Helvetica, sans-serif; font-size:14px;}

form{border:1px #369 solid; background:#35414e; padding:20px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; color:#eef;}

label{display:block; margin:10px 0 0;}

input[type=text], input[type=password] {background:#404e5b; border:none; display:block; margin:5px 0 10px; padding:3px; width:300px; color:#eee;}

input[type=submit] {background:#404e5b; border:1px #666 solid; display:block; margin:0 auto; color:#eee; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:5px; -khtml-border-radius:3px; color:#eee; font-weight:bold; padding:3px; cursor:pointer;}

.legend{border-bottom:1px #eee solid; display:block; font-weight:bold;}

</style>

</head>



<body>

<form name="" id="" action="#" method="">

<span class="legend">Login Here</span>

<label>User Name</label>

<input type="text" name="">

<label>Password</label>

<input type="password" name=""><br />

<input type="submit" value="Login" name="">

</form>



</body>

</html>

Wednesday, December 23, 2009

Basics of Web Graphic Design

Web design is a kind of graphic design intended for development and styling of objects of the Internet's information environment to provide them with high-end consumer features and aesthetic qualities. The offered definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.

Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.