Asked by leblanc
at 2024-04-05 08:36:38
Point:500 Replies:10 POST_ID:828908USER_ID:11810
Topic:
Cascading Style Sheets (CSS);Hypertext Markup Language (HTML);Miscellaneous Web Development
Is there a tutorial on how to style the button like the pic below?
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
Expert: duncanb7 replied at 2024-04-16 11:49:54
Thanks for your pt
Have a nice day
Duncan
Have a nice day
Duncan
Expert: Scott Fell (padas) replied at 2024-04-05 12:02:36
Link only answers deleted.
You can include links as support, but your answers should stand on their own. Additionally, you may not link to other Q/A sites. You can read our full policy in the help section. http://support.experts-exchange.com/customer/portal/articles/1162518
padas
Topic Advisor
You can include links as support, but your answers should stand on their own. Additionally, you may not link to other Q/A sites. You can read our full policy in the help section. http://support.experts-exchange.com/customer/portal/articles/1162518
padas
Topic Advisor
Assisted Solution
Expert: duncanb7 replied at 2024-04-05 11:00:38
125 points EXCELLENT
be reminded
set % or px in x or y that is different, just search background-position CSS in google
you will know more
Duncan
set % or px in x or y that is different, just search background-position CSS in google
you will know more
Duncan
Assisted Solution
Expert: duncanb7 replied at 2024-04-05 10:58:14
125 points EXCELLENT
http://w3schools.sins-realm.com/css/tryit.asp@filename=trycss_background-position_pixel.htm
you can set +ve or -ve in x or y position
Duncan
you can set +ve or -ve in x or y position
Duncan
Assisted Solution
Expert: duncanb7 replied at 2024-04-05 10:55:42
125 points EXCELLENT
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
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
Author: leblanc replied at 2024-04-05 10:47:40
The buttons size does not display what I have (see below). My pic buttons are real size.
html:
css:
Expert: duncanb7 replied at 2024-04-05 10:18:38
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
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
Expert: duncanb7 replied at 2024-04-05 10:14:12
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
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
Author: leblanc replied at 2024-04-05 10:07:50
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.
Accepted Solution
Expert: duncanb7 replied at 2024-04-05 08:48:00
125 points EXCELLENT
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
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
