• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 739
  • Last Modified:

css navigation

Is there a tutorial on how to style the button like the pic below?

nav
I did some research around and I don't see any tutorial where they have the buttons as a jpg file. Also, the button changes color based on the current page so you know where you are. Thx
0
leblanc
Asked:
leblanc
  • 7
  • 2
4 Solutions
 
duncanb7Commented:
Please take a look at item 05 and 06  of  30 in following link  and click "tutorial link" for the detail under each item.
http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and-buttons-tutorial/

Hope understand your question completely.If not , please pt it out

Duncan
0
 
leblancAccountingAuthor Commented:
I have the tab images and I want to use them for my navigation. I think the tutorial 8 from Duncan link is that I am looking for. But I cannot make it work properly with my buttons for some reason.
0
 
duncanb7Commented:
background:url(navshadow.gif) no-repeat 8px 100% #fff;

just put correct or full path location of image . for example,
/home/youlogin/public_html/image/yourbutton.jpg if you don't
short path writing on javascript

OR write more your question in detail

Duncan
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
duncanb7Commented:
You can test it whether you can get exact image path, for example

on Browser like FF or chrome, type

http://mysite.com/public_html/image/button.jpg 

If you see the image on your browser that  mean the path is correct
just put it the css file

if have time, know more about meaning of short path writing , for example

../image/button.jpg
/image/button.jpg
./imaage/button.jpg
../../image/button.jpg


Duncan
0
 
leblancAccountingAuthor Commented:
The buttons size does not display what I have (see below). My pic buttons are real size.
pic
html:
<ul id="nav1">
  <li><a href="index.html">Start / Images</a></li>
  <li class="cur"><strong>The HTML</strong></li>
  <li><a href="step2.html">The CSS</a></li>
  <li><a href="step3.html">The JavaScript</a></li>
  <li><a href="step4.html">That's all</a></li>
</ul>

Open in new window


css:
#nav1{
  clear:both;
  font-weight:bold;
  color:#666;
  margin-left:4px;
  float:left;
  list-style-type:none;	
  background:url(images/blue_bar.jpg) no-repeat 8px 100% #fff;
  padding-bottom:10px;
}

#nav1 li{
  list-style-type:none;
  float:left;
  margin:0 0 0 4px;
  padding:0 0 0 10px ;
  border-bottom:1px solid #999;
  background:url(images/button_down.jpg) #c0c0c0 top left no-repeat;
}
#nav1 li a{
  color:#666;	
  background:url(images/button_down.jpg) transparent top right no-repeat;
  display:block;
  padding:0 10px 0 0;
}
#nav li.cur,
#nav li.over,
#nav li:hover
{
  background:url(images/button_up.jpg) #3375b2 top left no-repeat;
  border-bottom:1px solid #036;
}
#nav li strong,
ul#nav li.cur a,
ul#nav li.over a,
ul#nav li:hover a
{
  display:block;
  color:#fff;
  padding:0 10px 0 0;
  text-decoration:none;
  background:url(images/button_up.jpg) transparent top right no-repeat;
}

Open in new window

0
 
duncanb7Commented:
http://www.w3schools.com/cssref/pr_background-position.asp

you can set the image position in x% y%
Please be reminded ,just look at
your image /image/button.jgp on browser first and adjust its x y position
if that is okay, that is same as you can see in your menu

Duncan
0
 
duncanb7Commented:
0
 
duncanb7Commented:
be reminded

set % or px in x or y that is different, just search background-position CSS in google
you will know more

Duncan
0
 
duncanb7Commented:
Thanks for your pt

Have a nice day

Duncan
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now