?
Solved

css navigation

Posted on 2014-04-05
10
Medium Priority
?
580 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 2000 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
Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

 
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 2000 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 2000 total points
ID: 39980339
0
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 2000 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

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!

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 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