This is the third in the set of colorful gradient navbar images (
Download Zipfile), all of which have been designed to work with my Pixabella05 template.
Adding these to your website is very simple if you already have a navbar, and if you don't, then simply copy the code from Pixabella05. If you don't know much about HTML and CSS, make sure you also read creating a
simple HTML webpage that I wrote for beginners. This is the exact HTML code needed. Read my
tutorial on how to use these images.
<div id="navigation">
<div id="navbar_link">
<ul>
<li class="currentpage"><a href='#'>Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">My Flickr</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
To make this HTML code work, you also need to add the following CSS to your stylesheet.
#navigation {
width: 960px;
background: url(img/nav_ltblue.png) top center repeat-x;
height: 31px;
border-top: ##58b2eb solid 1px;
margin-bottom: 20px;}
#navbar_link {
height: 30px;
float: left; }
#navigation #navbar_link ul {
float: left;
height:30px;
width: 100%;
list-style-type: none; }
#navigation #navbar_link ul li {
display: inline; }
#navigation #navbar_link ul li a {
padding: 6px 15px;
color: #fff;
text-decoration: none;
line-height: 1.6em;
float: left;
border-right: 1px solid #0c5684;
text-decoration: none;
font-size: 1.0em;
font-weight: bold; }
#navigation #navbar_link a:hover {
text-decoration: none;
border-right: 1px solid #0c5684;
color: #fff;
background: #ddd url(img/nav_ltblue.png) center -33px repeat-x; }
.currentpage a {background: #ddd url(img/nav_ltblue.png) center -33px repeat-x; }
You'll probably need to change the colors of the borders in the CSS above, and will definitely need to change the name of the navbar image, and if you get stuck, feel free to comment below, or even if you have any suggestions for other users that you think might help.
