12 Replies Latest reply: Apr 9, 2012 4:03 AM by manojb05 RSS

    Navigation hided?

    manojb05 Community Member

      Dear all,

      I am facing a problem with a navigation its hide with picture transition container,

      please help WEBLINK

        • 1. Re: Navigation hided?
          hans-g. MVP

          Hi,

           

          at the first glance I can see these "file:///" in your source code, like:

           

          <li><a href="file:///Macintosh HD/Users/ManojB/Desktop/CHD/CHD/www.chddevelopers.com/op-leadership-develop.html">Leadership Development</a></li>

           

          Your links are pointing to your hard drive. DW thinks that every file you have linked to is outside the local root folder for the site. It's trying desperately to keep a valid link to those files, but clearly its use of the 'file:///'-type link will not work on the web.

           

          Hans-Günter

          • 2. Re: Navigation hided?
            manojb05 Community Member

            thanks for your feedback. hans how can appear my navigation onmouseover above the picture (entire picture hide my dropdowns)

            • 3. Re: Navigation hided?
              hans-g. MVP

              Hi manoj,

               

              do you think about this?

               

              drMen.jpg

               

              ... 'cause you made it like this it would be normal and ok. If not, please send me a screenshot for my better understanding.

               

              Hans-Günter

              • 4. Re: Navigation hided?
                manojb05 Community Member

                i am checking safari, my entire dropdon below the slide show container

                test.png

                • 5. Re: Navigation hided?
                  hans-g. MVP

                  Hi manoj(?),

                   

                  I'm sorry, I don't use safari. BUT as you can see your website works best in my IE8. My FF - on the other hand - does not display correctly your website. In these cases I got used to look for these little add-ons (left click: open link in IETab), and heureka in my FF it looks great too. The link is: https://addons.mozilla.org/de/firefox/addon/ie-tab/

                   

                  drMenFFTab02.jpg

                  Maybe Chrome has such a feature so too.

                   

                  Hans-Günter

                  • 6. Re: Navigation hided?
                    manojb05 Community Member

                    i wondering i am checked my safari, firefox, dropdown come down, actually i am using MAC, can i do any additional setting for this?

                    Please help me for this?

                    • 7. Re: Navigation hided?
                      martcol Community Member

                      Your page has quite a few issues with the code:

                       

                      http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.newtonclients.com%2Fnewton_ne w_web%2Fcont4.html

                       

                      The validator indicates that the <ul> <li> elements that make up your menu are not properly coded.  I think this will have an impact on your menu but at least, it would be helpful to rule out those problems before looking again at the issue you describe.

                       

                      Martin

                      • 8. Re: Navigation hided?
                        manojb05 Community Member

                        i am rectify the <ul> <li> after that come like this. screenshot is attached for your reference.

                        Please help this. Anyone know how can rectify the error

                         

                         

                        789.jpg

                        • 9. Re: Navigation hided?
                          Nancy O. MVP

                          There is a problem with z-index (stacking order).  The slide show needs a low z-index.  The sub-menus need a higher z-index to remain on top of slides.  

                           

                          In order to apply z-index, your elements must be positioned either relative or absolute.

                          http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

                           

                           

                          ()__()

                          (='.'=)

                          (")_(")

                           

                          Nancy O.

                          Alt-Web Design & Publishing

                          Web | Graphics | Print | Media  Specialists 

                          http://alt-web.com/

                          • 10. Re: Navigation hided?
                            manojb05 Community Member

                            hi nancy thanks for your reply, Please help this my navigation CSS is for your reference

                            i am incorporate the code please check, but something goes wrong nothing because nothing is happend with navigation

                             

                             

                            <style type="text/css">

                            /*!!!!!!!!!!! QuickMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/

                            .qmmc .qmdivider{

                                      display:block;

                                      font-size:1px;

                                      border-width:0px;

                                      border-style:solid;

                                      position:relative;

                                      z-index:9999;

                            }.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{

                                      display:block;

                                      cursor:default;

                                      white-space:nowrap;

                                      position:relative;

                                      z-index:9999;

                            }.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {

                                      position:relative;

                                      zoom:1;

                                      z-index:9999;

                            }.qmmc a, .qmmc li {

                                      float:left;

                                      display:block;

                                      white-space:nowrap;

                                      position:relative;

                                      z-index:9999;

                            }.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{

                                      cursor:default;

                                      display:block;

                                      position:relative;

                                      z-index:9999;

                            }.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {

                                      left:-10000px;

                                      position:absolute;

                                      z-index:9999;

                            }.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

                             

                             

                             

                             

                            /*!!!!!!!!!!! QuickMenu Styles [Please Modify!] !!!!!!!!!!!*/

                             

                             

                             

                             

                                      /* QuickMenu 0 */

                             

                             

                                      /*"""""""" (MAIN) Container""""""""*/

                                      #qm0

                                      {

                                                margin:0px;

                                                border-width:0px;

                                                border-style:solid;

                                                border-color:#B8B8B8;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (MAIN) Items""""""""*/

                                      #qm0 a

                                      {

                                                padding:0px 0px 0px 0px;

                                                background-color:transparent;

                                                color:#444444;

                                                font-family:Tahoma;

                                                font-size:11px;

                                                text-decoration:none;

                                                border-width:0px 0px 0px 0px;

                                                border-style:solid;

                                                border-color:#DFDFDF;

                                                line-height:18px;

                                                text-align: left;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (MAIN) Hover State""""""""*/

                                      #qm0 a:hover

                                      {

                                                background-color:#85C226;

                                                color:#FFFFFF;

                                                text-decoration:underline;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (MAIN) Hover State - (duplicated for pure CSS)""""""""*/

                                      #qm0 li:hover>a

                                      {

                                                background-color:#85C226;

                                                color:#FFFFFF;

                                                text-decoration:underline;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (MAIN) Parent Items""""""""*/

                                      #qm0 .qmparent

                                      {

                                                background-repeat:no-repeat;

                                                background-position:92% 50%;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (MAIN) Active State""""""""*/

                                      body #qm0 .qmactive, body #qm0 .qmactive:hover

                                      {

                                                background-color:#333333;

                                                color:#FFFFFF;

                                                text-decoration:bold;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (SUB) Container""""""""*/

                                      #qm0 div, #qm0 ul

                                      {

                                                padding:5px;

                                                background-color:#333333;

                                                border-width:0px 1px 1px;

                                                border-style:solid;

                                                border-color:#4B4B4B;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (SUB) Items""""""""*/

                                      #qm0 div a, #qm0 ul a

                                      {

                                                padding:1px 20px 0px 5px;

                                                color:#fff;

                                                font-size:11px;

                                                border-width:0px 0px 0px 4px;

                                                border-style:solid;

                                                border-color:#85C226;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (SUB) Hover State""""""""*/

                                      #qm0 div a:hover

                                      {

                                                color:#333333;

                                                text-decoration:none;

                                                border-color:#568C01;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (SUB) Hover State - (duplicated for pure CSS)""""""""*/

                                      #qm0 ul li:hover>a

                                      {

                                                text-decoration:none;

                                                border-color:#3D7678;

                                      }

                             

                             

                             

                             

                                      /*"""""""" (SUB) Active State""""""""*/

                                      body #qm0 div .qmactive, body #qm0 div .qmactive:hover

                                      {

                                                text-decoration:underline;

                                                border-color:#3D7678;

                                      }

                             

                             

                             

                             

                            </style>

                            • 11. Re: Navigation hided?
                              osgood_ MVP

                              manojb05 wrote:

                               

                              Dear all,

                              I am facing a problem with a navigation its hide with picture transition container,

                              please help WEBLINK

                               

                              Hi manoj, you have a couple of issued going on here.

                               

                              First you need to comment out /*  */ the overflow:hidden; attribute applied to the 'header' css selector (see below). You can't use overflow: hidden; if you are using drop down naviagtion as this will hide the drop downs. 

                               

                              #header {

                                  /*overflow: hidden;*/

                              }

                               

                              We now need an alternative way to clear the floated <divs> in the 'header' which overflow: hidden; was previously doing. Go into code view and insert - <br style="clear: both; /> - after the closing 'headerRight' </div> tag and before the closing 'header </div> tag (see below)

                               

                              </div><!-- end headerRight -->

                              <br style="clear: both;" />

                              </div><!-- end header-->

                               

                              Finally add- position: relative; and z-index: 1; to the 'mainAreaRight' css selector (as below)

                               

                              #mainAreaRight {

                                  float: left;

                                  width: 740px;

                                  position: relative;

                                  z-index: 1;

                              }

                              • 12. Re: Navigation hided?
                                manojb05 Community Member

                                Man awesome actually three days I am suffering the CSS problem, finally sort it out, man u r really (CSS & PHP maestro) it’s my experience. Thank you so much….. Any chance u have write any PHP, CSS guide (Books). Please let me know.