Posted on September 24, 2008, Filled under HTML & CSS, 
Bookmark it
Greetings,
The classical submit buttons aren’t always the best choice for a form’s design. The need customized or replaced with images. In this short tutorial you will see how a submit button can be replaced with an image.
A standard submit button HTML Code will look something like this:
<input type="submit" name="submit" value="Submit">
Here’s a code that uses an image as a submit button:
<input type="image" src="http://www.yoursite.com/images/myimage.gif">
As you can see, the SRC attribute has been added containing the URL address of the image and the TYPE’s value was changed to ‘image’.
Good luck!
Posted on September 22, 2008, Filled under HTML & CSS, Bookmark it
Greetings,
This CSS Code is useful if you need to add a stylish icon into a text box inside a form. Many sites use this sort of inputs. Here’s an example of a login page using this style:
To see how the icons are added in the input text box check this css code:
.textbox_username
{
background: #ffffff url('images/icon_username.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
.textbox_password
{
background: #ffffff url('images/icon_password.png') no-repeat;
background-position: 1 1;
padding-left: 19px;
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
color: #333333;
font: 90% Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
height: 20px;
}
Read the rest of this entry…
Posted on September 21, 2008, Filled under HTML & CSS, Bookmark it
Do you want to add some style to your pagination links? If so, then the following CSS Codes can help you to do that. The links should be placed inside a DIV (as it is in our example) which can be easily customized. There are cases when some navigation links are not required, such as “next” (when there are no further pages) or “previous” (when the first page is selected). You can hide or place them between the following tags to mark that they are disabled: <span class=”disabled”>Previous</span>.
First Style
<style type="text/css">
<!--
/*
Credits: BitRepository.com
*/
html, body {
background-color: white;
color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;
text-align: center;
font-size: 10px;
margin-bottom: 5px;
padding: 10px;
}
/* Pagination Link */
#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #dddddd;
padding: 3px;
-moz-border-radius: 3px;
}
#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #A7A7A7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}
/* Pagination Current Page */
#pg a.current {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #336699;
background-color: #F5F7FA;
padding: 3px;
-moz-border-radius: 3px;
}
/* Pagination Disabled Page */
#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</style>
Read more from this entry…
Posted on September 13, 2008, Filled under HTML & CSS, Bookmark it
This is a simple tableless layout that uses DIVs having 3 (fluid) columns, a header & a footer.
layout-style.css – CSS File
BODY
{
margin: 0px;
padding: 0px;
background-color: white;
}
#main_wrapper
{
width: 900px;
height: auto;
}
#top
{
height: 80px;
background-color: #FFFFDF;
}
#left
{
float: left;
width: 200px;
background-color: #BED3C4;
}
#content
{
float: left;
width: 500px;
background-color: #E0F0FB;
}
#right
{
float: left;
width: 200px;
background-color: #f2faf2;
}
#bottom
{
width: 900px;
height: auto;
background-color: #F9E8F8;
}
.clear
{
clear: both;
}
layout.html – The actual page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>3 Columns Layout</TITLE>
<META name="Author" Content="Bit Repository">
<META name="Keywords" Content="columns, css, layout">
<META name="Description" Content="A 3 columns layout">
<LINK REL="stylesheet" HREF="layout-style.css" TYPE="text/css">
</HEAD>
<BODY>
<center>
<div id="main_wrapper">
<div id="top">Welcome to my WebSite<br /><br />my header text here my header text here my header text here my header text here.</div>
<div style="width: 900px;">
<div id="left">my text here my text here my text here my text here my text
here my text here my text here my text here my text here. </div>
<div align="center" id="content">my text here my text here my text here my text here my text here
my text here my text here my text here my text here my text here my text here my text
here my text here my text here my text here</div>
<div id="right">my text here my text here my text here my text here my text here
my text here my text here my text here my text here my text here my text here my text
here my text here my text here my text here</div>
</div>
<div class="clear"></div>
<div id="bottom">Copyright © MySite.com<br />My footer text here My footer text here
My footer text here My footer text here My footer text here My footer text here
My footer text here My footer text here My footer text here </div>
</div>
</center>
</BODY>
</HTML>
Our sample output will look like this:
Posted on September 10, 2008, Filled under HTML & CSS, Bookmark it
This is a simple tableless layout that uses DIVs having 2 (fluid) columns, a header & a footer.
layout-style.css – CSS File
body
{
margin: 0px;
padding: 0px;
background-color: white;
}
#main_wrapper
{
width: 900px;
height: auto;
}
#top
{
height: 80px;
background-color: #FFFFDF;
margin-bottom: 10px;
}
#left
{
float: left;
width: 200px;
background-color: #BED3C4;
}
#content
{
float: right;
width: 690px;
background-color: #E0F0FB;
}
#bottom
{
margin-top: 10px;
width: 900px;
height: 30px;
background-color: #F9E8F8;
}
.clear
{
clear: both;
}
layout.html – The actual page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>2 Columns Layout</TITLE>
<META name="Author" Content="Bit Repository">
<META name="Keywords" Content="columns, css, layout">
<META name="Description" Content="A 2 columns layout">
<LINK REL="stylesheet" HREF="layout-style.css" TYPE="text/css">
</HEAD>
<BODY>
<center>
<div id="main_wrapper">
<div id="top">Welcome to my WebSite<br /><br />my header text here my header text here
my header text here my header text here.</div>
<div id="content_wrapper">
<div id="left">my text here my text here my text here my text here my text
here my text here my text here my text here my text here. </div>
<div id="content">my text here my text here my text here my text here my text here
my text here my text here my text here my text here my text here my text here my text
here my text here my text here my text here</div>
</div>
<div class="clear"></div>
<div id="bottom">Copyright © MySite.com<br />My footer text here My footer text here
My footer text here My footer text here My footer text here My footer text here
My footer text here My footer text here My footer text here </div>
</div>
</center>
</BODY>
</HTML>
Our sample output will look like this:
Posted on September 1, 2008, Filled under HTML & CSS, Bookmark it
Greetings,
This article is about creating a form without using any tables, which can be easily customized and used in your own site. Let’s start creating the necessary files: tableless_form.html & style.css. You can choose between two structures: one using DIVs & another one using labels.
Step 1: Creating the CSS file
We will create and place the CSS file in the same folder where the tableless_form.html file is located. Here’s the file’s content:
First Method (with DIVs)
html, body
{
padding: 0;
border: 0px none;
}
/* Let's add some style to our fieldset & legend */
fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}
fieldset legend
{
border: 1px #1a6f93 solid;
color: black;
font-family: Verdana;
font-weight: none;
font-size: 13px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 3px;
}
/* Main DIV */
.m
{
width: 560px;
padding: 20px;
height: auto;
}
/* Left DIV */
.l
{
width: 140px;
margin: 0px;
padding: 0px;
float: left;
text-align: right;
}
/* Right DIV */
.r
{
width: 300px;
margin: 0px;
padding: 0px;
float: right;
text-align: left;
}
.a
{
clear: both;
width: 470px;
padding: 10px;
}
Second method (With Labels)
HTML, BODY
{
padding: 0;
border: 0px none;
}
/* Let's add some style to our fieldset & legend */
fieldset
{
-moz-border-radius: 7px;
border: 1px #dddddd solid;
padding: 10px;
width: 550px;
margin-top: 10px;
}
fieldset legend
{
border: 1px #1a6f93 solid;
color: black;
font-family: Verdana;
font-weight: none;
font-size: 13px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 3px;
}
/* Label */
label
{
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: left;
}
/* Input, Textarea */
input, textarea
{
margin: 5px;
padding: 0px;
float: left;
}
/* BR */
br
{
clear: left;
}
Read more from this entry…
