Solved

css navigation

Posted on 2014-04-05
10
280 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
 
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now