17 Replies Latest reply on May 17, 2010 4:56 PM by Zabeth69

    Inverting The Background And Text Colors For Rollovers

    blakers81 Level 1

      Anyone know how to invert the background and text colors when a box is rolled over?

       

      I have a table 1 row, 14 columns.  Each column contains a link.  The background color of each "td"/cell in the table is light pink, while the text color of each "td"/cell is burgundy.  I would like to make it where when someone rolls over each cell/box the colors invert to background burgundy and text light pink.

       

      When I try to set the rollover links for the page properties, it doesn't seem to quite do this.  What ends up happening is just part of the cell (where the text is typed) goes to burgundy.  So, I end up seeing a small burgundy box within the actual cell/box.

       

      Anyone know how to fix this where it will work correctly?  Thanks.

        • 1. Re: Inverting The Background And Text Colors For Rollovers
          Zabeth69 Level 5

          When you set link colors, or hover colors, to be more precise, the element that you color is the element that changes color. I realize that you knew that already.

           

          If you want the text and its background to change color, you assigned the hover to the "a" link tag. The background of text only extends as far as the 'body' to which the font is 'attached'...it does not fill into the corners of the table cells unless you have defined a height to the cells, a line-height to the text, etc., etc.

           

          There is a simpler way.

           

          When you want the entire 'td' cell background to change color, assign the hover to the 'td' tag itself:

           

          <style type="text/css">
          td {
               color: #600;
               background: #F6C;
               text-align: center;
               font-weight: bold;
          }
          td:hover {
               color: #F6C;
               background: #600;
          }
          </style>
          

           

          This worked effectively on XP Pro in Chrome, IE8, FireFox, Opera, and Safari.

           

          Notice that I did not bother to assign hover states to the links at all. As long as your cursor hovers over a table cell...any table cell, I might add, the new colors are applied.

           

          If you expect to use tables that do not change colors upon hover, add an id to the table tag, as <table id="menu"> and in the CSS, pre-pend the #menu id so that only table cells within an element with id="menu" will do the hover color shift:

          <style type="text/css">

          #menu td {

               color: #600;

               background: #F6C;

               text-align: center;

               font-weight: bold;

          }

          #menu td:hover {

               color: #F6C;

               background: #600;

          }

          </style>

          Beth

          • 2. Re: Inverting The Background And Text Colors For Rollovers
            blakers81 Level 1

            I tried what you said.  It helped out a lot.  It is almost perfect, but there is one slight problem.  The text only changes colors when I roll over the actual text and not the box/cell like I would wish.

             


            Here is my code:

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Heirloom Creations Fine Sewing Shop, LLC</title>
            <style type="text/css">

             

             

             


            #tabs td{
               
                text-align: center;
                color: #77003C;
                border-top-color: #9B004E;
                border-right-color: #9B004E;
                border-bottom-color: #9B004E;
                border-left-color: #9B004E;
                text-decoration: underline;
                background-color: #F7E7E8;
               
            }

             

            #tabs td:hover {
                color: #F7E7E8;
                background-color: #77003C;
               
            }

             

            .tabslinks:link {
                color: #77003C;
            }

             

            .tabslinks:hover {
                color: #F7E7E8;
            }

             

            </style></head>

             

            <body>

             

            <table id="tabs" width="993" border="2" cellpadding="0" cellspacing="0" >
              <tr>
                <td><a href="home.html" class="tabslinks">Home</a></td>
                <td><a href="fabrics.html" class="tabslinks">Fabrics</a></td>
                <td><a href="patterns.html" class="tabslinks">Patterns</a></td>
                <td><a href="laces.html" class="tabslinks">Laces</a></td>
                <td><a href="books.html" class="tabslinks">Books</a></td>
                <td><a href="smocking.html" class="tabslinks">Smocking</a></td>
                <td><a href="buttons.html" class="tabslinks">Buttons</a></td>
                <td><a href="trims.html" class="tabslinks">Trims</a></td>
                <td><a href="notions.html" class="tabslinks">Notions</a></td>
                <td><a href="babyjewelryandgifts.html" class="tabslinks">Baby Jewelry<br />and Gifts</a></td>
                <td><a href="giftcertificates.html" class="tabslinks">Gift Certificates</a></td>
                <td><a href="photogallery.html" class="tabslinks">Photo Gallery</a></td>
                <td><a href="aboutus.html" class="tabslinks">About Us</a></td>
                <td><a href="contactus.html" class="tabslinks">Contact Us</a></td>
              </tr>
            </table>
            </body>
            </html>

             


            Take a look and see what I mean.  I think it has something to do with the links, because they are automatically blue, so I had to make a special class to change them to a specific color other than blue.  So, by assigning a class for their color in the regular state and the hover state that works, but the:

             

            #tabs td:hover {
                 color: #F7E7E8;
                 background-color: #77003C;
                
            }

             

            does not seem to turn the text color to "F7E7E8" when I hover over the td/cells/boxes...I think because the class I set for the link color is overriding it.

             

            Anyone know how I can fix this?

            • 3. Re: Inverting The Background And Text Colors For Rollovers
              Zabeth69 Level 5

              I see that you have added a class="tabslinks" to your links. In reality, you don't need to do that. You can simply add 'a' to your other rules:

               

              #tabs td, #tabs a {
                 
                  text-align: center;
                  color: #77003C;
                  border: #9B004E;
                  text-decoration: underline;
                  background-color: #F7E7E8;
                 
              }

               

              #tabs td:hover, #tabs a:hover {
                  color: #F7E7E8;
                  background-color: #77003C;
                 
              }

              and get rid of the class="tabslinks" in the <a> tags.

               

              Note also that if all four sides of a border/box are to be the same, you can make one attribute/value line instead of four.

               

              This may fix it.

               

              Beth

              • 4. Re: Inverting The Background And Text Colors For Rollovers
                Nancy OShea Adobe Community Professional & MVP

                Here's how I do it: (tested and works in FF 3.6; IE6, 7, 8)

                http://alt-web.com/DEMOS/CSS-Clickable-Table-Cells.shtml

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com

                • 5. Re: Inverting The Background And Text Colors For Rollovers
                  blakers81 Level 1

                  Nahh, that changes it somewhat but still doesn't do it.  I will look around on a website that has it and see what they have for their code.

                   

                   

                  This is what it does now with that code changed:

                   

                   

                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <html xmlns="http://www.w3.org/1999/xhtml">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                  <title>Heirloom Creations Fine Sewing Shop, LLC</title>
                  <style type="text/css">

                   

                   

                   


                  #tabs td, #tabs a{
                     
                      text-align: center;
                      color: #77003C;
                      border-top-color: #9B004E;
                      border-right-color: #9B004E;
                      border-bottom-color: #9B004E;
                      border-left-color: #9B004E;
                      text-decoration: underline;
                      background-color: #F7E7E8;
                     
                  }

                   

                  #tabs td:hover, #tabs a:hover {
                      color: #F7E7E8;
                      background-color: #77003C;
                     
                  }

                   

                   

                   

                  </style></head>

                   

                  <body>

                   

                  <table id="tabs" width="993" border="2" cellpadding="0" cellspacing="0" >
                    <tr>
                      <td><a href="home.html">Home</a></td>
                      <td><a href="fabrics.html">Fabrics</a></td>
                      <td><a href="patterns.html">Patterns</a></td>
                      <td><a href="laces.html">Laces</a></td>
                      <td><a href="books.html">Books</a></td>
                      <td><a href="smocking.html">Smocking</a></td>
                      <td><a href="buttons.html">Buttons</a></td>
                      <td><a href="trims.html">Trims</a></td>
                      <td><a href="notions.html">Notions</a></td>
                      <td><a href="babyjewelryandgifts.html">Baby Jewelry<br />and Gifts</a></td>
                      <td><a href="giftcertificates.html">Gift Certificates</a></td>
                      <td><a href="photogallery.html">Photo Gallery</a></td>
                      <td><a href="aboutus.html">About Us</a></td>
                      <td><a href="contactus.html">Contact Us</a></td>
                    </tr>
                  </table>
                  </body>
                  </html>

                  • 6. Re: Inverting The Background And Text Colors For Rollovers
                    Zabeth69 Level 5

                    Get rid of the background on the "a"; it's interfering with the background in the table cell.

                     

                    #tabs td, #tabs a {
                        text-align: center;
                        text-decoration: underline;

                        color: #77003C;

                    }

                     

                    #tabs td {

                         background-color: #F7E7E8;

                        border-color: #9B004E;

                    }

                     

                    #tabs td:hover, #tabs a:hover {
                        color: #F7E7E8;
                    }

                     

                    #tabs td:hover {
                        background-color: #77003C;
                    }

                     

                    Beth

                    1 person found this helpful
                    • 7. Re: Inverting The Background And Text Colors For Rollovers
                      blakers81 Level 1

                      I don't really see the difference in how you changed the two codes there.  Two me it looks like the same thing, just split up into separate sections.  It did however change it though somewhat.  But, it only changed it back to how it was before.

                       

                      Look very closely at how it is when you hover over a cell.  The second the mouse hovers over a cell, the cell's background turns burgundy like it should, so that part of the code works.  But, the text in the cell also stays burgundy (instead of turning to light pink), so that part of the code is not working for some reason.  And so, in that moment you see a big burgundy block in the cell where the background and the text is the exact same color.  It is not until you hover exactly over the text itself that it then changes to light pink.  I don't exactly want it like this, but perhaps I will have to settle for this if I can't figure out anything else.  I know there is a way to do it though where when you hover over the cell everything inverts, instead of having to hover over the actual text.  I've seen it done on plenty websites before.   Just haven't figured it out yet.  Thanks for all the help Beth.

                      • 8. Re: Inverting The Background And Text Colors For Rollovers
                        Zabeth69 Level 5

                        Rather than working with the backgrounds of the cell and the color of the text (since you are working with links), your best bet is to completely disregard those attributes and go straight to Nancy's solution, omitting the bit about images if you are not using them.

                         

                        I apologize for confusing you; for some reason I missed the implication that you were going to be working with links. But you're right...just making the text and background change color by itself is no end in itself!

                         

                        But in fact, it was a reasonably good exercise to show how rules...even if they seem to reinforce each other...can contradict each other.

                         

                        Beth

                        • 9. Re: Inverting The Background And Text Colors For Rollovers
                          blakers81 Level 1

                          ok, I am headed off to work.  I will try that when I get home tonight...hadn't seen the post earlier.  Thanks.

                          • 10. Re: Inverting The Background And Text Colors For Rollovers
                            blakers81 Level 1

                            Hmm, I looked at the link, but it looks as though they are saved as image files and also the text doesn't change colors upon hovering, so I don't think that will work.

                            • 11. Re: Inverting The Background And Text Colors For Rollovers
                              blakers81 Level 1

                              I added "display: block" to the a:link, and it seems to do slightly better. It inverts everything horizontally across, but not all the way up and down.  And I think this has something to do with the cell I made "Baby Jewelry and Gifts" since it takes up two lines.  Notice how when you hover anywhere over that cell it inverts the colors like it is supposed to.  Only problem is the other cells don't take up two lines and so you still have to hover somewhere horizontally along that one line of text for those cells.  If I were to make "Baby Jewelry and Gifts" one line, then the "display: block" would then do it for all the cells because they would all be the same number of lines.  But, I would rather "Baby Jewelry and Gifts" to be two lines.  There has got to be a way to do do this.

                              • 12. Re: Inverting The Background And Text Colors For Rollovers
                                Zabeth69 Level 5

                                Make a separate class for single-line items that has a line-height of double the line-height for double-line items.

                                 

                                For example, in www.gravenimagedesign.net/PHA/

                                 

                                div.multi_drop_menus li {
                                     background-color:#373c73;         /* background color of the level 1 menu items */
                                     border-right:0px solid #CCB;   /* creates dividing lines to right of each horiz level 1 menu item *//* set to 0px to remove */
                                     line-height: 13px;
                                 } 
                                 div.multi_drop_menus li a.single {
                                     line-height: 26px;
                                 } 
                                
                                

                                and in the menu's HTML:

                                  <li><a href="aboutPHA/index.html" title="About the Portland Housing Authority" target="_self" class="single" id="about">ABOUT PHA</a>

                                and

                                  <li><a href="section8/index.html" title="Section 8 Programs" target="_self" id="section8">SECTION 8<br />PROGRAMS</a>  
                                
                                
                                
                                
                                

                                 

                                Where ABOUT PHA was expected to fall on a single line, and SECTION 8 PROGRAMS was expected to be on two lines.

                                 

                                The rest of your styling should still hold.

                                 

                                Beth

                                • 13. Re: Inverting The Background And Text Colors For Rollovers
                                  Nancy OShea Adobe Community Professional & MVP

                                  Honestly, you'll get much nicer results from a CSS styled list menu.

                                   

                                  Copy and paste this into a new page and play with it.

                                   

                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                  <html xmlns="http://www.w3.org/1999/xhtml">
                                  <head>
                                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                  <title>Heirloom Creations Fine Sewing Shop, LLC</title>
                                  <style type="text/css" media="all">
                                  
                                  /**optional centered container**/
                                  
                                  #wrapper {
                                  width: 1024px; /**adjust width as needed**/
                                  margin:0 auto; /**centers on screen**/
                                  }
                                  
                                  /**begin Horizontal list menu**/
                                       
                                  #navbar {
                                  margin: 0 ;
                                  padding: 0;
                                  }
                                  #navbar li {
                                  list-style: none;
                                  float: left;
                                  background: #F7E7E8;
                                  }
                                  #navbar li a {
                                  width: auto;
                                  color: #77003C;
                                  text-decoration: underline;
                                  text-align: center;
                                  border: 1px solid #9B004E;
                                  padding: 12px 3px 0 3px;
                                  display:block;
                                  height: 3em;
                                  }
                                  #navbar li a:hover, 
                                  #navbar li a:active, 
                                  #navbar li a:focus {
                                  color: #F7E7E8;
                                  background-color: #77003C;
                                  }
                                  </style>
                                  </head>
                                  <body>
                                  
                                  <div id="wrapper">
                                  <ul id="navbar">
                                      <li><a href="home.html">Home</a></li>
                                      <li><a href="fabrics.html">Fabrics</a></li>
                                      <li><a href="patterns.html">Patterns</a></li>
                                      <li><a href="laces.html">Laces</a></li>
                                      <li><a href="books.html">Books</a></li>
                                      <li><a href="smocking.html">Smocking</a></li>
                                      <li><a href="buttons.html">Buttons</a></li>
                                      <li><a href="trims.html">Trims</a></li>
                                      <li><a href="notions.html">Notions</a></li>
                                      <li><a href="babyjewelryandgifts.html">Baby Jewelry     <br />&amp; Gifts</a></li>
                                      <li><a href="giftcertificates.html">Gift Certificates</a></li>
                                      <li><a href="photogallery.html">Photo Gallery</a></li>
                                      <li><a href="aboutus.html">About Us</a></li>
                                      <li><a href="contactus.html">Contact Us</a></li>
                                  </ul>   <!--end navbar -->
                                  </div>  <!--end wrapper -->
                                  </body>
                                  </html>
                                  

                                   

                                   

                                  Nancy O.
                                  Alt-Web Design & Publishing
                                  Web | Graphics | Print | Media  Specialists
                                  http://alt-web.com/
                                  http://twitter.com/altweb
                                  http://alt-web.blogspot.com
                                  
                                  • 14. Re: Inverting The Background And Text Colors For Rollovers
                                    blakers81 Level 1

                                    THAT DID IT!

                                     

                                    Thanks so much Nancy!  I messed around with it a little and came up with this also:

                                     

                                     

                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                                    <html xmlns="http://www.w3.org/1999/xhtml">
                                    <head>
                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                                    <title>Heirloom Creations Fine Sewing Shop, LLC</title>
                                    <style type="text/css" media="all">

                                     

                                    /**optional centered container**/

                                     

                                    #wrapper {
                                    width: 993px; /**adjust width as needed**/
                                    margin:0 auto; /**centers on screen**/
                                    }

                                     

                                    /**begin Horizontal list menu**/
                                        
                                    #navbar {
                                    margin: 0 ;
                                    padding: 0;
                                    }
                                    #navbar li {
                                    list-style: none;
                                    float: left;
                                    background: #F7E7E8;
                                    }
                                    #navbar li a {
                                        width: auto;
                                        color: #77003C;
                                        text-decoration: underline;
                                        text-align: center;
                                        border: 1px solid #9B004E;
                                        padding: 18px 3px 0 3px;
                                        display:block;
                                        height: 2.5em;
                                    }

                                     

                                    #navbar li a:hover,
                                    #navbar li a:active,
                                    #navbar li a:focus {
                                    color: #F7E7E8;
                                    background-color: #77003C;
                                    }

                                     

                                     

                                     

                                     

                                     

                                     

                                     

                                     

                                     


                                    /**optional centered container**/

                                     

                                    #wrapper2 {
                                    width: 993px; /**adjust width as needed**/
                                    margin:0 auto; /**centers on screen**/
                                    }

                                     

                                    /**begin Horizontal list menu**/
                                        
                                    #navbar2 {
                                    margin: 0 ;
                                    padding: 0;
                                    }
                                    #navbar2 li {
                                    list-style: none;
                                    float: left;
                                    background: #F7E7E8;
                                    }
                                    #navbar2 li a {
                                        width: auto;
                                        color: #77003C;
                                        text-decoration: underline;
                                        text-align: center;
                                        border: 1px solid #9B004E;
                                        padding: 10px 3px 0 3px;
                                        display:block;
                                        height: 3em;
                                    }

                                     

                                    #navbar2 li a:hover,
                                    #navbar2 li a:active,
                                    #navbar2 li a:focus {
                                    color: #F7E7E8;
                                    background-color: #77003C;
                                    }

                                     


                                    </style>
                                    </head>
                                    <body>

                                     

                                    <div id="wrapper">
                                    <ul id="navbar">
                                        <li><a href="home.html">Home</a></li>
                                        <li><a href="fabrics.html">Fabrics</a></li>
                                        <li><a href="patterns.html">Patterns</a></li>
                                        <li><a href="laces.html">Laces</a></li>
                                        <li><a href="books.html">Books</a></li>
                                        <li><a href="smocking.html">Smocking</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="trims.html">Trims</a></li>
                                        <li><a href="notions.html">Notions</a></li>
                                    </ul>   <!--end navbar -->
                                    </div>  <!--end wrapper -->
                                       
                                    <div id="wrapper2">
                                    <ul id="navbar2">
                                        <li><a href="babyjewelryandgifts.html">Baby Jewelry     <br />and Gifts</a></li>
                                    </ul>   <!--end navbar -->
                                    </div>  <!--end wrapper -->

                                     

                                    <div id="wrapper">
                                    <ul id="navbar">
                                        <li><a href="giftcertificates.html">Gift Certificates</a></li>
                                        <li><a href="photogallery.html">Photo Gallery</a></li>
                                        <li><a href="aboutus.html">About Us</a></li>
                                        <li><a href="contactus.html">Contact Us</a></li>
                                    </ul>   <!--end navbar -->
                                    </div>  <!--end wrapper -->

                                     

                                    </body>

                                     

                                     

                                     

                                    I am making a website for my mom who owns a little mom and pop sewing shop that makes baby clothes (can you tell...lol).  I will show her both these codes and see which one she likes.

                                     

                                    Nancy and Beth you have both been tremendously helpful.  I would never have done it without you guys.  Thanks!

                                    • 15. Re: Inverting The Background And Text Colors For Rollovers
                                      Zabeth69 Level 5

                                      Happy to help! Sorry I had one foot nailed down for the first part of the conversation...

                                       

                                       

                                      Beth

                                      • 16. Re: Inverting The Background And Text Colors For Rollovers
                                        blakers81 Level 1

                                        Anyone know of any way to make this list extend out to 993 px?  I set the "wrapper" and "navbar" both to 993 px, but it doesn't do anything.  I could set it to 1,000,000 px and it would still stay the same.  It seems to just be affected by the width of the "navbar li a", which are the individual boxes/cells, and I don't want them all the same exact width since there are different lengthed words in each box/cell.  But, I want the whole list to extend out to 993 px so that it is flush with everything else on the page, which is all 993 px.  Any way you guys know how?  If there is no easy way, I can make 14 individual ids for each box/cell and set the width of each one separately.  That will suffice if it comes down to having to do it that way.  I just don't know if there is an easier way.

                                        • 17. Re: Inverting The Background And Text Colors For Rollovers
                                          Zabeth69 Level 5

                                          That's certainly one technique I've used...just make sure your percentages don't add up to more than 100%!

                                           

                                          In fact, that is probably the best way to make sure the menu bar does not run over to two lines, or wrap.

                                           

                                          Beth