10 Replies Latest reply on May 14, 2006 6:23 AM by Newsgroup_User

    CSS hover problem

    Level 7
      www.westernturnpike.com/prototype.htm

      I want the text color, background color, and border to change on the entire
      button, but only the text picks up the change when you hover/rollover.

      How can I get the effect to work for entire button?

      Thanks,

      Paul


        • 1. Re: CSS hover problem
          Level 7
          An easier way than your doing it is to use unordered lists, instead of table
          rows. Create your navigation menu something like this:

          <ul>
          <li><a href="#">Course Layout</a></li>
          <li><a href="#">Daily Rates</a></li>
          <li><a href="#">Scheduled Events</a></li>
          <li><a href="#">Membership</a></li>
          <li><a href="#">Contact</a></li>
          </ul>

          In your CSS, you'd style your :

          #nav li a { }

          (this will give you the look of any linked list-item)

          And then to style it on :hover, you'd style this :

          #nav li a:hover { }

          Also, be sure to style your actual list the way you want it, like so :

          #nav ul { }

          Hopefully this points you into the right direction. I know it is possible to
          do with tables, but unordered lists are much cleaner, IMHO.

          --
          Shane H
          shane@NOSPAMavenuedesigners.com
          http://www.avenuedesigners.com


          "P.F." <paul@orion-ics.com> wrote in message
          news:e44tns$49l$1@forums.macromedia.com...
          > www.westernturnpike.com/prototype.htm
          >
          > I want the text color, background color, and border to change on the
          > entire
          > button, but only the text picks up the change when you hover/rollover.
          >
          > How can I get the effect to work for entire button?
          >
          > Thanks,
          >
          > Paul
          >
          >


          • 2. Re: CSS hover problem
            Level 7
            Oh my goodness .. okay, I will try.

            other suggestions welcome. :-)


            "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
            news:e44ub9$4v1$1@forums.macromedia.com...
            > An easier way than your doing it is to use unordered lists, instead of
            table
            > rows. Create your navigation menu something like this:
            >
            > <ul>
            > <li><a href="#">Course Layout</a></li>
            > <li><a href="#">Daily Rates</a></li>
            > <li><a href="#">Scheduled Events</a></li>
            > <li><a href="#">Membership</a></li>
            > <li><a href="#">Contact</a></li>
            > </ul>
            >
            > In your CSS, you'd style your :
            >
            > #nav li a { }
            >
            > (this will give you the look of any linked list-item)
            >
            > And then to style it on :hover, you'd style this :
            >
            > #nav li a:hover { }
            >
            > Also, be sure to style your actual list the way you want it, like so :
            >
            > #nav ul { }
            >
            > Hopefully this points you into the right direction. I know it is possible
            to
            > do with tables, but unordered lists are much cleaner, IMHO.
            >
            > --
            > Shane H
            > shane@NOSPAMavenuedesigners.com
            > http://www.avenuedesigners.com
            >
            >
            > "P.F." <paul@orion-ics.com> wrote in message
            > news:e44tns$49l$1@forums.macromedia.com...
            > > www.westernturnpike.com/prototype.htm
            > >
            > > I want the text color, background color, and border to change on the
            > > entire
            > > button, but only the text picks up the change when you hover/rollover.
            > >
            > > How can I get the effect to work for entire button?
            > >
            > > Thanks,
            > >
            > > Paul
            > >
            > >
            >
            >


            • 3. Re: CSS hover problem
              Level 7
              I should also make note, for that code supplied - you'd add this #nav ID
              like so :

              <div id="nav">
              <ul>
              <li>....</li>
              </ul>
              </div>

              --
              Shane H
              shane@NOSPAMavenuedesigners.com
              http://www.avenuedesigners.com


              "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
              news:e44ub9$4v1$1@forums.macromedia.com...
              > An easier way than your doing it is to use unordered lists, instead of
              > table rows. Create your navigation menu something like this:
              >
              > <ul>
              > <li><a href="#">Course Layout</a></li>
              > <li><a href="#">Daily Rates</a></li>
              > <li><a href="#">Scheduled Events</a></li>
              > <li><a href="#">Membership</a></li>
              > <li><a href="#">Contact</a></li>
              > </ul>
              >
              > In your CSS, you'd style your :
              >
              > #nav li a { }
              >
              > (this will give you the look of any linked list-item)
              >
              > And then to style it on :hover, you'd style this :
              >
              > #nav li a:hover { }
              >
              > Also, be sure to style your actual list the way you want it, like so :
              >
              > #nav ul { }
              >
              > Hopefully this points you into the right direction. I know it is possible
              > to do with tables, but unordered lists are much cleaner, IMHO.
              >
              > --
              > Shane H
              > shane@NOSPAMavenuedesigners.com
              > http://www.avenuedesigners.com
              >
              >
              > "P.F." <paul@orion-ics.com> wrote in message
              > news:e44tns$49l$1@forums.macromedia.com...
              >> www.westernturnpike.com/prototype.htm
              >>
              >> I want the text color, background color, and border to change on the
              >> entire
              >> button, but only the text picks up the change when you hover/rollover.
              >>
              >> How can I get the effect to work for entire button?
              >>
              >> Thanks,
              >>
              >> Paul
              >>
              >>
              >
              >


              • 4. Re: CSS hover problem
                Level 7
                Okay .. thanks ...

                any hint or example on style sheet entries that are similar to what I am
                looking for?

                I will be trying meanwhile.



                "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                news:e44uld$58u$1@forums.macromedia.com...
                > I should also make note, for that code supplied - you'd add this #nav ID
                > like so :
                >
                > <div id="nav">
                > <ul>
                > <li>....</li>
                > </ul>
                > </div>
                >
                > --
                > Shane H
                > shane@NOSPAMavenuedesigners.com
                > http://www.avenuedesigners.com
                >
                >
                > "Shane H" <shane@NOSPAMavenuedesigners.com> wrote in message
                > news:e44ub9$4v1$1@forums.macromedia.com...
                > > An easier way than your doing it is to use unordered lists, instead of
                > > table rows. Create your navigation menu something like this:
                > >
                > > <ul>
                > > <li><a href="#">Course Layout</a></li>
                > > <li><a href="#">Daily Rates</a></li>
                > > <li><a href="#">Scheduled Events</a></li>
                > > <li><a href="#">Membership</a></li>
                > > <li><a href="#">Contact</a></li>
                > > </ul>
                > >
                > > In your CSS, you'd style your :
                > >
                > > #nav li a { }
                > >
                > > (this will give you the look of any linked list-item)
                > >
                > > And then to style it on :hover, you'd style this :
                > >
                > > #nav li a:hover { }
                > >
                > > Also, be sure to style your actual list the way you want it, like so :
                > >
                > > #nav ul { }
                > >
                > > Hopefully this points you into the right direction. I know it is
                possible
                > > to do with tables, but unordered lists are much cleaner, IMHO.
                > >
                > > --
                > > Shane H
                > > shane@NOSPAMavenuedesigners.com
                > > http://www.avenuedesigners.com
                > >
                > >
                > > "P.F." <paul@orion-ics.com> wrote in message
                > > news:e44tns$49l$1@forums.macromedia.com...
                > >> www.westernturnpike.com/prototype.htm
                > >>
                > >> I want the text color, background color, and border to change on the
                > >> entire
                > >> button, but only the text picks up the change when you hover/rollover.
                > >>
                > >> How can I get the effect to work for entire button?
                > >>
                > >> Thanks,
                > >>
                > >> Paul
                > >>
                > >>
                > >
                > >
                >
                >


                • 5. Re: CSS hover problem
                  Level 7
                  P.F. wrote:
                  > www.westernturnpike.com/prototype.htm
                  >
                  > I want the text color, background color, and border to change on the entire
                  > button, but only the text picks up the change when you hover/rollover.
                  >
                  > How can I get the effect to work for entire button?
                  >
                  > Thanks,
                  >
                  > Paul
                  >
                  >
                  Check the uberlinks tutorial on Projectseven.com


                  --
                  Bonnie in California
                  kroko at
                  sbcglobal dot net
                  http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa
                  • 6. Re: CSS hover problem
                    Level 7
                    thanks .. would you have a link to the toot?


                    "Bonnie" <"kroko[Occam]"@sbcglobal.net> wrote in message
                    news:e44vae$5tv$1@forums.macromedia.com...
                    > P.F. wrote:
                    > > www.westernturnpike.com/prototype.htm
                    > >
                    > > I want the text color, background color, and border to change on the
                    entire
                    > > button, but only the text picks up the change when you hover/rollover.
                    > >
                    > > How can I get the effect to work for entire button?
                    > >
                    > > Thanks,
                    > >
                    > > Paul
                    > >
                    > >
                    > Check the uberlinks tutorial on Projectseven.com
                    >
                    >
                    > --
                    > Bonnie in California
                    > kroko at
                    > sbcglobal dot net
                    > http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa


                    • 7. Re: CSS hover problem
                      Level 7
                      P.F. wrote:
                      > thanks .. would you have a link to the toot?

                      Here you go:

                      http://www.projectseven.com/tutorials/css/uberlinks/index.htm

                      --
                      Bonnie in California
                      kroko at
                      sbcglobal dot net
                      http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa
                      • 8. Re: CSS hover problem
                        Level 7
                        tyvm Bonnie in CA


                        "Bonnie" <"kroko[Occam]"@sbcglobal.net> wrote in message
                        news:e450rd$7kt$1@forums.macromedia.com...
                        > P.F. wrote:
                        > > thanks .. would you have a link to the toot?
                        >
                        > Here you go:
                        >
                        > http://www.projectseven.com/tutorials/css/uberlinks/index.htm
                        >
                        > --
                        > Bonnie in California
                        > kroko at
                        > sbcglobal dot net
                        > http://www.theanimalrescuesite.com/cgi-bin/WebObjects/CTDSites.woa


                        • 10. Re: CSS hover problem
                          Level 7
                          Going the unordered list route is probably the best way, but if you want to
                          make a table cell clickable, here's an example with the associated css....
                          http://www.dreamweaverresources.com/tutorials/clickable_cell.htm

                          --
                          Nadia
                          Adobe� Community Expert : Dreamweaver
                          --------------------------------------------
                          http://www.csstemplates.com.au - CSS Templates | Free Templates
                          --------------------------------------------
                          http://www.DreamweaverResources.com - Dropdown Menu Templates|Tutorials
                          http://www.macromedia.com/devnet/dreamweaver/css.html - CSS Tutorials
                          -------------------------------------------------


                          "P.F." <paul@orion-ics.com> wrote in message
                          news:e44tns$49l$1@forums.macromedia.com...
                          > www.westernturnpike.com/prototype.htm
                          >
                          > I want the text color, background color, and border to change on the
                          > entire
                          > button, but only the text picks up the change when you hover/rollover.
                          >
                          > How can I get the effect to work for entire button?
                          >
                          > Thanks,
                          >
                          > Paul
                          >
                          >