Jump to content

Divs don't expand to fit in rollover image hyperlinks


jasonxweb

Recommended Posts

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>
 
		        
 
		<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

Link to comment
Share on other sites

You have multiple <!DOCTYPE html> with a closing tag </DOCTYPE html> ? Which should singular within a page, with No closing tag to go with it as shown below.

 

<!DOCTYPE html>
<html>
<head>
<title>single title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- can be multiple links to external stylesheets -->
<link rel="stylesheet" href="to-external-stylesheet.css">

<style>
/* styling withing head tags*/
</style>

</head>
<body>
<!-- Rest of html content placed here -->
</body>
</html>
It would difficult to give a solution to your problem, when such invalid html syntax exists to hinder a possible solution in first place. It would be trying to fix the transmission of car to get it to work, when you can clearly see the engine lying in pieces at the front of the car.
Link to comment
Share on other sites

Hi Dsonesuk,

 

I was able to remove 2 <!DOCTYPE html>'s from my code. When I checked the source code of the home page there is now only one <!DOCTYPE html>. However, my code is inserted into widgets and pages of a Blogger template, and much of the other code is applied by Blogger.

 

Jason

Edited by jasonxweb
Link to comment
Share on other sites

Adding float: left; seems to be a fix when added to anchor links but overflow: hidden; then needs to be added to jw-button div container.

 

Using display: inline-block; also works but then you need to add font-size: 0; to jw-button div container to remove spacing between anchor links the size of current font-size: used, NOTE if you decide to use text again for links, you will need to counteract the font-size:0; of jw-button div container by applying required font-size for the links themselves.

 

Both require using either float: right; or margin or padding to separate last two instagram and facebook icon links from rest.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...