13 Replies Latest reply on Sep 19, 2013 4:42 PM by ALsp

    Center navigation content

    Chloé_L

      How can I center my nav content?

       

      http://lave0134.site44.com/dsn1543/exercise-2

        • 1. Re: Center navigation content
          Jon Fritz II Adobe Community Professional & MVP

          In your css...

           

          Give the <nav> element the gray background-color

          Give the <ul> a width of about 600px and a margin:auto

           

          That should do the trick.

          • 2. Re: Center navigation content
            Chloé_L Level 1

            Thank you! Now, why did my nav bar shrank?

            • 3. Re: Center navigation content
              Jon Fritz II Adobe Community Professional & MVP

              It didn't. The <ul> filling it up did. That's why you need to add the background color to the <nav> itself.

              • 4. Re: Center navigation content
                ALsp Level 4

                Centering a navbar using a fixed width and auto margins is neither a good idea nor a precise solution. You want to use inline blocks. Your code:

                 

                Forum software would not include raw code. Sorry. I'm outta here

                 

                The unique CSS you would add:

                 

                nav { text-align: center; } nav ul { display: inline-block; }

                 

                Also, this meta tag is not good:

                 

                  meta name="viewport" content="width=device-width,initial-scale=1"

                 

                It was probably used because the author of the template or tutorial you used likely did not really understand the concept and pulled it from someone else's page or tutorial . Use this instead as it will prevent instability when a mobile device's user switches orientations:

                 

                meta name="viewport" content="width=device-width"

                 

                That should do you.

                 

                Al Sparber - PVII

                Projectseven.com

                The Finest Dreamweaver Menus | Galleries | Widgets

                Since 1998

                 

                Message was edited by: Al Sparber. This forum software is the absolute worst and I apologize but it is just too hard to include code. Adobe's forum is as poorly coded as its web site and its programs.

                • 5. Re: Center navigation content
                  Nancy OShea Adobe Community Professional & MVP

                  Hi Al,

                  Pasting code works best in the advanced editor. 

                  Click on blue Chevrons >> Syntax Highlighting > Plain.

                   

                  Nancy

                  1 person found this helpful
                  • 6. Re: Center navigation content
                    ALsp Level 4

                    Thanks Nancy, but too much work. Adobe needs to make it easy for folks.

                    It should be obvious and apparent. I'll just continue to use my email

                    client and forgo code examples.

                    • 7. Re: Center navigation content
                      Chloé_L Level 1

                      Thank you. I have another problem. When I reduce the size of my window, the 3 <li> are all one on top of another.

                      • 8. Re: Center navigation content
                        Rik Ramsay Level 4

                        Al Sparber wrote:

                        Also, this meta tag is not good:

                          meta name="viewport" content="width=device-width,initial-scale=1"

                        It was probably used because the author of the template or tutorial you used likely did not really understand the concept and pulled it from someone else's page or tutorial

                         

                        Al,

                        I think this would be a good time to point out that your comment seems a little out of date, at least from what has been discussed recently over the web. The preferred approach is indeed to keep the "initial-scale=1", which is backed up by several folks, not least the writers of HTML5 boilerplate who added it back in last week.

                         

                        https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/CHANGELOG.md

                        https://gist.github.com/andreasbovens/3130253

                        https://github.com/Automattic/_s/issues/285

                        http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewpo rt-meta-tag/

                        • 9. Re: Center navigation content
                          ALsp Level 4

                          Sorry, Rik. They are wrong. Absolutely wrong. We write our own CSS. We

                          do not follow the fashions The initial scale attribute is actually

                          what's out of date. Rather than arguing the words, grab some mobile

                          devices and do some testing. You will find that changing orientations

                          will not be smooth. We've been doing this for quite some time and have

                          done all of the testing.

                           

                          --

                          Al Sparber - PVII

                          http://www.projectseven.com

                          The Finest Dreamweaver Menus | Galleries | Widgets

                          Since 1998

                          • 10. Re: Center navigation content
                            Rik Ramsay Level 4

                            Well, that was actually why I went to find the 'truth' because I have been using "initial-scale=1" with no issues for over a year and your comment made me re-think it. Having tested again (granted only on iOS phone/pad right now), and thoroughly researched, I will stick with my existing code.

                             

                            Ben Frain wrote: http://benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/

                            Set initial scale

                            Another common parameter is to set the initial scale. This keeps the page displaying correctly on orientation change.

                            <meta name="viewport" content="width=device-width, initial-scale=1.0">

                             

                            There was a bug up until iOS6 that meant a page would zoom on orientation change and it was necessary to include a JS solution to fix it. Jeremy Keith detailed it and Scott Jehl released a fix. Nowadays, in iOS 6+ the only time you’ll get wonkiness when changing orientation is when you have an element set with an errant width extending an invisible box somewhere.

                            • 11. Re: Center navigation content
                              ALsp Level 4

                              A simple test, re-conducted 2 minutes ago shows clearly that on iOS,

                              with initial-scale=1 used, loading a page in portrait mode and then

                              switching to landscape mode will cause the page to zoom. Of course,

                              that's with a well-written responsive style sheet being used, too.

                               

                              I'm glad you are happy with your truth, though - and if a thorough test

                              yields the results you want, then your truth is true - for you

                               

                              --

                              Al Sparber - PVII

                              http://www.projectseven.com

                              The Finest Dreamweaver Menus | Galleries | Widgets

                              Since 1998

                              • 12. Re: Center navigation content
                                Rik Ramsay Level 4

                                I appreciate you testing again, and it's an interesting point. I'm not saying one is right or wrong but clearly my testing differs from yours as on an iPhone 4 running iOS6 and an iPhone 5 running iOS7, initial-scale=1 doesn't scale the pages for me when switching to landscape (using Safari) - tested using my own page and also BostonGlobe.com. I compared these to your website and see no difference.

                                 

                                I'm glad you are happy with your truth, though - and if a thorough test yields the results you want, then your truth is true - for you

                                Agreed. Same for you - if you find with your extensive testing that not including initial-scale=1 works for you, then that's all that matters - but it doesn't mean using it is "wrong. Absolutely wrong."

                                • 13. Re: Center navigation content
                                  ALsp Level 4

                                  With initial scale set to 1, the page will zoom upon changing

                                  orientation. Rather than beating a dead horse, it should be evident that

                                  without initial-scale set at all nothing bad happens - so , at worst (or

                                  best, depending on perspective) including initial scale does not really

                                  accomplish anything so there is no reason to add it. But this kind of

                                  thing happens a lot in our test groups. There are so many people being

                                  tested that anomalies occur or someone misses something because it is so

                                  subtle.

                                   

                                  --

                                  Al Sparber - PVII

                                  http://www.projectseven.com

                                  The Finest Dreamweaver Menus | Galleries | Widgets

                                  Since 1998