Tag: navigation

Indications of a Robust Blog Design

In a blog, so many factors come together to form a unique material and the design is one of the major factor. Another major factor in this scenario is the content of the blog. Design of a blog is a major one because it gives the first look, the first expression. And first impression is all you need to attract visitors. The attractive design will take the reader to notice the content and other elements of the page and your work there will be done. So today I have brought you 10 important traits and qualities that make a great blog design. These are not the only ones but these are certainly the most robust ones and you can benefit from them. Easy Readability: When you look at a website, you look at its readability; whether the web page is easily readable, whether it requires zooming in or narrowing your eyes for a better vision. The later ones are a turn off for a reader. What you have to make sure is that the contrast between the background and the text should be in a balance so that it’s easily readable. The text should be pleasant to read and it can come from providing sufficient spacing between lines and paragraphs so that the ext doesn’t jumble up at any point. Though it is not a difficulty for readers to...

Read More

Vertical Navbar using UL LI

After making Horizontal Navigation bar, I’ve made Vertical Navigation bar. I’ve tried to make it in detail, so that if you need to make a long Navigation bar so this tutorial will cover every level in it. [Download source File] 1. First of all take an HTML file and write these codes in <BODY> area: <body> <ul> <li><a href=”http://www.stunningmesh.com”>Home</a> </li> <li><a href=”#”>Tutorials</a> <ul> <li><a href=”http://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a> <ul> <li><a href=”#”>Text Effect</a></li> <li><a href=”#”>Photo Effect</a></li> <li><a href=”#”>Special Effect</a></li> </ul> </li> <li><a href=”http://www.stunningmesh.com/category/tutorials/illustrator”>Illustrator</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/corel-draw”>Corel Draw</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/flash”>Flash</a></li> </ul> </li> <li><a href=”#”>Free Stuff</a> <ul> <li><a href=”http://www.stunningmesh.com/category/free-stuff/wallpapers”>Wallpapers</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/fonts”>Fonts</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/icons-free-stuff”>Icons</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/shapes/”>Shapes</a></li> </ul> </li> <li><a href=”http://www.stunningmesh.com”>Stunning Mesh</a> </li> </ul> </body> 2. Now take CSS file and write these codes in it: ul.nav, .nav ul{ margin: 0; padding: 0; cursor: default; list-style-type: none; } ul.nav{ width: 200px; float: left; margin-right: 1px; } ul.nav a{ color: #FFF; } ul.nav a:hover{ color: #FF0; } ul.nav>li{ margin: 0; color: #FFF; background-color: #900; padding-top: 5px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; font-family: Arial, Helvetica, sans-serif; } ul.nav li>ul>li{ margin: 0; color: #900; background-color: #979700; padding-top: 5px; padding-right: 6px; padding-bottom: 5px; padding-left: 6px; } ul.nav li>ul>li a{ color: #FFF; } ul.nav li>ul>li a:hover{ color: #FF0; } ul.nav li:hover { background-color: #000000; color: #FF0; background-image: url(../images/hover.jpg); } ul.nav li:hover>ul{ display : block; color: #000; } ul.nav li>ul{ display: none; position: absolute; width: 200px; left: 200px; margin-top: -5px; margin-left: 11px; color:...

Read More

Horizontal Navbar using UL LI

Today I’m going to tell you a simple technique, by using this technique you can make Horizontal Navigation Bar in CSS using UL LI. Later I’ll also tell you to make Vertical Navigation Bar. For your convenience I’m also uploading Source Files. [Download source File] 1. You will need two files, one HTML and other CSS. So first of all I’m going to take HTML file. Write these codes in HTML Body area: <body> <center> <div align=”center”> <div id=”navbarMain”> <div> <ul> <li><a href=”http://www.stunningmesh.com”>Home</a></li> </ul> <ul> <li><a href=”#”>Tutorials</a> <ul> <li><a href=”http://www.stunningmesh.com/category/tutorials/photoshop-tutorials”>Photoshop</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/illustrator”>Illustrator</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/corel-draw”>Corel Draw</a></li> <li><a href=”http://www.stunningmesh.com/category/tutorials/flash”>Flash</a></li> </ul> </li> </ul> <ul> <li><a href=”#”>Free Stuff</a> <ul> <li><a href=”http://www.stunningmesh.com/category/free-stuff/wallpapers”>Wallpapers</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/fonts”>Fonts</a></li> <li><a href=”http://www.stunningmesh.com/category/free-stuff/icons-free-stuff”>Icons</a></li> </ul> </li> </ul> <ul> <li><a href=”http://www.stunningmesh.com”>StunningMesh</a></li> </ul> </div> </div> </div> </center> </body> 2. Now take CSS file and write these codes in it: .background { background-color: #CCCCCC; margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .mainNavBar { margin: 0px; padding: 0px; width: 500px; } #navbarMain { background-color: #900; background-attachment: scroll; background-position: 0px 0px; height: 40px; } .menu ul { list-style:none outside none; margin:0; padding:0; } .menu ul li { float:left; position:relative; } .menu ul li a { color:#FFFFFF; display:block; float:left; list-style:none outside none; text-decoration:none; font-family: Arial; font-size: 16px; font-weight: bold; text-align: center; padding: 10px; } .menu ul li a:hover { background-attachment: scroll; background-image: url(../img/hover.jpg); background-position: 0 0; text-align: center; padding-top: 10px; padding-bottom: 10px; color: #FFFFFF;...

Read More