Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Highlighting Menu Buttons

Expand Messages
  • loro
    ... You have to make the links display: block for them to fill out , so to speak. Then they ll automatically order themselves one under the other too. Ditch
    Message 1 of 15 , Mar 11, 2004
    • 0 Attachment
      Greg Chapman wrote:
      >While the system works fine for horizontal menus, it doesn't give the
      >desired result with a vertical menu. I'm clearly not thinking laterally at
      >the moment, because I can't think of the approach required to highlight the
      >entire button and not just the text within the button.
      >
      >You'll see what I'm talking about at:
      >http://www.waterwaysguides.freeserve.co.uk/menutest.htm

      You have to make the links 'display: block' for them to "fill out", so to speak. Then they'll automatically order themselves one under the other too. Ditch the paragraphs and transfer the styles you need to keep to a rule for '.sidemenu a' and so on.
      I'd make sidemenu an id rather than a class but that's me.

      Just the important bits.

      .sidemenu { background: #9cf;
      width: 13em }

      .sidemenu a { display: block;
      text-decoration: none;
      color: #fff; background: inherit }

      sidemenu a:hover { color: #000; background: #69f }



      Lotta
    • Don - htmlfixit.com
      ... Excellent piece of work. I was playing with it at the same time and came close, but not quite. You nailed it. I posted up a simple demo here:
      Message 2 of 15 , Mar 11, 2004
      • 0 Attachment
        loro wrote:

        >
        > You have to make the links 'display: block' for them to "fill out", so to speak. Then they'll automatically order themselves one under the other too. Ditch the paragraphs and transfer the styles you need to keep to a rule for '.sidemenu a' and so on.
        > I'd make sidemenu an id rather than a class but that's me.
        >
        > Just the important bits.
        >
        > .sidemenu { background: #9cf;
        > width: 13em }
        >
        > .sidemenu a { display: block;
        > text-decoration: none;
        > color: #fff; background: inherit }
        >
        > sidemenu a:hover { color: #000; background: #69f }
        > Lotta

        Excellent piece of work. I was playing with it at the same time and
        came close, but not quite. You nailed it. I posted up a simple demo
        here:
        http://htmlfixit.com/resource/css-snippets/css_menu_highlighted_on_rollover.html

        That has a comment in it that credits your coding. I hope that is okay
        with you :-)
      • John Zeman
        ... and ... demo ... snippets/css_menu_highlighted_on_rollover.html ... Good Lord that was so simple I m embarrassed to admit it never occurred to me to simply
        Message 3 of 15 , Mar 11, 2004
        • 0 Attachment
          --- In ntb-html@yahoogroups.com, "Don - htmlfixit.com" <don@h...>
          wrote:
          > Excellent piece of work. I was playing with it at the same time
          and
          > came close, but not quite. You nailed it. I posted up a simple
          demo
          > here:
          > http://htmlfixit.com/resource/css-
          snippets/css_menu_highlighted_on_rollover.html
          >


          Good Lord that was so simple I'm embarrassed to admit it never
          occurred to me to simply add the width declaration to an A element
          rule in addition to the div.

          And if you move

          width: 13em;

          from

          .sidemenu a:hover

          to

          .sidemenu a

          The full width of each button becomes clickable in IE6 and Netscape 7.

          Both the CSS and the html pass validation by TopStyle and CSE.

          John
        • Don - htmlfixit.com
          ... John, In my example, I left the 13em where it was and then made it width:100%; in both a:hover and a and you are correct it is fully clickable. I also
          Message 4 of 15 , Mar 11, 2004
          • 0 Attachment
            John Zeman wrote:

            > --- In ntb-html@yahoogroups.com, "Don - htmlfixit.com" <don@h...>
            > wrote:
            >
            >>Excellent piece of work. I was playing with it at the same time
            >
            > and
            >
            >>came close, but not quite. You nailed it. I posted up a simple
            >
            > demo
            >
            >>here:
            >>http://htmlfixit.com/resource/css-
            >
            > snippets/css_menu_highlighted_on_rollover.html
            >
            >
            >
            > Good Lord that was so simple I'm embarrassed to admit it never
            > occurred to me to simply add the width declaration to an A element
            > rule in addition to the div.
            >
            > And if you move
            >
            > width: 13em;
            >
            > from
            >
            > .sidemenu a:hover
            >
            > to
            >
            > .sidemenu a
            >
            > The full width of each button becomes clickable in IE6 and Netscape 7.
            >
            > Both the CSS and the html pass validation by TopStyle and CSE.
            >
            > John

            John,

            In my example, I left the 13em where it was and then made it width:100%;
            in both a:hover and a and you are correct it is fully clickable.
            I also added a few other embellishments:
            http://htmlfixit.com/resource/css-snippets/css_menu_highlighted_on_rollover.html
            I posted and then updated it. You may have looked at the older version.
            This one is xhtml strict and css validated. Of course without Lotta
            ... I either would have taken a lot longer or not gotten there at all.

            Quote of the day: simple is often complicated

            Don

            Don
          • John Zeman
            ... all. ... You and me both Don, this isn t the first time she s posted something that s opened my eyes. :) That s what I love about these NoteTab forums,
            Message 5 of 15 , Mar 11, 2004
            • 0 Attachment
              --- In ntb-html@yahoogroups.com, "Don - htmlfixit.com" <don@h...>
              wrote:

              > Of course without Lotta
              > ... I either would have taken a lot longer or not gotten there at
              all.
              >



              You and me both Don, this isn't the first time she's posted something
              that's opened my eyes. :)

              That's what I love about these NoteTab forums, with all members
              combined there's a huge wealth of knowledge on tap in here.

              John
            • John Zeman
              Oh by the way, in your CSS if you copy your .sidemenu a { display: block; text-decoration: none; color: #fff; background: inherit; border-top: 2px solid
              Message 6 of 15 , Mar 11, 2004
              • 0 Attachment
                Oh by the way, in your CSS if you copy your

                .sidemenu a { display: block;
                text-decoration: none;
                color: #fff; background: inherit;
                border-top: 2px solid #333333;
                width: 100%;
                }

                rule and change the .sidemenu a to .sidemenu p you can insert <p>Dead
                Link</p> in between your links to make an inactive (appearing) link
                which I find useful on pages that are active. For example, if I'm on
                my home page, I want the HOME "link" visible but not clickable.

                John
              • Larry Hamilton
                I like this method, but it has thin blue lines that extend beyond the blue button color on Mozilla 1.6. I took out the black top and bottom lines. IE 6 looks
                Message 7 of 15 , Mar 11, 2004
                • 0 Attachment
                  I like this method, but it has thin blue lines that extend beyond the blue
                  button color on Mozilla 1.6. I took out the black top and bottom lines.

                  IE 6 looks perfect.

                  It is really frustrating to figure out a new neat way to do something and
                  one browser or another doesn't like it.

                  I have run into this before with something I was trying several months ago
                  with help from this list.

                  What do we need a table to force the colors to stop where desired? ;-) I
                  didn't look that closely so maybe there is a simple solution that works on
                  Mozilla too?

                  Larry Hamilton

                  ----- Original Message -----
                  From: "John Zeman" <john041650@...>
                  To: <ntb-html@yahoogroups.com>
                  Sent: Thursday, March 11, 2004 5:49 PM
                  Subject: Re: [NH] Highlighting Menu Buttons


                  > --- In ntb-html@yahoogroups.com, "Don - htmlfixit.com" <don@h...>
                  > wrote:
                  >
                  > > Of course without Lotta
                  > > ... I either would have taken a lot longer or not gotten there at
                  > all.
                  > >
                  >
                  >
                  >
                  > You and me both Don, this isn't the first time she's posted something
                  > that's opened my eyes. :)
                  >
                  > That's what I love about these NoteTab forums, with all members
                  > combined there's a huge wealth of knowledge on tap in here.
                  >
                  > John
                • hugo_paulissen
                  A thank-you to Lotta from me as well, John and Don... John: how do you eliminate the extra space after that Dead ... Hugo ... Dead ... on
                  Message 8 of 15 , Mar 12, 2004
                  • 0 Attachment
                    A thank-you to Lotta from me as well, John and Don...

                    John: how do you eliminate the extra space after that <p>Dead
                    > Link</p>? It takes up double height in my browser...

                    Hugo


                    --- In ntb-html@yahoogroups.com, "John Zeman" <john041650@y...> wrote:
                    > Oh by the way, in your CSS if you copy your
                    >
                    > .sidemenu a { display: block;
                    > text-decoration: none;
                    > color: #fff; background: inherit;
                    > border-top: 2px solid #333333;
                    > width: 100%;
                    > }
                    >
                    > rule and change the .sidemenu a to .sidemenu p you can insert
                    <p>Dead
                    > Link</p> in between your links to make an inactive (appearing) link
                    > which I find useful on pages that are active. For example, if I'm
                    on
                    > my home page, I want the HOME "link" visible but not clickable.
                    >
                    > John
                  • John Zeman
                    ... I noticed that too Hugo when I used Don s CSS. When I used my own CSS of which a sample is below, the Dead Link stacks the same as the links. I
                    Message 9 of 15 , Mar 12, 2004
                    • 0 Attachment
                      --- In ntb-html@yahoogroups.com, "hugo_paulissen"
                      <hugopaulissen@s...> wrote:
                      > A thank-you to Lotta from me as well, John and Don...
                      >
                      > John: how do you eliminate the extra space after that <p>Dead
                      > > Link</p>? It takes up double height in my browser...
                      >
                      > Hugo


                      I noticed that too Hugo when I used Don's CSS.

                      When I used my own CSS of which a sample is below, the <P>Dead
                      Link</P> stacks the same as the links. I wondered if the
                      display:block might be causing it since paragraphs are block elements
                      anyway, but removing it didn't seem to make any difference.

                      John

                      body{
                      background:#ffffff;
                      color:#003366;
                      font-family:Verdana,Arial,Helvetica,sans-serif;
                      font-size:100%
                      }
                      .sidemenu a{
                      background:#add8e6;
                      border:2px ridge #a9a9a9;
                      color:#ffffff;
                      display:block;
                      font-size:.85em;
                      font-weight:bold;
                      margin:1px;
                      padding:2px;
                      text-align:center;
                      text-decoration:none;
                      width:13em
                      }
                      .sidemenu a:hover{
                      background:#6699ff;
                      color:#000000
                      }
                      .sidemenu p{
                      background:#add8e6;
                      border:2px ridge #a9a9a9;
                      color:#ffff00;
                      display:block;
                      font-size:.85em;
                      font-weight:bold;
                      margin:1px;
                      padding:2px;
                      text-align:center;
                      text-decoration:none;
                      width:13em
                      }
                    • Don - htmlfixit.com
                      ... First thanks to everyone for a great mind expanding discussion. Check this out! http://www.downloadfreetrial.com/scripts/cgi_perl/cgi_11997.html uncanny
                      Message 10 of 15 , Mar 12, 2004
                      • 0 Attachment
                        John Zeman wrote:
                        > --- In ntb-html@yahoogroups.com, "hugo_paulissen"
                        > <hugopaulissen@s...> wrote:
                        >
                        >>A thank-you to Lotta from me as well, John and Don...
                        >>
                        >>John: how do you eliminate the extra space after that <p>Dead
                        >>
                        >>>Link</p>? It takes up double height in my browser...
                        >>
                        >>Hugo
                        >
                        >
                        >
                        > I noticed that too Hugo when I used Don's CSS.
                        >
                        > When I used my own CSS of which a sample is below, the <P>Dead
                        > Link</P> stacks the same as the links. I wondered if the
                        > display:block might be causing it since paragraphs are block elements
                        > anyway, but removing it didn't seem to make any difference.
                        >
                        > John

                        First thanks to everyone for a great mind expanding discussion.

                        Check this out!
                        http://www.downloadfreetrial.com/scripts/cgi_perl/cgi_11997.html
                        uncanny resemblence to what we are all doing wouldn't you say?

                        They use Lotta's and my tricks combined.

                        I use FireFox as my primary browser. For the most part what goes on
                        Mozilla goes on FireFox. Could one of you send me a screenshot of the
                        extended blue lines in Mozilla 1.6 as I want to fix that issue. I had
                        that in FireFox with the originally proposed code, but don't see it on
                        my page:
                        http://htmlfixit.com/resource/css-snippets/css_menu_highlighted_on_rollover.html

                        As regards the p, it has padding by default, hence the gap you are
                        seeing I suspect. You can class the p tag and assign it no padding to
                        eliminate that I think. I did it once with tr tags.

                        Don
                      • loro
                        ... Don and others, there aren t any tricks involved. This is how it works, how it s meant to work (except the workaround for IE, always need one of those!)
                        Message 11 of 15 , Mar 12, 2004
                        • 0 Attachment
                          Don wrote:
                          >Check this out!
                          >http://www.downloadfreetrial.com/scripts/cgi_perl/cgi_11997.html
                          >uncanny resemblence to what we are all doing wouldn't you say?
                          >
                          >They use Lotta's and my tricks combined.

                          Don and others, there aren't any tricks involved. This is how it works, how it's meant to work (except the workaround for IE, always need one of those!) and how a basic menu of this kind have been done for years. No need to see ourselves as the inventors, I think.

                          >I use FireFox as my primary browser. For the most part what goes on
                          >Mozilla goes on FireFox. Could one of you send me a screenshot of the
                          >extended blue lines in Mozilla 1.6 as I want to fix that issue.

                          There aren't any as far as I can see. I suspect Larry edited a little more than the dark borders. ;-)

                          >As regards the p, it has padding by default, hence the gap you are
                          >seeing I suspect.

                          More often they use margins, not to say always.

                          This is really the same stuff as we have discussed again and again here on the list the latest years. The display property can be used for instance to make a block level element display as an inline level element and vice versa and a lot more, if browsers allow.
                          http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

                          Browsers add basic styling by default. They have to or an unstyled page would be mess. If you think it's fugly - control it. Basically margin/padding for block level elements, font properties for inline elements and both for headings.

                          BTW if someone wants to use menus like this you should also think about how they look unstyled. Without something to separate the links the menu will collapse like a jellyfish on land. Using lists for menus has been popular a while but otherwise a hidden pipe character as separator can work as well.

                          Lotta
                        • Don - htmlfixit.com
                          ... ok then illusions ... call it what you will yes I understand it is as it is meant to be still I am only beginning to get a firm solid grasp on css you on
                          Message 12 of 15 , Mar 12, 2004
                          • 0 Attachment
                            loro wrote:
                            >>They use Lotta's and my tricks combined.
                            >
                            > Don and others, there aren't any tricks involved. This is how it works, how it's meant to work (except the workaround for IE, always need one of those!) and how a basic menu of this kind have been done for years. No need to see ourselves as the inventors, I think.
                            >
                            ok then illusions ... call it what you will
                            yes I understand it is as it is meant to be
                            still I am only beginning to get a firm solid grasp on css
                            you on the other hand have had a grasp and understanding for a long time
                            so I still get many wow moments :-)
                            I often learn from your posts, no matter how simplistic it may see to you

                            > This is really the same stuff as we have discussed again and again
                            here on the list the latest years.

                            Yeah, but it was over my head then when we discussed it previously. Now
                            I almost understand more than half of it.
                            Ironically someone asked about the same question today on another list I
                            belong to. Got to shoot my hand up fast and say ooohh ohhh call on me :-)

                            I got a screenshot in (thanks John). It wasn't my css they were
                            referring to it was the effect of using the p tag in the mix it appears.
                            I went and got a copy of mozilla 1.6 to be sure. It shouldn't
                            typically have any significant difference from the FireFox browser as
                            they are built off the same "mold".

                            Good point about the view in a "simpler" non-styled viewer I suppose.

                            Thanks for the thoughts.

                            Don
                          • calamityjanenow
                            ... Using lists for menus has been popular a while but otherwise a hidden pipe character as separator can work as well. ... Hi, Can someone tell me how to make
                            Message 13 of 15 , Mar 12, 2004
                            • 0 Attachment
                              --- In ntb-html@yahoogroups.com, loro <loro-spam01-@t...> wrote:
                              Using lists for menus has been popular a while but otherwise a hidden
                              pipe character as separator can work as well.
                              >
                              > Lotta

                              Hi,

                              Can someone tell me how to make a pipe character, please? It's the
                              only thing NoteTab pro can't seem to do for me.

                              Karen
                            • Mike Hopkins
                              Karen, pipe is one of the names for the vertical line character which is the up-shift of the backslash. It is also known as broken vertical bar. Back in
                              Message 14 of 15 , Mar 12, 2004
                              • 0 Attachment
                                Karen, "pipe" is one of the names for the vertical line
                                character which
                                is the up-shift of the backslash. It is also known as
                                "broken vertical bar."

                                Back in the old days when most PC programming was in DOS and
                                BASIC
                                the pipe was used to incicate that the result or output of
                                one process
                                should be "piped" (as: sent through the pipe) to be used as
                                input for the next process. That name stuck, generally.

                                The ASCII code for pipe is 0166. Its character code is
                                ¦.

                                Mike Hopkins
                                ironmike-AT-inav.net


                                > Can someone tell me how to make a pipe character, please?
                                It's the
                                > only thing NoteTab pro can't seem to do for me.
                                >
                                > Karen
                              • calamityjanenow
                                Mike, Thanks so much, I always wondered about the name, and I will add a clip right away:) Karen
                                Message 15 of 15 , Mar 12, 2004
                                • 0 Attachment
                                  Mike,
                                  Thanks so much, I always wondered about the name, and I will add a
                                  clip right away:)

                                  Karen
                                  --- In ntb-html@yahoogroups.com, "Mike Hopkins" <ironmike@i...> wrote:

                                  >
                                  > The ASCII code for pipe is 0166. Its character code is
                                  > ¦.
                                  >
                                Your message has been successfully submitted and would be delivered to recipients shortly.