jasonxweb Posted May 4, 2016 Share Posted May 4, 2016 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 More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 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 More sharing options...
jasonxweb Posted May 4, 2016 Author Share Posted May 4, 2016 (edited) 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 May 4, 2016 by jasonxweb Link to comment Share on other sites More sharing options...
dsonesuk Posted May 4, 2016 Share Posted May 4, 2016 (edited) 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 May 4, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
jasonxweb Posted May 4, 2016 Author Share Posted May 4, 2016 Thank you Dsonesuk! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now