Solved

css navigation

Posted on 2014-04-05
10
361 Views
Last Modified: 2014-04-16
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
Comment
Question by:leblanc
  • 7
  • 2
10 Comments
 
LVL 13

Accepted Solution

by:
duncanb7 earned 500 total points
ID: 39980194
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
 
LVL 1

Author Comment

by:leblanc
ID: 39980275
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 39980278
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 13

Expert Comment

by:duncanb7
ID: 39980284
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
 
LVL 1

Author Comment

by:leblanc
ID: 39980324
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
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 500 total points
ID: 39980333
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
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 500 total points
ID: 39980339
0
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 500 total points
ID: 39980342
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
 
LVL 13

Expert Comment

by:duncanb7
ID: 40004895
Thanks for your pt

Have a nice day

Duncan
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question