5 Replies Latest reply on Feb 22, 2010 1:56 PM by WhatThekell

    CSS question

    WhatThekell

      Hello,

      I would like to center my horizontal navigation, but don't know what to do to the code to make it happen. I am using Pop Menu Magic and the code is in the p7pmh6.css file.  I am very new at CSS and don't know what I'm doing!!

      If it matters, I'm using Dreamweaver 8 on Windows 7 Professional.

      the url is http://www.bluegrassmorganclassic.com

      Thanks in advance for anyone that may be able to advise me on this issue.

      Kelly

        • 1. Re: CSS question
          Nancy OShea Adobe Community Professional & MVP

          To center your web page you need just 3 things:

           

          1) a valid document type which DW does for you when you create a new HTML document.

          2) a container width in pixels, percentages or ems.

          3) a margin-left and margin-right of auto.

           

          CSS:

           

          body {

          width: 900px; /**adjust width as required**/

          margin: 0 auto; /**centers in modern browsers**/

          text-align:center; /**for older browsers**/

          }

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: CSS question
            tom46456

            On line 47 you have the initial Div align left and it isn't closed so the entire header is left.

             

            This assumes you want your header image centered also.

            • 3. Re: CSS question
              WhatThekell Level 1

              Thank you for the responses.

               

              So how would I go about fixing it?

               

              I tried changing the <h1 align="left" tag to say "center" but that only aligns the header image (and yes, I plan to center that too and I can get that to work fine--I can get the image to center just by clicking on the "center" icon). I'm not sure why there's a header tag in there anyway, since there's no text. I just changed it to say <div align and took out the closing h1 tag and then I got into more trouble because I couldn't figure out where that div was supposed to end. I hope I'm making sense! Do I need to make any changes to the code of the Pop Menu?

              Thanks,

              Kelly

              • 4. Re: CSS question
                osgood_ Level 8

                Change the css for your 'masthead' <div> in the p7csslm/p7csslm12.css stylesheet to as below:

                 

                #masthead {
                color: #003366;
                background-color: #FFFFFF;
                padding: 0px;
                margin: 0 auto;
                width: 770px;
                text-align: center;
                }

                 

                 

                Also delete from the p7csslm/p7csslm12.css styelsheet:

                 

                #masthead .content {

                padding: 12px 20px;

                }

                 

                Amend the first css selector in the p7pm/p7pmh6.css stylessheet to as below:

                 

                #p7PMnav {
                    margin:0 0 0 15px;
                    padding:0;
                }

                 

                Delete 'align="left" fro the h1 tag:

                 

                <h1 align="left" class="style1"><img src="images/logos.jpg" width="622" height="139" /></h1>

                 

                so it looks like:

                 

                <h1 class="style1"><img src="images/logos.jpg" width="622" height="139" /></h1>

                • 5. Re: CSS question
                  WhatThekell Level 1

                  Osgood, that worked for the most part and I did get the nav bar centered, thanks!

                  But now it appears that the nav bar is in the main center div instead of being in the masthead.

                  Thanks for all the help!