• Locked
1 reply [Last post]
Wed, 2016-05-04 03:45
jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 3 years 14 weeks ago
Timezone: GMT-8
Joined: 2014-05-27
Posts: 8
Points: 15

Hello everyone,

Hello everyone,

I am trying to make a navigation bar. I want the buttons to be image hyperlinks that change opacity on hover and click. This is how I am doing it:

<style>
	.jw-button a:link,
	.jw-button a:visited
	{
		border: 2px dotted orange;	
		opacity: 0.6;
		overflow: hidden;
	}
 
	.jw-button a:hover,
	.jw-button a:active
	{
		border: 2px dotted yellow;	
		text-decoration: none; /* to remove the little line */
		opacity: 0.95;
		overflow: hidden;
	}
</style>
 
<body>
 
	<div class="jw-button"> 
 
		<a href="http://www.jasonwangart.com/p/spreads.html">
		<img src="https://1.bp.blogspot.com/-s92F8qjBMsg/VylLTxoeBLI/AAAAAAAABN8/h5nPS8xOxyQE2PSqyNYynPCMhCzxt8OkwCK4B/s400/20160503%2B-%2Bbuttons-02.png"
		alt="illustrations" width=auto height="25px" />
		</a>
 
		<a href="http://www.jasonwangart.com/p/tutorials_2.html">
		<img src="https://1.bp.blogspot.com/-xAWLlsmJLjA/VylLT3LuO-I/AAAAAAAABOU/6N04uTBi69MvWJtOqPVr5ZvHyKYhV-eKwCK4B/s400/20160503%2B-%2Bbuttons-03.png"
		alt="tutorials" width=auto height="25px" />
		</a>
 
		<a href="http://www.jasonwangart.com/p/references_3.html">
		<img src="https://2.bp.blogspot.com/-iGP0rlCRJBQ/VylLT61jNxI/AAAAAAAABOQ/oPp61KLO6LgZuSFGLjpWF5JTxto6yqVSQCK4B/s320/20160503%2B-%2Bbuttons-04.png"
		alt="references" width=auto height="25px" />
		</a>
 
		<a href="http://www.jasonwangart.com/p/contact.html">
		<img src="https://4.bp.blogspot.com/-FJQ2uySI0f0/VylLTxelv9I/AAAAAAAABOY/FjS6c-OOc2Q1hdNhVL_-yBUGvCsX9g10gCK4B/s400/20160503%2B-%2Bbuttons-05.png"
		alt="contact" width=auto height="25px" />
		</a>
 
		&nbsp &nbsp &nbsp &nbsp 
 
		<a href="http://www.facebook.com/jasonwangart">
		<img src="http://2.bp.blogspot.com/-GLgaU-VPshc/U4N08qWLn1I/AAAAAAAAAZ8/--FxtOA2W8g/s1600/LOGO+facebook+50+c.png"
		alt="facebook" width="30px" height="30px" />
		</a>
 
		<a href="http://instagram.com/jasonwangart/">
		<img src="http://3.bp.blogspot.com/-Bip-5XKJURo/VSQhElKMGkI/AAAAAAAAA38/RM3xUkaQWUM/s1600/LOGO%2Binstagram%2Bsimple%2B72%2Bc.png"
		alt="instagram" width="30px" height="30px" />
		</a>
	</div>
 
</body>

However, as you can see the results at: www.jasonwangart.com , the resulting divs (at top of page navigation bar, in the orange dotted lines) that contain the image hyperlinks do not expand to fit the image hyperlinks. I have put "display: inline-block;" in the code, but the divs still are not expanding.

Do you know why this is?

Thank you,

Jason

Top
Tags:
Wed, 2016-05-04 05:06
#1
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 44 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Hi Jasonxweb, instead of

Hi Jasonxweb,

instead of adding the css code to .jw-button a:link
try adding the following code to a img

So border: 3px dotted orange; should be added to a img instead of .jw-button a:link

Maybe even better to give these img a certain class so not all img's are having dotted borders around them.

Check Maximum Webdesign for your online solutions

Top
  • Locked