Jump to content
jasonxweb

Divs don't expand to fit in rollover image hyperlinks

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...