Posts tagged 'tableless'

Tableless 3 (Fluid) Columns Layout

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 &copy; 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:

Tableless 2 (Fluid) Columns Layout

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 &copy; 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:


AJAX Form with CAPTCHA, Realtime Validation and PHP Backend

Create any type of Anti-Spam Forms with AJAX Form Builder

Posted on September 2, 2008, Filled under AJAX, jQuery, PHP,  Bookmark it

This is a professional multi-usage AJAX Form Builder meant to enhance the functionality of your website by providing an interactive user experience for your readers that need to reach you, whether they need to send a feedback, share their opinion regarding your website, fill a survey, leave a testimonial or even make a room reservation online.

Beside the premium AJAX Form, I would like to offer you a short tutorial regarding the creation of a basic AJAX Contact Form. It will give you an idea of how you can create similar web applications using jQuery and AJAX.

The aim of the tutorial is to help you to create a simple (tableless) ajax contact form using AJAX, JQuery & PHP. We will have a HTML page which will contain the form, a CSS file, a php page where the data will be sent and another file where the validation function(s) will be located. JQuery is a new and powerful library which simplifies the way that you write JavaScript.

Step 1 – Creating the configuration file

config.php

<?php
// To
define("WEBMASTER_EMAIL", 'your_name@domain.com');
?>

Here you should fill the e-mail address where you wish to receive the mail as well as the address where you wish to receive the replies (usually the same).

Step 2 – Creating the css file

style.css

/*
Credits: Bit Repository
CSS Library: http://www.bitrepository.com/
*/

html, body  { padding: 0; border: 0px none; }

.notification_error
{
border: 1px solid #A25965;
height: auto;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}

.notification_ok
{
border: 1px #567397 solid;
height: auto;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}

.info_fieldset { -moz-border-radius: 7px; border: 1px #dddddd solid; }

.info_fieldset legend
{
border: 1px #dddddd solid;
color: black; 

font: 13px Verdana;

padding: 2px 5px 2px 5px;
-moz-border-radius: 3px;
}

.button
{
border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC; 

background: white;

color: #333333; 

font: 11px Verdana, Helvetica, Arial, sans-serif;

-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;

border: 1px solid #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC; 

color: #333333; 

font: 11px Verdana, Helvetica, Arial, sans-serif;

-moz-border-radius: 3px;
}

/* BR */

br { clear: left; }

Read more from this entry…

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…