PC Hacks: >> How To Create Simple Horizontal Navigation Bar From CSS >> How To Write Your First PHP Script

How To Create Simple Horizontal Navigation Bar From CSS

Posted: 10 Sep 2010 05:51 AM PDT

Though there are lots of tutorial about Horizontal listings, I founds lots of beginners having problem in understanding the mess of extra CSS codes added in it. There are several methods to achieve horizontal navigations.

One of them can be simply achieved by placing the sequence of links in a single line and styling it with CSS. Let’s see how to do this.

First of all, lets create a simple links arranged in a same horizontal line.

Home

About us

Portfolio

Contact us

Now when you save and load it in browser, it will look similar to the image below:

If you are satisfied with just these links in single line, then it is ok you can end the tutorial right here. Else if you want the horizontal navigation links like in Hackspc.com, you’ll have to follow up to the end of this tutorial.

We cannot easily create background effect in without using CSS. So, we’ll need to style it with proper CSS.

Now let’s apply some CSS to the link. But before applying any CSS to the tag, you must note that it must be specific to the horizontal links only. Otherwise, your other content links will also look same as the navigation links. So, let’s make it unique by keeping it inside a div with id menu.

Home

About us

Portfolio

Contact us

Now we’ll define the compound CSS to so that the CSS style only applies to the link inside the MENU id.

Here is the simple CSS:

#MENU A {

Display:block;

Float:left;

Padding: 0 10px;

Background:#CCCCCC;

}

Now the above CSS will be applied to all the tags inside

. By default, tag is a inline tag that doesn’t makes extra spaces, in simple terms it is an object without a box. While blocks are the one which contains four sides, in simple terms it is an object inside a box.

Since, is not a block, we’ll have to manually make it block, this can be done by using display:block; property. Generally, block occupies full width that they can reach up to. So, whenever we create block, it takes whole width. Look at the image below.

In the above image, you can see that how blocks behaved by occupying the full width. Since, it appeared in different lines, it is not according to our interest. We want all these to appear in same line.

We’ll use CSS floats to appear it in same line. We’ll float these blocks to left. And this is what we have after applying floats.

You can see that, though it appeared in single line this time, it is not what we wanted. The clumsy appearance of the navigation links in the above image looks like it is the single image. We won’t press SPACE key to give some white space here. We’ll be using padding to left and right side to give a little bit space to it.

Let’s set padding of 10 pixels on both sides,

Padding: 0 10px;

We’ll get following results after padding.

Whoa! Finally it appeared in same line. But you might not find any good remarkable difference here with the first image of this tutorial.

At least, we’ve kept it in a box we can apply any CSS effect to it.

Let’s play with the background and border, remove underline and change link color to white,

background:#ccc;

border-left:1px solid #000;

text-decoration:none;

color:#fff;

This will be the result:

Now let’s apply some hover effect to it. To do so, we again have to specify the compound CSS to the links and add pseudo class, :hover to it.

#MENU A:hover {

Background:#00CCFF;

}

Simply we changed the background color to hex value #00CCFF. Now whenever the mouse is hovered the link box will be highlighted with a color.

The final CSS will look like this:

.MENU A {

display:block;

float:left;

padding:0 20px;

background:#ccc;

border-right:1px solid #000;

text-decoration:none;

color:#fff;

}

.MENU A:hover {

background:#0CF;

}

In next tutorial, we’ll see how we can use this method to lists. Till then stay tuned and bookmark us.

How To Write Your First PHP Script

Posted: 10 Sep 2010 05:26 AM PDT

You want to learn how to write PHP scripts but don’t know where to start from? In this tutorial I’ll show you all what you’ll need to write your first PHP script. It is a lot easier to get started with than you might think.

Why Use PHP?

PHP is a powerful tool for making dynamic and interactive Web pages.. By learning just a few simple functions, you are able to do a lot of things with your website. And once you know the basics, there are a wealth of scripts available on the internet that you only need to tweak a little to fit your needs

What you’ll need?

To start writing PHP scripts, you need access to a Web server running PHP.There are 2 options: to run php script on you web host or to run PHP script on your own computer .I recommend you second option to run PHP scripts locally, download XAMP and notepad++.

Run php script on you web host, if you have already your web host just upload php scripts on web server via FTP or file manager, if not then check this link Best Free Web Hosting, there you’ll find list of the best free web hosting, by my opinion. I recommend 000WebHost , all you need to do is register and you are ready to write you php scripts. The advantage of this approach is that you don’t have to install anything; the disadvantage is that it’s slower to write and test your script
Run PHP script on your own computer. There are many way to run php scripts locally , by my opinion the easiest way is to install a complete package like XAMPP. XAMPP is a great piece of software for a development machine, I highly recommend it. Be sure to have not start up when Windows starts, you can always turn it on manually when you need it. Here are detailed instruction How To Install XAMPP
Download text editor. To write PHP code you’ll need text editor, I recommend to download Notepad++ , here is download link