Create a simple AJAX based contact form

Let’s return to Web Development Category and create a Simple Contact Form™! But, just to make things interesting we’ll submit the form using AJAX, so the user gets the feedback without the page refresh. Also, let’s log the User Input into Database for later reviewing.

Here’s a screenshot of our form:


Few quick CSS tips for easy summer reading

Finally the time has come for another Blog entry, cool and breezy, just right for the summer time. We’re going to do some XHTML/CSS Tips and Tricks you may or may not know. Either way it’ll be quick and simple post, just long enough for you to do the coding while enjoying a nice cold beer. :)

1.1. Simple separator using borders

Probably the most used border trick which creates a simple, nice looking content separator for us. HTML:

<div style="padding: 20px; background-color: #6d6e6d;">
    <div class="separator"> </div>

CSS is very simple, goes like this:

.separator {
    font-size: 0;
    line-height: 0;
    border-top: 1px #1f1f1f solid;
    border-bottom: 1px #c5c5c5 solid;

The code gives us a nice looking simple separator for our content:

All that is left to do is to play with border colors for the desider effect (and adjust margins as needed).

1.2. Fast „double border” trick

Two borders on a image using only img tag and no extra div:

<div style="padding: 20px; background-color: #6d6e6d;">
    <img src="golf.jpg" class="double-border" width="600" height="279" alt="Sveti Martin, golf, hotel and wellness" />

The CSS:

.double-border {
    border: 2px solid #595959;
    padding: 1px;
    background-color: #000000;

It’s really very simple. We use the padding and background color to add the extra black border. Together with the background div this gives us nice results: