5 Replies Latest reply on Sep 14, 2008 2:10 PM by quilterin

    navigation in template based sites: how to show the active page

    quilterin
      I gave each link and each page an id. Using the context selector #link1 #page1 a {color x} works perfektly if the pages are single. If they are fixed to a template where I put this rule to the css-sheet, it doesn't work. Must the rule be written in each pages head? If yes, how can I make this part editable and what text must be written into it?
        • 1. Re: navigation in template based sites: how to show the active page
          Level 7
          > Using the context selector #link1 #page1

          Actually, those are now called 'descendent selectors', and in your case, the
          proper order would be

          #page1 #link1

          (it should be read from right to left - this one selects a#link1 that is
          contained on body#page1)

          > Must the rule be written in each pages head?

          There would be several ways to do this -

          1. Rather than keying your links to an ID in the body tag, just place a
          small embedded stylesheet in the head of each child page that explicitly
          sets the styles for the desired a#link. This stylesheet would go in the
          editable region in the head of the page called "head".
          2. If you REALLY want to use the ID in the body tag, then make the ID
          attribute an editable attribute, which will allow you to change it on each
          page using MODIFY | Template Properties.

          I much prefer method 1 due to its simplicity....


          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "quilterin" <webforumsuser@macromedia.com> wrote in message
          news:gagbtc$g1k$1@forums.macromedia.com...
          >I gave each link and each page an id. Using the context selector #link1
          >#page1
          > a {color x} works perfektly if the pages are single. If they are fixed to
          > a
          > template where I put this rule to the css-sheet, it doesn't work. Must the
          > rule
          > be written in each pages head? If yes, how can I make this part editable
          > and
          > what text must be written into it?
          >

          • 2. Re: navigation in template based sites: how to show the active page
            Level 7

            > I much prefer method 1 due to its simplicity....

            Another, even simpler, method is to use a javascript to automatically
            highlight the current page menu item (and parent menu items as well if
            desired). That way you need add absolutely nothing to your Child page's
            html body. Simply add it once to your template and you are done.

            I offer two DW Extensions that do this for you.

            A free one and a more capable commercial one:

            http://divahtml.com/products/divaGPS/current_menu_location.php

            The free version might well be all you need.

            --


            E. Michael Brandt

            www.divahtml.com
            www.divahtml.com/products/scripts_dreamweaver_extensions.php
            Standards-compliant scripts and Dreamweaver Extensions

            www.valleywebdesigns.com/vwd_Vdw.asp
            JustSo PictureWindow
            JustSo PhotoAlbum, et alia

            --
            • 3. Re: navigation in template based sites: how to show the active page
              quilterin Level 1
              "....1. Rather than keying your links to an ID in the body tag, just place a
              small embedded stylesheet in the head of each child page that explicitly
              sets the styles for the desired a#link. This stylesheet would go in the
              editable region in the head of the page called "head"...."

              How must this stylesheet look like?

              And if I want to change anything, I must change it manually in each single Page?


              "...make the ID attribute an editable attribute, which will allow you to change it on each
              page using MODIFY | Template Properties".

              That is what I did and as I said, it works with the single pages, after I took them off the template.

              Did I get it right that it won't work at all in the template css-stylesheet or is there simply a special line where these new descendet selectors must be placed?


              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "quilterin" <webforumsuser@macromedia.com> wrote in message
              news:gagbtc$g1k$1@forums.macromedia.com...
              >I gave each link and each page an id. Using the context selector #link1
              >#page1
              > a {color x} works perfektly if the pages are single. If they are fixed to
              > a
              > template where I put this rule to the css-sheet, it doesn't work. Must the
              > rule
              > be written in each pages head? If yes, how can I make this part editable
              > and
              > what text must be written into it?
              >




              • 4. Re: navigation in template based sites: how to show the active page
                Level 7
                > And if I want to change anything, I must change it manually in each single
                > Page?

                Yes, but you'd have to do it that way anyhow. Unless you use something like
                what E. Michael Brandt is suggesting.

                > That is what I did and as I said, it works with the single pages, after I
                > took
                > them off the template.

                You are confused. Editable attributes only work with template controlled
                pages. If you remove the page from template control, then you will no
                longer have this function.

                > How must this stylesheet look like?

                <!-- InstanceBeginEditable name="head">
                <style type="text/css">
                a#link1 { color:blue; background-color:orange; }
                </style>
                <!-- InstanceEndEditable -->
                </head>

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "quilterin" <webforumsuser@macromedia.com> wrote in message
                news:gaglt8$q9j$1@forums.macromedia.com...
                > "....1. Rather than keying your links to an ID in the body tag, just
                > place a
                > small embedded stylesheet in the head of each child page that explicitly
                > sets the styles for the desired a#link. This stylesheet would go in the
                > editable region in the head of the page called "head"...."
                >
                > How must this stylesheet look like?
                >
                > And if I want to change anything, I must change it manually in each single
                > Page?
                >
                >
                > "...make the ID attribute an editable attribute, which will allow you to
                > change it on each
                > page using MODIFY | Template Properties".
                >
                > That is what I did and as I said, it works with the single pages, after I
                > took
                > them off the template.
                >
                > Did I get it right that it won't work at all in the template
                > css-stylesheet or
                > is there simply a special line where these new descendet selectors must be
                > placed?
                >
                >
                > --
                > Murray --- ICQ 71997575
                > Adobe Community Expert
                > (If you *MUST* email me, don't LAUGH when you do so!)
                > ==================
                > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                > ==================
                >
                >
                > "quilterin" <webforumsuser@macromedia.com> wrote in message
                > news:gagbtc$g1k$1@forums.macromedia.com...
                > >I gave each link and each page an id. Using the context selector #link1
                > >#page1
                > > a {color x} works perfektly if the pages are single. If they are fixed
                > > to
                > > a
                > > template where I put this rule to the css-sheet, it doesn't work. Must
                > > the
                > > rule
                > > be written in each pages head? If yes, how can I make this part editable
                > > and
                > > what text must be written into it?
                > >
                >
                >

                >
                >
                >

                • 5. Re: navigation in template based sites: how to show the active page
                  quilterin Level 1
                  Thanks, everything works now perfectly!