Community Forums 

Main Content

Hover coding

    Oct 03 2014 21:32:55

    #1

    Alive & Well

    Join date : 2008-10-01      Posts : 122

    I have not had success with making the navigation on my site show the hover color on only a few buttons. Can somebody please try to help me get this right?

    My site is yahwehsaliveandwell DOTCOM

    The buttons I am talking about are the green buttons going across the top 1/3 of the screen. Only the View Your Cart hover purple and I would all of them to do this. Any help would be very appreciated.



    Oct 04 2014 08:00:07

    #2

    Geoff

    Join date : 2008-09-18      Posts : 415

    <div><span>&nbsp;&nbsp;&nbsp;</span><span class="about"><a href="http://www.yahwehsaliveandwell.com/pages/merchantiinfo.htm"; class="cartcolor">About Us</a></span>&nbsp;<span class="charts"><a href="http://www.yahwehsaliveandwell.com/pages/charts.htm"; class="cartcolor">Charts & Info</a></span>&nbsp;<span
    class="lifestyle"><a href="http://www.yahwehsaliveandwell.com/pages/lifestyle.htm"; class="cartcolor">Lifestyle Coaching</a></span>&nbsp;<span class="international"><a href="http://www.yahwehsaliveandwell.com/pages/international.htm/"; class="cartcolor">International Orders</a></span>&nbsp;<span class="contact"><a href="http://www.yahwehsaliveandwell.com/contact.htm"; class="cartcolor">Contact Us</a></span>&nbsp;<span class="viewcart"><a href="http://ww3.aitsafe.com/cf/review.cfm?userid=5763948&amp;return=www.yahwehsaliveandwell.com%2Findex.htm"; class="cartcolor">View&nbsp;Your&nbsp;Cart</a></span></div>

    Could I also suggest you either remove or scale down the font size as the nav bar is breaking when viewed on smaller screen sizes than you are probably using.

    .about, .charts, .lifestyle, .international, .contact, .viewcart {
    color: white;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    font-size: 13pt;
    font-family: "Trebuchet MS";
    background-color: #99B280;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    }



    Oct 07 2014 14:36:24

    #3

    Alive & Well

    Join date : 2008-10-01      Posts : 122

    Geoff, thank you for the code and pointers!

    When I put this into my program it defaults to blue text with red alink. I just want to keep the white text and make the hover light purple. So do I need to make a class in my CSS for cart color to be specified as white and cart hover as the light purple?

    As for the point size, if I remove it the navigation bar shrinks and doesn't span the whole width of the browser like it did originally. Is there a spec that will make it fill both large and small screens then?



    Oct 07 2014 16:10:54

    #4

    Geoff

    Join date : 2008-09-18      Posts : 415

    The revised markup I posted for the hover effect was tested and works for me in all browsers. If not working for you please post the URL.

    As for the size issue, the nav bar is broken in Firefox (screenshot) but ok in IE. If you place a nbsp; between the menu text in the same way as the view cart text then the nav bar will stay intact but with undesirable horizontal scrolling. The best way to be flexible is not to specify a font size.



    Oct 07 2014 17:46:03

    #5

    Debbie Q

    Join date : 2008-09-18      Posts : 4994

    This is what I see in AOL. Not too pretty.

    Debbie Q

    Mal's Support: www.mals-e.com/support.php
    GT's Forms and examples: www.malsforms.com
    Helpful java scripts: www.gemasana.com/mals
    Shipping help documents: www.stoner.org.uk/mals

    My Create-A-Book Publishing - mycreateabook.com
    Personalized Books, Music CDs and Gifts for all ages and occasions.

    Please help me out and share my site on your networks.




    Oct 19 2014 17:57:21

    #6

    Alive & Well

    Join date : 2008-10-01      Posts : 122

    Geoff, I had done the coding in my program not live. Now I tried it live and you were right it works! Thank you!!!!!!!! yahwehsaliveandwell DOTCOM
    I also removed the point size and now the green navigation boxes are small. It looks weird on the page at least it doesn't look like your screen shot Debbie. Maybe the screen shot you posted is why there has been such a high bounce rate since the relaunch? This is the first CSS site I ever did and it sure has been annoying trying to to make it work right. I don't know how to test all browsers. Any suggestions on the tiny buttons? At least the HOVER TEXT WORKS!!!!!!!!!!!! :)

    My browsers I tested with the original template before Geoff's fix above, are Firefox, Safari, Opera and Webmonkey. They all worked ok for me on my computer at my screen resolution so I could only guess that people's resolution plays a part in what the view looks like also????

    Should I use % instead of pixels for type?