Solved

css navigation

Posted on 2014-04-05
10
406 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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!

 
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP Web Development 6 63
Regular Expression needed 4 38
Need help with FaceBook login 2 39
Add Rows on a Table 8 47
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

738 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