Light Colored Navbar Images

Pixabella

  • RSS Feed
  • Login
  • Home
  • Templates
  • Free Stuff
  • Privacy
  • Contact

Wednesday, December 26. 2007

Light Colored Navbar Images

Light Colored Navbar Images
Light Navbar Images
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.
in Free Stuff   Comments (0)

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments

    No comments

Add Comment

E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

 
 
 
 

Additional Sites

Categories

  • Blog
  • Cartoons
  • Favourite Music
  • Free Stuff
  • Free Templates
  • Gardening
  • HTML and CSS
  • Inkscape
  • Photo Favourites
  • Recipes
  • Travels

All categories

Archives

December 2008
November 2008
October 2008
September 2008
August 2008
Recent...
Older...

I Support Inkscape



Get Inkscape
Open Clip Art Library

Rabbit

© 2006-2008 Pixabella.Design by Pixabella. Valid XHTML, CSS