19 Replies Latest reply on Aug 26, 2007 11:33 AM by woolwell

    Highlight table row

    woolwell
      I am using a textual nav bar, I would like to be able in my nav bar to have the (td) highlight as a rollover as well as the text change a different colour when i rollover.I have looked under page properties : links, i can only change the text colour.

      I have looked under a new css rule and have tried to select / deselect each heading to no avail

      As an example: in the DW start page under page designs css (halo) section links.

      Can anyone offer any advice
        • 1. Re: Highlight table row
          d_pete Level 1
          td:hover {background-color: red;}
          • 2. Re: Highlight table row
            woolwell Level 1
            Thank you, where do i find the td option to change it, in the td tags at the bottom of the main pane it still only changes the background not on hover, do i have to create a new rule.

            I have tried changing the a:hover rule, but only changes text colour, i believe in must be in the hover rule, but dont know which one i must change to produce this effect.
            • 3. Re: Highlight table row
              d_pete Level 1
              you can just add this line to the a:hover rule
              background-color: red;
              • 4. Re: Highlight table row
                woolwell Level 1
                I have managed to get the colour behind the text to change colour, but is there a way to get the whole row to change colour, not just the area covered by text
                • 5. Re: Highlight table row
                  d_pete Level 1
                  Also the pseudo classes must follow the LoVe-HAte to work right so

                  First in the CSS must be
                  a:link
                  then a:visited
                  then a:hover
                  then a:active
                  (LoVe-HAte)

                  you do not need to have them all but they must be stated in that order.
                  • 6. Re: Highlight table row
                    d_pete Level 1
                    tr:hover {background-color:red;}
                    put this in the css file
                    • 7. Re: Highlight table row
                      woolwell Level 1
                      The links are in the correct order
                      a:link
                      then a:visited
                      then a:hover
                      then a:active

                      I can change the backgroung colour but it only changes the are covered by text. You mention adding tr:hover {background-color:red;}
                      put this in the css file, i dont know how to do this.

                      I have attached the code (something i am very unsure about altering) is it in this area
                      • 8. Re: Highlight table row
                        Level 7
                        .oO(d_pete)

                        >tr:hover {background-color:red;}
                        >put this in the css file

                        Remember that this won't work in IE 6.

                        Micha
                        • 9. Re: Highlight table row
                          woolwell Level 1
                          I have tired to find an example from this forum.
                          example: http://foundationphp.com/egdwcs3/
                          I am trying just to produce the row to highlight as this example show's without the drop down menu
                          • 10. Re: Highlight table row
                            woolwell Level 1
                            Still having no joy.
                            I have tried page properties / modifying a:hover.
                            I am using tables layout, i can get the backgorund colour to change on hover but only behind the text & not the whole row
                            • 11. Re: Highlight table row
                              Level 7
                              On Fri, 24 Aug 2007 15:54:12 +0000 (UTC), "woolwell"
                              <webforumsuser@macromedia.com> wrote:

                              >I am using a textual nav bar, I would like to be able in my nav bar to have the
                              >(td) highlight as a rollover as well as the text change a different colour
                              >when i rollover.I have looked under page properties : links, i can only change
                              >the text colour.
                              >
                              > I have looked under a new css rule and have tried to select / deselect each
                              >heading to no avail
                              >
                              > As an example: in the DW start page under page designs css (halo) section
                              >links.
                              >
                              > Can anyone offer any advice


                              Are you really committed to nav links inside a table ??

                              a horizontal nav system based on css gives you much more scope.

                              Just have a look here for lots of ideas:

                              http://css.maxdesign.com.au/listamatic/
                              --

                              ~Malcolm N....
                              ~
                              • 12. Re: Highlight table row
                                woolwell Level 1
                                Malcolm, many thanks for your steer.

                                Still getting to grips with the basic's, the advice you gave was excellent, once i choose a style where do i insert it in to the code or page to make it work, it looks quite straight forward to adapt, but don't know how to insert it in to my site.
                                • 13. Re: Highlight table row
                                  Level 7
                                  On Fri, 24 Aug 2007 19:49:53 +0000 (UTC), "woolwell"
                                  <webforumsuser@macromedia.com> wrote:

                                  >Malcolm, many thanks for your steer.
                                  >
                                  > Still getting to grips with the basic's, the advice you gave was excellent,
                                  >once i choose a style where do i insert it in to the code or page to make it
                                  >work, it looks quite straight forward to adapt, but don't know how to insert it
                                  >in to my site.


                                  All those nav system s are based on having thelinks in a list.

                                  do you know how to make an unordered list of the main pages for you
                                  nav links ?




                                  --

                                  ~Malcolm N....
                                  ~
                                  • 14. Re: Highlight table row
                                    d_pete Level 1
                                    In the head tag put somyhing like this

                                    <style type="text/css">
                                    <!--
                                    body,td,th {
                                    font-family: Geneva, Arial, Helvetica, sans-serif;
                                    font-size: 14px;
                                    color: #000000;
                                    }
                                    a:link {
                                    color: #000000;
                                    }
                                    a:visited {
                                    color: #000033;
                                    }
                                    a:hover {
                                    color: #FFFF00;
                                    }
                                    h1 {
                                    font-size: x-large;
                                    color: #DE1A00;
                                    background-color: #D4D0C8;
                                    }
                                    h2 {
                                    font-size: large;
                                    color: #DD1A00;
                                    }
                                    h3 {
                                    font-size: medium;
                                    color: #DC1A00;
                                    background-color: #FFFFFF;
                                    border-top-color: #000000;
                                    border-right-color: #000000;
                                    text-align: center;
                                    }
                                    h5 {
                                    font-family: Georgia, "Times New Roman", Times, serif;
                                    font-size: 9px;
                                    font-weight: lighter;
                                    color: #000000;
                                    }
                                    tr:hover {
                                    background-color:red;
                                    }
                                    -->
                                    </style>

                                    Feel free to change whatever to fit what you want
                                    • 15. Re: Highlight table row
                                      Level 7
                                      On Fri, 24 Aug 2007 19:49:53 +0000 (UTC), "woolwell"
                                      <webforumsuser@macromedia.com> wrote:

                                      >Malcolm, many thanks for your steer.
                                      >
                                      > Still getting to grips with the basic's, the advice you gave was excellent,
                                      >once i choose a style where do i insert it in to the code or page to make it
                                      >work, it looks quite straight forward to adapt, but don't know how to insert it
                                      >in to my site.


                                      OK - just to take a simple case based on Russ Weakley's simple
                                      horizontal nav.

                                      http://css.maxdesign.com.au/listamatic/horizontal02.htm

                                      I just put it in a simple page:

                                      <!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>Untitled Document</title>
                                      <style type="text/css">
                                      <!--
                                      ul#navlist {
                                      margin-left: 0;
                                      padding-left: 0;
                                      white-space: nowrap;
                                      }

                                      #navlist li {
                                      display: inline;
                                      list-style-type: none;
                                      }

                                      #navlist a { padding: 3px 10px; }

                                      #navlist a:link, #navlist a:visited {
                                      color: #fff;
                                      background-color: #036;
                                      text-decoration: none;
                                      }

                                      #navlist a:hover {
                                      color: #fff;
                                      background-color: #369;
                                      text-decoration: none;
                                      }

                                      h1 {font-size:150%}
                                      -->
                                      </style>
                                      </head>

                                      <body>
                                      <div id="navcontainer">
                                      <ul id="navlist">
                                      <li id="active"></li>
                                      <li><a href="#">Home</a></li>
                                      <li><a href="#">Page 1</a></li>
                                      <li><a href="#">Page 2</a></li>
                                      <li><a href="#">Page 3</a></li>
                                      </ul>
                                      </div>
                                      <div id="mainPage">
                                      <h1>Page Title</h1>
                                      <p>Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt
                                      lorem ipsum dolor
                                      sit amet, cupidatat non proident. Eu fugiat nulla pariatur.
                                      Excepteur sint occaecat
                                      ullamco laboris nisi ut labore et dolore magna aliqua. Quis nostrud
                                      exercitation qui
                                      officia deserunt eu fugiat nulla pariatur.</p>
                                      <p>Nav list by Author: Russ Weakley</p>
                                      <p>ref</p>
                                      <p><a
                                      href=" http://css.maxdesign.com.au/listamatic/horizontal02.htm">http://css.maxdesign.com.au/lista matic/horizontal02.htm</a></p>
                                      </div>
                                      </body>
                                      </html>
                                      --

                                      ~Malcolm N....
                                      ~
                                      • 16. Re: Highlight table row
                                        TC2112 Level 1
                                        Hello,

                                        Here is another step by step tutorial you might be interested in.



                                        ProjectSeven

                                        Take care,
                                        Tim
                                        • 17. Re: Highlight table row
                                          woolwell Level 1
                                          Malcolm / TC 2112.
                                          Thanks again for your advice, i think where i am confussing the issue is, i am very new to DW, i started with layout mode, (soon pointed in the right direction there) started again by moving on to tables, really what i don't understand is how to layout pages, eg what a div is.

                                          So far i have just put a load of tables & nested tables on the page & filled with images & text.

                                          I am not trying to run before i walk, but very confussed on the best way to set up a page then how to move things around where i what them and where and how to insert code.
                                          Is there a way to show you what i have done so far bu adding a link to my local folders
                                          • 18. Re: Highlight table row
                                            Level 7
                                            http://apptools.com/examples/pagelayout101.php


                                            --
                                            Murray --- ICQ 71997575
                                            Adobe Community Expert
                                            (If you *MUST* email me, don't LAUGH when you do so!)
                                            ==================
                                            http://www.dreamweavermx-templates.com - Template Triage!
                                            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                                            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                                            http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                                            ==================


                                            "woolwell" <webforumsuser@macromedia.com> wrote in message
                                            news:faor28$g2j$1@forums.macromedia.com...
                                            > Malcolm / TC 2112.
                                            > Thanks again for your advice, i think where i am confussing the issue is,
                                            > i am
                                            > very new to DW, i started with layout mode, (soon pointed in the right
                                            > direction there) started again by moving on to tables, really what i don't
                                            > understand is how to layout pages, eg what a div is.
                                            >
                                            > So far i have just put a load of tables & nested tables on the page &
                                            > filled
                                            > with images & text.
                                            >
                                            > I am not trying to run before i walk, but very confussed on the best way
                                            > to
                                            > set up a page then how to move things around where i what them and where
                                            > and
                                            > how to insert code.
                                            > Is there a way to show you what i have done so far bu adding a link to my
                                            > local folders
                                            >


                                            • 19. Re: Highlight table row
                                              woolwell Level 1
                                              Many Thanks, i will get back to you once i have read it