Skip navigation
Currently Being Moderated

How to center my layout and text?

Jul 28, 2011 4:20 PM

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:


Hope someone can help! Thanks!

  • Currently Being Moderated
    Jul 28, 2011 6:30 PM   in reply to sarahpeller

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

    <!DOCTYPE html>
    <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="" rel="stylesheet">
    body {
         width: 950px;
         margin: auto;
         color: #666;
         font: 14px Arial, Helvetica, sans-serif;
    #header {
         height: 632px;
         background: url( no-repeat left top;
    #header h1 {
         color: transparent;
    #nav {
         height: 25px;
         background: #8CDBC3 url( 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 {
        margin-top: -235px;
    #nav ul.MenuBarHorizontal ul.medicine {
        margin-top: -265px;
    #article {
         padding: 20px;
         min-height: 250px;
    #footer {
         height: 30px;
         background-image: url(;
         font-size: 0.85em;
         padding: 5px 20px;
    <div id="header">
    <h1>Shannon Ryan - Healing Arts Practioner, Harpist, Songstress</h1> <!-- Important for Search Engines and Accessibility -->
    <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>
        <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>
        <li><a href="#">Yoga</a></li>
        <li><a href="#">Massage</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Calendar</a></li>
    <div id="article">
      <p>Content goes here </p>
    <div id="footer">
         <p>this is the footer</p>
    <script src=""></script>
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});



    Mark as:
  • Currently Being Moderated
    Aug 5, 2011 4:42 AM   in reply to sarahpeller

    I am glad I could help you.


    Welcome and thanks for the opportunity.



    Mark as:
  • Currently Being Moderated
    Aug 5, 2011 4:54 AM   in reply to sarahpeller

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

    another forum user.


    Sorry again.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points