13 Replies Latest reply: Oct 22, 2012 11:37 AM by thetrickster888 RSS

    CSS Issues

    Asad 6SM Community Member
    Asad 6SM Oct 1, 2012 2:43 AM

      Hi All

       

      Hope everyone had a nice weekend.

       

      I think I am being a bit blind or maybe just plain daft but I cant seem to figure out where a certain bit of CSS is coming from. If you have a look at the following page http://www.121systems.com/asad-test and hover over the menu I will explain:

       

      The menu is supposed to be 160 Wide but for some reason there is css for witdh:10em; and i cant figure out where this is coming from. As soon as i disable it in firebug it works fine, but otherwise the menu is restricted to 10em.

       

      Also, when you hover over the primary menu, i would like the secondary menu to appear within the page, so it should almost shift up a little when it appears. Is there a way of doing this?

       

      Any help would be appreciated.

       

      Many thanks

       

       

      Asad Ali

        • 1. Re: CSS Issues
          Mihai_Tica Employee Hosts
          Mihai_Tica Oct 1, 2012 4:11 AM (in response to Asad 6SM)

          Hey,

           

          The property is defined inline, open up the source of the page and search for "#nav_1384086 a" - http://screencasteu.worldsecuresystems.com/Mihai/2012-10-01_1406.png

           

          I believe those inline properties are outputted by the module tag itself so there is no way of individually removing the inline CSS however, one way to make sure your width: 160px property takes precedence over the system one would be to use the !important property. The other alternative would be to define a more specific selector for your property, take a look at this link for more info on CSS specificity - http://www.w3.org/TR/CSS2/cascade.html#specificity

           

          Regarding the second part of the question can you please ellaborate a bit?

           

          Thanks,

          Mihai.

          • 2. Re: CSS Issues
            Asad 6SM Community Member
            Asad 6SM Oct 1, 2012 4:27 AM (in response to Mihai_Tica)

            Hi Mihai

             

            Thank you for your help. I have resolved the CSS issue with the !important code.

             

            When you hover over the "Products / Services" menu option the secondary menu dissapears of the bottom of the page, i would like the secondary menu to appear to the right but slightly higher. (Image Two)

             

            Image One

            Image one.png

             

            Image Two (appears relative to the primary menu so it doesnt fall off the page and appears clearly without the user having to scroll down to see the rest of the menu)

            Image two.png

             

            Many thanks for your help.

             

            Asad Ali

            • 3. Re: CSS Issues
              Mihai_Tica Employee Hosts
              Mihai_Tica Oct 1, 2012 4:38 AM (in response to Asad 6SM)

              Try this - add a margin property that will override this one - http://screencasteu.worldsecuresystems.com/Mihai/2012-10-01_1436.png

               

              Here is how it looks after changing it to -200px - http://screencasteu.worldsecuresystems.com/Mihai/2012-10-01_1438.swf

              • 4. Re: CSS Issues
                Asad 6SM Community Member
                Asad 6SM Oct 1, 2012 4:12 PM (in response to Mihai_Tica)

                Hi Mihai

                 

                Would you be kind enought o take a look at http://www.121systems.com/asad-test and give me some pointers as to where I am going wrong. I needed the menu to apepar in front of everything so I put a position:absolute in. This now makes my secondary menu dissapear and only displays one item. The moment I remove my absoulte positioning the menu appears but it goes behind everything. This the causes the bacground to fade and become transparent which makes the menu look messy.

                 

                I would appreciate yoru help and guidance.

                 

                Many thanks

                 

                Asad

                • 5. Re: CSS Issues
                  Mihai_Tica Employee Hosts
                  Mihai_Tica Oct 2, 2012 2:10 AM (in response to Asad 6SM)

                  To control the order in which the elements are displayed (which one is displayed on top of the other) try using the z-index property - http://www.w3schools.com/cssref/pr_pos_z-index.asp

                   

                  This will allow you to specify which items are displayed on top of other items should they be in the same position.

                  • 6. Re: CSS Issues
                    Asad 6SM Community Member
                    Asad 6SM Oct 8, 2012 1:51 AM (in response to Mihai_Tica)

                    Hi Mihai

                     

                    How was your weekend?

                     

                    I have input a Z index but the sub menu only shows one menu item at a time now so i am even more lost! please help, I have no idea what is causing this. www.121systems.com/asad-test

                     

                    Thank you.

                    • 7. Re: CSS Issues
                      Mihai_Tica Employee Hosts
                      Mihai_Tica Oct 8, 2012 4:26 AM (in response to Asad 6SM)

                      Hey Asad,

                       

                      Busy weekend unfortunately :|

                       

                      Take a look at the page now, is this closer to what you need?

                       

                      Hope this helps,

                      Mihai.

                      • 8. Re: CSS Issues
                        Asad 6SM Community Member
                        Asad 6SM Oct 8, 2012 4:30 AM (in response to Mihai_Tica)

                        I can imagine the weekend was busy, I know Adbobe had a few problems last week and it looked like you had some issues over the weekend too. Bad times.

                         

                        That looks spot on, all i need to do now is split the secondary menus with 2px on the bottom and we are there, but I think I can manage that =)

                         

                        Thanks you so much for your help, I really appreciate it.

                         

                        p.s I hope your next weekend is not as busy.

                        • 9. Re: CSS Issues
                          thetrickster888 Community Member
                          thetrickster888 Oct 8, 2012 8:56 AM (in response to Asad 6SM)

                          On your submenu that flys out to the right, you have a 2 pixel margin underneath each menu item and it makes using the subnav pretty difficult.  Since there's a 2px margin on the bottom when you start hovering over the submenu to choose your option, if you pass over that 2px space on any of the menu items the menu disappears because you are not hovering over the menu anymore, but instead, you are hovering over whatever is behind that flyout nav instead.

                           

                          Go in to your http://www.121systems.com/stylesheets/121-systems-6smv1.css file on line 316px and change:

                           

                          margin: 0 0 2px 80px;

                           

                          to:

                           

                          margin: 0 0 0 80px;

                           

                          Maybe your design called for those spaces in the subnav but the interaction requirements of a pop up navigation like that requires that the whole menu be uniform so you can easily scroll up and down the submenu to find the right choice.

                          • 10. Re: CSS Issues
                            Asad 6SM Community Member
                            Asad 6SM Oct 9, 2012 9:29 AM (in response to thetrickster888)

                            Hi Trickster

                             

                            Thanks for your feedback. I did want a bit of spacing between the sub menu items, but it doesnt look like this is possible.

                             

                            Thanks you for your feedback though

                            • 11. Re: CSS Issues
                              Asad 6SM Community Member
                              Asad 6SM Oct 22, 2012 7:59 AM (in response to Mihai_Tica)

                              Hi Mihai,

                               

                              i am sorry to be such a pain, but i have realised i made a huge mistake to put it lightly. I created an all CSS menu only now to realise this is not SEO friendly and Google is not seeing the hierachy.

                               

                              I have created a copy of the menu and put it onto another template as you can see below, I have changed menu type in the menu settings so now it is CSS (HTML only). Now i have changed it, its doing the following http://www.121systems.com/asad-test and I have no idea how to resolve it. I am worried if I start messing with the css while its live it will change it on the live site which will look really bad.

                               

                              Can you offer any help around this?

                              • 12. Re: CSS Issues
                                thetrickster888 Community Member
                                thetrickster888 Oct 22, 2012 11:30 AM (in response to Asad 6SM)

                                Yout original menu that is setup at http://121systems.com/ is perfectly

                                fine for SEO purposes.  If Google isn't recognizing the hierarchy that's

                                because it's really looking at your sitemap.xml file for the hierarchy of

                                the content. I would make sure that your sitemap reflects the hierarchy at

                                http://121systems.com/sitemap.xml.

                                 

                                To hide pages (like your test page) from this sitemap, goto the page in the

                                Admin area and tick the button "hide from search" which will hide the page

                                from search results and also keeps it from being added to the sitemap.xml

                                file. If you want a page nested under a parent page, make sure you do that

                                for each page in the admin by choosing the parent folder.

                                 

                                The CSS only navigation does not really dictate hierarchy, its really just

                                to show search engines what the main important links are.

                                 

                                thetrickster

                                • 13. Re: CSS Issues
                                  thetrickster888 Community Member
                                  thetrickster888 Oct 22, 2012 11:37 AM (in response to Asad 6SM)

                                  This is thetrickster, not Warren Hart. I'm replying from my email since

                                  logging into the forum isn't working for me but when I replied by email

                                  before it says that Warren Hart made the comment, instead of me,

                                  thetrickster.  I don't mean ot impersonate anyone, I'm just replying via

                                  email and it got messed up.

                                   

                                  thetrickster