Navigation Bar's Clickable Area, Bigger and Wider

If you have noticed that my navigation bar is changed and a little bit wider and bigger, i made the clickable area a little bit bigger because i like the entire navigation space clickable and not just the text of the link.

I learned that this is actually simple to achieve. With the use of simple unstyled navigation and CSS you will have a that good looking navigation bar. Here's how to do it:

Where to Start?
Let's start with simple navigation menu

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Next...lets add the CSS (This is Horizontal) to add style and make it look good.

If you add this CSS the text remains the only clickable area therefore we will just add the display property to the <li> to command the html of how they should behave or displayed in your site.

This are the code we need to add to complete the process.
display: block; --- this is to fill the entire area
padding: 10px 20px; --- This is to determine the size of the clickable area.

We also need to add html <div> tag in our navigation menu to format
just one section and not cover all links.

Add this to your navigation menu
<div id="navlink"> and close </div> below the menu: Here's what it look like now!

<div id="navlink">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Now here's the final CSS Code:

#navlink ul {
list-style-type: none;
overflow: auto;
padding: 0;
margin: 0;
}
#navlink ul li {
float: left;
border: 1px solid #333;
border-bottom: none;
margin: 0 5px;
}
#navlink ul li a {
display: block;
padding: 10px 20px;
text-decoration: none;
}
* html ul li a { /* this is to fix IE bug */
width: 1%;
}

#navlink ul li a:hover {
text-decoration: underline;
background: #000;
}

Then save.

I hope you find this easy to follow and learn something new.

Please let me know if you done it!

CSS Sites to Visit

If you are thinking of learning or even want to understand CSS i have listed a list of sites i love to read and visit every now and then. You will find a very helpful tutorials.
In no particular order here they are:

1. W3Schools - Here's where i started learning and understanding the CSS, HTML and all the technical word and tutorials. Still a use for some of Successful Website designers.
2. 456 Berea Street - Demo of one of Roger Johansson tutorial. You can find a lot of useful tutorial easy and help you understand CSS.
3. Smashing Magazines - Not just Freebies, Graphics, showcases but tutorials and CSS can be found her. I love reading this site so much to learn, actually so much to get.
4. Web designer Wall - Love the design of the site, but i love the tutorials aswell. You will not get bored in this site.
5. Eric Meyer - Try this one, simple explanation and easy to follow tutorials.
6. CSS Discuss Wiki - Discussions about CSS, techniques for page-layout and more...
7. Stop Design - this is a creative outlet of Douglas Bowman.
8. CSS beauty - News, Job, Community, Tutorials and books and more there so much to learn about CSS here.
9. CSS Tutorial- This is full of tutorials that are easy and really good place to begin with.
10. Echoecho - I like this site, you can follow the tutorials.

I hope you find this all useful, even though you think you don;t have the skills but when you blog, it is important to understand them aswell. To those bloggers who love to tweak and play with thier templates i am sure you will enjoy visiting this sites.