Aug 02

How to Create Navigation with CSS

Sat, 08/02/2014 - 16:41 — julie

Navigation is one of the most important parts of any website. Poor navigation can lead to user abandonment and if your website is something that makes you money, that translates into lost income. Follow the steps provided in this tutorial to create basic navigation with CSS. If you are looking to create a navigation drop-down menu with CSS, HTML and Jquery then please see our drop down menu tutorial.

Steps to create navigation with CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:

<html>
<head>
<title>CSS tutorial – 9
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
head>
<body>
<ul id=”navigation”>
<li>Homeli>
<li>
About Usli>
<li>
Galleryli>
<li>
Contact Usli>
ul>
body>
html>

And then save the file as .html (eg: tut9.html).

Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
<ul> tag is used to create list item and <li> lists each item

We have used ‘id’ because we don’t want all list item in the webpage to change. We only want to change navigation for now.

step-1-create-html-navigation

2. Next, in the same directory (folder), create another folder named css and create new css file named as style.css. To do that, open notepad and save it as style.css

step-2-create-css-navigation

3. Next, open the file style.css and type following code:

#nav{
list-style: none;
}

#nav li{
margin-right:5px;
width:200px;
text-align:center;
float:left;
background:#c0c0c0;
}

Here,

list-style: none; will remove the default list style i.e bullet wise listing. We have used this is nav which is used in main

    > so it changes the whole list.

    margin-right:5px; will set margin on right side with 5 px.
    width:200px; is the width of the list item
    text-align:center; will center the text in each block.
    float:left; will help to float text horizontally. If we don’t use this then text will float vertically.
    background:#c0c0c0; will set a background on each list item.

    step-3-type-css-navigation

    This completes our tutorial on how to create navigation with CSS.

     

    The post How to Create Navigation with CSS appeared first on Web Design Blog | Magazine for Designers.

    Copyright 2009. E-mail Me
    Auto Spare Parts