Tech Mug » html

CSS Navigation for Beginners

smsinns — Sat, 27 Nov 2010 10:03:11 +0000

CSS Navigation for Beginners

This is the tutorial for anyone who wants to begin with developing CSS Navigation. I describe the development of CSS navigation/menu in simple and quick steps. This solution of CSS Navigation has some curve designs and it is flexible enough to increase or decrease its width according to the link text.

This tutorial first defines the HTML structure to be used and then we move forward to format our HTML structure with the CSS.

HTML

Our CSS navigation will be based on following HTML structure.

Code



    
    
        
            Home
            Abouts Us
            Portfolio
            Clients
            Contact Us

CSS

This is the cream of our navigation. The whole interface of our navigation is controlled via below code. I’ve explained all the code step by step.

Code

.header {
background:url(../images/nav-bg.png) top left repeat-x;
overflow:hidden;
}
.nav {
font-size:18px;
text-transform:uppercase;
margin:0 auto;
width:540px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#FFFFFF;
}
.nav li {
float:left;
padding-left: 20px;
margin-left: -20px;
cursor:pointer;
}
.nav li a {
display:block;
padding:19px 20px 19px 0;
color:#5e5e5e;
background:url(../images/header-nav-bg.png) top right no-repeat;
text-decoration:none;
}
.nav li:hover {
background:url(../images/header-nav-bg-left-hover.png) top left no-repeat;
}

.nav li:hover a {
background:url(../images/header-nav-bg-right-hover.png) top right no-repeat;
color:#FFF;
}

Step 1

We start off with .header class. Repeat 1px image on x-axis for background of Header Div. Note the use of overflow: hidden, it displays the background image correctly.

Step 2

Next we apply some formatting to our .nav class. This is the container DIV for our navigation. We have used margin:0 auto to align our navigation in center.

Step 3

Finally we come to format the core of our navigation, yeah! it is the unordered list. Float li to left, set its padding and margin-left in (-ve) as per design. If you do not set margin-left in (-ve), it will look something like this (Note the white gap between two elements):

Setting up the margin-left in (-ve) brings the perfect look:

Set li cursor to pointer so user does not feel any differece in anchor tag and li.

Step 4

At this step we set anchor tag in li as block element, fix its padding, color, decoration style (Link style). We also use below image for as li background image.

Step 5

We want to change the background image of li when user mouse over on it. So, we set below image on li background on the hover state:

Step 6

In the end we set below image as the background image of our links on hover state. Since all he links are under li tag, we use .nav li:hover a to format the links.

Note the width of above image, it is probably much bigger than your link text, but using this technique automatically adjusts the link’s background area. And you no need to worry about the occurrence of any white space between your navigation’s elements.

CSS Navigation for Beginners

Final Words

Finally, we have completed our one of the complex looking Navigation/menu in just less than 30 minutes…Cheers! Your comments and suggestions will be highly appreciated in improving this article.

About Author

I am Shahzaib, new writer here but I’ve been commenting on Techmug on few articles. Professionally Im UI/UX developer.

Detect Javascript and Flash Enabled

Fraz Ahmed — Wed, 06 Jan 2010 18:56:07 +0000

Javascript and Flash are super tools to enhance the usability of your website. You put a lot of efforts to create beautiful form validation and an attractive flash animation. But all the efforts are ruined when the visitor of your website has disabled Javascript or does not have flash plugin installed. Here I’ll provide you a little solution to escape from this problem.

First Tactic – Detect Javascript Enabled

Our first step is to detect whether visitor has Javascript enabled or not. If Javascript is not enable, we will redirect user to an error/instruction page (I create a seperate page where I give instructions to visitor that how to enable Javascript in his/her browser).

Put below code just after the tag in your web page:

Above code is executed if Javascript is disabled and redirect user to error-javascript.php. We are using tag for redirection. If Javascript is not disabled, above code will not be executed.

Second Tactic- Detect Flash Plugin Installed

There is a Javascript solution to detect Flash Plugin Installed and replace Flash animation with your custom message. In order to accomplish the said task you need to place below Javascript instead of your normal embedded code:

Above code detect for Version 9 or greater version of flash plugin. If flash plugin is detected it displays flash animation (animation.swf) else it displays an image (replaced-image.png) instead of flash animation. In the place of image you can write more text and instructions. Everything is upto on you.

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

Send Emails / Newsletters using HTML templates and PHP

Fraz Ahmed — Tue, 22 Sep 2009 17:44:44 +0000

HTML emails look attractive, provide easy calls of action. And importantly creates your brand image in the eyes of your clients. But it becomes very difficult to manage your HTML emails if you want to change the look and feel of your email design. Or you may be interested in changing the content of your HTML email without playing with your code.

In this tutorial we will be sending HTML emails using PHP. This tutorial will teach you to keep your HTML presentation separate from your PHP code.

How it works?

Basically there are only three steps to send your branded HTML emails.

Read HTML template file from your specified location.
Replace variables with your data, if any.
Finally send email.

What we need?

Before we move to define the above steps, its worth to mention the requirements of this tutorial. The first thing we need to send emails is PHPMailer class. To learn more about PHPMailer class please visit the official website here. And the last other thing is your HTML template file.

Step by step learning

Here are the steps you need to take in order to develop your own email sending program.

First of all you need to include the PHPMailer class in your code. To do so you use below code:

Before moving further I would like to introduce two PHP functions we will use in our code. First one is for sending emails and second is for reading your HTML template file. First function (sendEmail) accepts five parameters and return false if email is not sent and returns true if email is sent. Parameters are self explanatory in below code:

FromName = $fromName;
$mail->From = $fromEmail;
$mail->AddAddress("$toEmail");

$mail->Subject = $subject;
$mail->Body = $emailBody;
$mail->isHTML(true);
$mail->WordWrap = 150;

if(!$mail->Send()) {
return false;
} else {
return true;
}
}
?>

The other function (readTemplateFile) reads your HTML template file and returns all the stuff found in that file. This function accepts only one parameter which is the location of your HTML file. Below is function:

Finally you need to call and pass parameters to above function to complete the task of sending HTML email. Yeah! really we almost done it. Ok we are using a template which send username and password of a user. Please see HTML template file in downloaded file. We break our last and final step in three pieces:

First of all we put data into some variables. These variables will be used later in our code. Ideally this data will be fetched from database in real world.

Now we put our HTML template data into other variable:

So we have all our file data in a variable ($emailBody). And we may change anything in this variable. We will use PHP’s str_replace function to replace the data:

To understand the above code we take first line of code. It simply replace #name# with the value of $NameOfuser variable in $emailBody variable. And now our new replaced content is stored in $emailBody variable, so now we can use this content to be passed in our email sending function below:

If email is not sent successfully, we will display error message else we will show success message:

That’s all! Now you have fully functional code to send your branded emails. If in future you want to change the design of your email, you just have to replace HTML template file. There is no need of changing your PHP code. Ideally you can use this code to send:

Newsletters
Registration Details
Forgot Password email
And for anything you want

Besides the benefits of using above code there is one shortcoming too of this code. If your user’s email client does not support HTML email, he/she will not be able to see your fancy deigned email. But there are ways to prevent this shortcoming.

Hope so you enjoyed this tutorial. Please feel free to ask or comment for this tutorial. And Don’t forget to share the post on your favorite website. It may also help someone somewhere

Send your newsletters using HTML templates and PHP