7 Replies Latest reply on Aug 12, 2006 3:55 PM by PrimaDesign

    CSS Navigation in a Template

    PrimaDesign
      Dear Support Team & members:

      This is my first message in this forum and need some help and advice CSS and DW8 Template.

      I have built my website with CSS navigation menu and layout and it is running perfectly with no errors W3C validation tools, but I need to improve it to better way to ease the maintainance of the website. I built it with template with editible regions : top navigation menu and the two colunms content www.AtWebSystems.co.uk . my question is as follow:

      if I want to add a new link to my navigation menu then I have to add a link to all other pages manually because the navigation menu is an editible region in the template. now if I change it to none editible region then there will be one problem that I can't set the menu item to active state (higlighted). After searching the forum and website to solve the problem I found that you can do that by putting an id to the body tag for the active page but in my case my body tag is a none editable region. Would you please give some advice or any reference or resource for this problem. please note that there is a solution by using Java Script to set active state! I wand to avoid Java Script and I want only use css ids! is it possible? Thank for your time and advice. I hope you understand what I mean :)

      @ Web Systems

      www.AtWebSystems.co.uk
        • 1. Re: CSS Navigation in a Template
          Level 7
          > if I want to add a new link to my navigation menu then I have to add a
          > link to
          > all other pages manually because the navigation menu is an editible region
          > in
          > the template.

          This is just an error on your part in designing the page. If nothing else
          is in the template non-editable regions, it should be the navigation.

          You can solve this problem by a) making the navigation region non-editable
          (i.e., removing the editable region), and b) adding a unique identifier to
          each button's <a> tag, e.g.,

          <a id="button1">...
          <a id="button2">...

          Then you can just put a simple embedded stylesheet in the head of each child
          page that specifies the down state for the desired button, e.g.,

          <style type="text/css">
          a#button47 { styles }
          </style>

          and you'll be golden.

          There are many ways to skin this cat - some much more complex than
          others....

          --
          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
          ==================


          "PrimaDesign" <webforumsuser@macromedia.com> wrote in message
          news:ebieac$d1m$1@forums.macromedia.com...
          > Dear Support Team & members:
          >
          > This is my first message in this forum and need some help and advice CSS
          > and
          > DW8 Template.
          >
          > I have built my website with CSS navigation menu and layout and it is
          > running
          > perfectly with no errors W3C validation tools, but I need to improve it to
          > better way to ease the maintainance of the website. I built it with
          > template
          > with editible regions : top navigation menu and the two colunms content
          > http://www.AtWebSystems.co.uk . my question is as follow:
          >
          > if I want to add a new link to my navigation menu then I have to add a
          > link to
          > all other pages manually because the navigation menu is an editible region
          > in
          > the template. now if I change it to none editible region then there will
          > be one
          > problem that I can't set the menu item to active state (higlighted). After
          > searching the forum and website to solve the problem I found that you can
          > do
          > that by putting an id to the body tag for the active page but in my case
          > my
          > body tag is a none editable region. Would you please give some advice or
          > any
          > reference or resource for this problem. please note that there is a
          > solution by
          > using Java Script to set active state! I wand to avoid Java Script and I
          > want
          > only use css ids! is it possible? Thank for your time and advice. I hope
          > you
          > understand what I mean :)
          >
          > @ Web Systems
          >
          > http://www.AtWebSystems.co.uk
          >


          • 2. Re: CSS Navigation in a Template
            PrimaDesign Level 1
            Thanks Murray for your help and quick reply u r really ACE. you mention there are other ways to design for my website as an example. could you please give me some guide line that will help to design a website the right way. I perefer not to use any scripting language. I think I like to use CSS to build website (no table no java etc). and what happen if i want to use contribute to maintain my website? will I be able to use these guide line (method) or a diffrent one. Thanks again for your help.

            Junior designer
            @ Web Systems
            www.AtWebSystems.co.uk
            • 3. Re: CSS Navigation in a Template
              Level 7
              I was referring to the various methods for indicating 'breadcrumbs' by
              setting the style of the navigation buttons.

              To make recommendations about your site, I would have to see what you are
              wanting to do.

              --
              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
              ==================


              "PrimaDesign" <webforumsuser@macromedia.com> wrote in message
              news:ebj1lr$5h4$1@forums.macromedia.com...
              > Thanks Murray for your help and quick reply u r really ACE. you mention
              > there
              > are other ways to design for my website as an example. could you please
              > give me
              > some guide line that will help to design a website the right way. I
              > perefer not
              > to use any scripting language. I think I like to use CSS to build website
              > (no
              > table no java etc). and what happen if i want to use contribute to
              > maintain my
              > website? will I be able to use these guide line (method) or a diffrent
              > one.
              > Thanks again for your help.
              >
              > Junior designer
              > @ Web Systems
              > http://www.AtWebSystems.co.uk
              >


              • 4. Re: CSS Navigation in a Template
                PrimaDesign Level 1
                Thanks Murray. Lets take my client's website as case study Middle East Legal Services
                I want to redesign it with the same layout and look & feel. I used CSS menu & layout. again the same story that i expaind in my previous topic with active menu items. I want to redesign it in away that will be able to add a new lawyers and it is pages without the need to update every single page with new lawyer and its highlighed menu item. at the moment the left sidebar is an editable region with the same problem that i mentioned in my previous topics. can u please advice me or guide me to the right design method with CSS (no java and no table) also might use contrbute in future for mentainance. Thanks again

                @Web Systems
                • 5. Re: CSS Navigation in a Template
                  Level 7
                  The navigation belongs in a server-side include, really, no matter how
                  small/large your site is. That way, you update the include file, upload the
                  include file, and the changes automatically appear in all pages.

                  Just use my method of the simple embedded stylesheet in the head of the page
                  and you'll be golden.

                  If you put this in the head of the template page -

                  <style type="text/css">
                  a#buttonx { down-styles }
                  </style>

                  and add it to all exsiting child pages, then you only need to change
                  a#buttonx to a#button4 or whatever button you want highlighted on that page.
                  Plus, all new pages will get that stylesheet when you create them.

                  --
                  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
                  ==================


                  "PrimaDesign" <webforumsuser@macromedia.com> wrote in message
                  news:ebj7sk$ci2$1@forums.macromedia.com...
                  > Thanks Murray. Lets take my client's website as case study
                  > http://www.iraqilawconsultant.com
                  > I want to redesign it with the same layout and look & feel. I used CSS
                  > menu &
                  > layout. again the same story that i expaind in my previous topic with
                  > active
                  > menu items. I want to redesign it in away that will be able to add a new
                  > lawyers and it is pages without the need to update every single page with
                  > new
                  > lawyer and its highlighed menu item. at the moment the left sidebar is an
                  > editable region with the same problem that i mentioned in my previous
                  > topics.
                  > can u please advice me or guide me to the right design method with CSS (no
                  > java
                  > and no table) also might use contrbute in future for mentainance. Thanks
                  > again
                  >
                  > @Web Systems
                  >
                  >


                  • 6. Re: CSS Navigation in a Template
                    PrimaDesign Level 1
                    Thanks murray for all your help and advice. I followed you method and it works perfect with embeded style. I am not doing any include file in server as I am beginner and will learn this later. Just one question :

                    as you notice from my client website Middle East Legal Services I have side navigation menu with menu list and sub list i.e Services have sub list. what I want do is I want to hide this sublist in some pages agian will use the same method CSS. is it possible to be done by hiding the div of that sub list and embed the style for On / Off on the page i want to add? I am sure there is a way using only CSS. here is my html example

                    <div id="sidenavcontainer">

                    <ul id="sidenavlist">
                    <li ><a href="../index.html" id="home">Home</a></li>

                    <li><a href="../profile.html" id="profile">Profile</a></li>

                    <li><a href="../services.html" id="services">Services</a>
                    <ul id="subnavlist1">
                    <li><a href="../services.html" id"service_1">Doing Business in the Middle East</a></li>
                    <li><a href="../services.html" id="service_2">International Tendering</a></li>
                    <li><a href="../services.html" id="service_3">Expert Advice &amp; Preparation of contracts</a></li >
                    <li><a href="../services.html" id="service_4">Iraq Commercial Private Debts / Claims' Preparation &amp; Litigation</a></li>
                    <li><a href="../services.html" id="service_5">Arbitration &amp; Dispute</a></li>
                    <li><a href="../services.html" id="service_6">Ancillary Services</a></li>
                    </ul>
                    </li>

                    <li><a href="../lawyers.html" id="keylawyers">Key Lawyers</a>
                    <ul id="subnavlist2">
                    <li><a href="../majid.html" id="majid">Saleh Majid</a></li
                    >
                    <li><a href="../aldoori.html" id="aldoori">Dr. M. Jaber Al Doori</a></li
                    >
                    <li><a href="../mahmoud.html" id="mahmoud">Shakir Mahmoud</a></li
                    >
                    <li><a href="../yousif.html" id"yousif">Basil Yousif</a></li
                    >
                    <li><a href="../albitar.html" id"albitar">Fahed Al Bitar</a></li
                    >
                    <li><a href="../Kordt.html" id"kordt">Mr. Werner Kordt</a></li
                    >
                    <li><a href="../kilimnik.html" id"kilimnik">Ken Kilimnik</a></li
                    >
                    <li><a href="../lenzen.html" id="lenzen">Faris Lenzen</a></li
                    >
                    </ul>
                    </li>
                    <li><a href="../publications.html" id="publications">Publications</a></li>
                    <li><a href="../contact.html" id="contact">Contact</a></li>
                    </ul>
                    </div> end of sidenavcontainer

                    if I want to toggle On / Off the subnavlist1 (Services sublist) in some pages that I create from template how can I do this with embeded style? is it possible to hide a tag? Thanks again for your help and advice

                    @WebSystems
                    • 7. Re: CSS Navigation in a Template
                      PrimaDesign Level 1
                      quote:

                      Originally posted by: PrimaDesign
                      Thanks murray for all your help and advice. I followed you method and it works perfect with embeded style. I am not doing any include file in server as I am beginner and will learn this later. Just one question :

                      as you notice from my client website Middle East Legal Services I have side navigation menu with menu list and sub list i.e Services have sub list. what I want do is I want to hide this sublist in some pages agian will use the same method CSS. is it possible to be done by hiding the div of that sub list and embed the style for On / Off on the page i want to add? I am sure there is a way using only CSS. here is my html example

                      <div id="sidenavcontainer">

                      <ul id="sidenavlist">
                      <li ><a href="../index.html" id="home">Home</a></li>

                      <li><a href="../profile.html" id="profile">Profile</a></li>

                      <li><a href="../services.html" id="services">Services</a>
                      <ul id="subnavlist1">
                      <li><a href="../services.html" id"service_1">Doing Business in the Middle East</a></li>
                      <li><a href="../services.html" id="service_2">International Tendering</a></li>
                      <li><a href="../services.html" id="service_3">Expert Advice &amp; Preparation of contracts</a></li >
                      <li><a href="../services.html" id="service_4">Iraq Commercial Private Debts / Claims' Preparation &amp; Litigation</a></li>
                      <li><a href="../services.html" id="service_5">Arbitration &amp; Dispute</a></li>
                      <li><a href="../services.html" id="service_6">Ancillary Services</a></li>
                      </ul>
                      </li>

                      <li><a href="../lawyers.html" id="keylawyers">Key Lawyers</a>
                      <ul id="subnavlist2">
                      <li><a href="../majid.html" id="majid">Saleh Majid</a></li
                      >
                      <li><a href="../aldoori.html" id="aldoori">Dr. M. Jaber Al Doori</a></li
                      >
                      <li><a href="../mahmoud.html" id="mahmoud">Shakir Mahmoud</a></li
                      >
                      <li><a href="../yousif.html" id"yousif">Basil Yousif</a></li
                      >
                      <li><a href="../albitar.html" id"albitar">Fahed Al Bitar</a></li
                      >
                      <li><a href="../Kordt.html" id"kordt">Mr. Werner Kordt</a></li
                      >
                      <li><a href="../kilimnik.html" id"kilimnik">Ken Kilimnik</a></li
                      >
                      <li><a href="../lenzen.html" id="lenzen">Faris Lenzen</a></li
                      >
                      </ul>
                      </li>
                      <li><a href="../publications.html" id="publications">Publications</a></li>
                      <li><a href="../contact.html" id="contact">Contact</a></li>
                      </ul>
                      </div> end of sidenavcontainer

                      if I want to toggle On / Off the subnavlist1 (Services sublist) in some pages that I create from template how can I do this with embeded style? is it possible to hide a tag? Thanks again for your help and advice

                      @WebSystems


                      I think I figured it out by using display property i.e

                      #sidenavcontainer ul#subnavlist1 {display: none;} OFF
                      #sidenavcontainer ul#subnavlist2 {display: block;} ON

                      is this method correct? which browser does not support display property

                      Thanks Murray for all your help