locked
Display RRS feed

  • Question

  • You cannot vote on your own post
    0
    I have centered details, including navigation buttons on Expression Web 2 but when I upload the files, or check them in a browser, the details are left justified and not centered.  My site is www. hopemangala.co.uk.  I am using Windows 7 Ultimate as my OS.  Any help would be appreciated.
    Friday, June 4, 2010 9:15 PM

Answers

  • If the problems is in the navigation buttons (home-what'on-contacts...) for what I see, those buttons are <li> tags, they would normally be one below the other, each on a different line. But in the stylesheet styles\style3.css <li> elements have the style float:left. This make them be stacked on the same line against the left side, so, no matter how text-align is set, they will be always left aligned. Since there is no float:center, if you rellay want them centered you are probably better using <span> tags for your menu.

    About "details" exactly which part of the page are you talking about?

     

    Friday, June 4, 2010 10:30 PM

All replies

  • Centered in which browser?  It matters.

    Do not assume Design View is a representation of all browsers.  It's not even a representation of one particular browser.

    Install all the major browsers on your machine, and preview in all of them.  You need to learn the differences and accomodate them.

    How are you trying to center the navigation?  There is nothing in your styling that will do that in a modern browser.

    As for the rest:  What, exactly are you expecting to see as centered?

    Friday, June 4, 2010 9:56 PM
  • If the problems is in the navigation buttons (home-what'on-contacts...) for what I see, those buttons are <li> tags, they would normally be one below the other, each on a different line. But in the stylesheet styles\style3.css <li> elements have the style float:left. This make them be stacked on the same line against the left side, so, no matter how text-align is set, they will be always left aligned. Since there is no float:center, if you rellay want them centered you are probably better using <span> tags for your menu.

    About "details" exactly which part of the page are you talking about?

     

    Friday, June 4, 2010 10:30 PM
  • First when you have a display issue post a link to the published page, even if it is just a temporary testing location. Post it as http:// and without a space between the www and the domain name. That way the link will be clickable.

    Next there is no need to clutter up your mark-up with span tags.

    #navigation {
      text-align: center;
      background-color: #545454;
    }

    #navigation ul, #navigation li {
      display: inline;
      list-style-type: none;
    }

    navigation a {
     color: #fff;
     text-decoration: none;
     padding: 5px;
     border: 1px solid #c9c9c9;
    }

     <div id="navigation">
      <ul >
       <li><a href="default.html">Home</a></li>
       <li><a href="whatson/whatson.html">What's On</a></li>
       <li><a href="contacts/contacts.html">Contacts</a></li>
       <li><a href="gallery/gallery2008/gallery08.html">Photo Gallery 08</a></li>
       <li><a href="gallery/gallery2009/gallery09.html">Photo Gallery 09</a></li>
       <li><a href="gallery/gallery2010/gallery2010.html">Photo Gallery 10</a></li>
      </ul>
      </div>

    Notice I removed you inline styles and changed the navigation definitons removing float and display block. Try it and you will see a centered horizontal menu.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Proposed as answer by Bill Pearson Saturday, June 5, 2010 1:06 PM
    Saturday, June 5, 2010 5:12 AM
  • Thanks for help.  Will try
    Wednesday, June 9, 2010 2:09 PM
  • Thanks for useful help
    Wednesday, June 9, 2010 2:10 PM
  • Thanks for the information.  Much appreciated.
    Wednesday, June 9, 2010 2:10 PM