4 Replies Latest reply: Aug 5, 2011 4:54 AM by Manoj Manohar Tambat RSS

    How to center my layout and text?

    sarahpeller Community Member

      I just placed my first Spry menu bar into a website that I am working on. I placed it in a container and it helped to center it with the table above, but now the whole layout is stuck to the left side of the page. I had centered my table just fine earlier. I don't know what is forcing the whole thing to the left. Any ideas?

       

      Another question -- I centered the text in my spry menu by editing the CSS under ul.MenuBarHorizontal li and typed in "text-align: center;". It seemed to work on the "Live view" mode in DW, but once I viewed it in Firefox, the text was aligned left again. I'm not sure what's going on here...

       

      The site that I'm working on can be seen here: http://www.sarahpellerdesign.com/shannon/index5.html

       

      Hope someone can help! Thanks!

        • 1. Re: How to center my layout and text?
          Ben Pleysier CommunityMVP

          Have a look at the following. Just copy and paste in a new document and view it in the browser of choice.

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="ISO-8859-1">
          <title>Shannon Ryan - Harpist, Songstress, Healing Arts Practitioner</title>
          <meta name="Keywords" content="harpist, songstress, healing, arts, practitioner, healing arts, shannon ryan, shannon, ryan, energy medicine, healer, harp">
          <meta name="Description" content="Shannon Ryan is a Harpist, Songstress and Healing Arts Practitioner working in Port Townsend Washington">
          <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
          <style>
          body {
               width: 950px;
               margin: auto;
               color: #666;
               font: 14px Arial, Helvetica, sans-serif;
          }
          #header {
               height: 632px;
               background: url(http://www.sarahpellerdesign.com/shannon/images/homepage4.jpg) no-repeat left top;
          }
          #header h1 {
               color: transparent;
          }
          #nav {
               height: 25px;
               background: #8CDBC3 url(http://www.sarahpellerdesign.com/shannon/images/menu.gif) left 30px;
          }
          #nav ul.MenuBarHorizontal {
               font: 90% Verdana, Geneva, sans-serif;
          }     
          #nav ul.MenuBarHorizontal li {
               width: auto;
          }
          #nav ul.MenuBarHorizontal ul {
               width: auto;
          }
          #nav ul.MenuBarHorizontal ul li {
               display: block;
               float: none;
               width: auto;
               white-space: nowrap;
               border-bottom: solid 1px #EEE;
          }
          #nav ul.MenuBarHorizontal a {
               background-color: transparent;
               color: #FFF;
               padding: 0.5em 2.5em;
          }
          #nav ul.MenuBarHorizontal ul a {
               background-color: #8cdbc3;
          }
          #nav ul.MenuBarHorizontal a.MenuBarItemSubmenu,
          #nav ul.MenuBarHorizontal ul a.MenuBarItemSubmenu,
          #nav ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
          #nav ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
               background-image: none;
          }
          @media screen, projection {
               #nav ul.MenuBarHorizontal li.MenuBarItemIE      {
                    background: transparent;
               }
          }
          #nav ul.MenuBarHorizontal ul.music {
              margin-top: -235px;
          }
          #nav ul.MenuBarHorizontal ul.medicine {
              margin-top: -265px;
          }
          #article {
               padding: 20px;
               min-height: 250px;
          }
          #footer {
               height: 30px;
               background-image: url(http://www.sarahpellerdesign.com/shannon/images/menu.gif);
               font-size: 0.85em;
               padding: 5px 20px;
          }
          </style>
          </head>
          
          <body>
          <div id="header">
          <h1>Shannon Ryan - Healing Arts Practioner, Harpist, Songstress</h1> <!-- Important for Search Engines and Accessibility -->
          </div>
          <div id="nav">
            <ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a href="#">Contact</a>  </li>
              <li><a href="#">Biography</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Music</a>
                <ul class="music">
                  <li><a href="#">Therapeutic Harp</a></li>
                  <li><a href="#">Wedding Harpist</a></li>
                  <li><a href="#">Ceremonial Music</a></li>
                  <li><a href="#">Sound Healing</a></li>
                  <li><a href="#">Recordings</a></li>
                  <li><a href="#">Calendar</a></li>
                  <li><a href="#">Media</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Energy Medicine</a>
                <ul class="medicine">
                  <li><a href="#">The Invitation</a></li>
                  <li><a href="#">Integrative Energy Medicine</a></li>
                  <li><a href="#">Qigong</a></li>
                  <li><a href="#">Reiki</a></li>
                  <li><a href="#">Long Distance Healing</a></li>
                  <li><a href="#">Sound Healing</a></li>
                  <li><a href="#">Testimonials</a></li>
                  <li><a href="#">FAQ</a></li>
                </ul>
              </li>
              <li><a href="#">Yoga</a></li>
              <li><a href="#">Massage</a></li>
              <li><a href="#">Media</a></li>
              <li><a href="#">Calendar</a></li>
            </ul>
          </div>
          <div id="article">
            <p>Content goes here </p>
          </div>
          <div id="footer">
               <p>this is the footer</p>
          </div>
          <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
          <script>
          var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
          </script>
          </body>
          </html>
          

           

          Gramps

          • 2. Re: How to center my layout and text?
            sarahpeller Community Member

            Wow, thank you SO much! With your first response, I wasn't quite sure where to place those bits of code, but with your example that you sent me, I could easily see where they needed to be and how they worked. That was the most helpful answer I've ever recieved in a forum. Now my menu bar is working just fine. Thanks again!!

            • 3. Re: How to center my layout and text?
              Manoj Manohar Tambat Community Member

              I am glad I could help you.

               

              Welcome and thanks for the opportunity.

               

              Manoj

              • 4. Re: How to center my layout and text?
                Manoj Manohar Tambat Community Member

                Oops! Sorry. Please ignore my message. I mistook it for my solution given to

                another forum user.

                 

                Sorry again.