Dareus Posted June 24, 2009 Share Posted June 24, 2009 I'll put the css code with the html. It is very small as I'm trying something out.Basically I am trying to figure out why this doesnt work.I have it so basically it shows a Home button, On hover it shows a 40% opaced, home button with a line leading towards the main page, (almost like the look of a thought bubble), then once clicked on, it becoms a solid not the opaced version.The site can be seen at www.conceptmontreal.com/home/home.htmlThe image is that large, but this is all a test right now, I'm working on some ideas and a background etc, <style type="text/css"><!--body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 1.3em; color: #FFF; text-decoration: none; background-color: #030; margin: auto; width: 900px;}.headertoprow { background-image: url(../pics/logomain1.png); background-repeat: no-repeat; height: 60px; text-indent: -9999px; background-position: 10px;}.linkrow { white-space: nowrap; margin: auto;}.linkrow li { display: inline;}a.home:link { text-indent: -9999px; background-image: url(../pics/homebefore.png); }a.home:hover { background-image: url(../pics/homehover.png); }a.home:active { background-image: url(../pics/homecurrent.png); }--></style></head><body><div class="headertoprow"><h1>Concept Montreal</h1></div><div> <img src="../pics/homeheader.jpg" width="900" height="250" alt="through simplicity results are acheived logo" /></div><div class="linkrowheader"> <ul class="linkrow"> <li class="home"><a href="" class="home"><img src="../pics/homebefore.png" />Home</a></li> <li>Portfolio</li> <li>SEO</li> <li>FAQ</li> <li>Fee's</li> <li>Contact Us</li> </ul></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2009 Share Posted June 24, 2009 You might want to add a.home { display: inline-block; width: 100px; height: 40px;} Making width and height the actual proportions of the image you're using.Also, if the image to load is large, you'll have to wait a few with the mouse over the button to make it appear. Link to comment Share on other sites More sharing options...
Dareus Posted June 25, 2009 Author Share Posted June 25, 2009 Thanks again Forgot to put the image width and height.Also I am going to go with a method I seen an example on where they make the rollovers all one image, and as you roll over it say goes -xx px and you make the span text hidden.Working on it lol Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.