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</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<ul id=”navigation”>
<li><a href=”index.html”>Home</li>
<li><a href=”#”>About Us</li>
<li><a href=”#”>Gallery</li>
<li><a href=”#”>Contact Us</li>
</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.
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
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 <ul tag> 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.
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.
How to Create Navigation with CSS
Geen opmerkingen:
Een reactie posten