10 Replies Latest reply: Jul 21, 2012 12:09 PM by Ivy54 RSS

    Menu Bar

    Ivy54 Community Member

      My menu bar extends to the next line.  I have 6 menu headers and the last header "Contact Us" keeps falling into the next line, I can't seem to keep it in the same row as the other menu headers.  Does anyone happen to know why?  Thanks so much.

        • 1. Re: Menu Bar
          John Waller CommunityMVP

          Please provide a link to your website so we can see what you're describing.

           

          Then someone will be able to help you.

          • 2. Re: Menu Bar
            Ivy54 Community Member

            Sorry, I haven't launched the site yet but here's a pic of what happens:  menu bar.jpgThanks!!

            • 3. Re: Menu Bar
              Ben Pleysier CommunityMVP

              The picture tells me that you have run out of real estate. Either increase the real estate or build a smaller menu bar.

               

              Gramps

              • 4. Re: Menu Bar
                Ivy54 Community Member

                Here's the codes if you need it.  Thanks again!

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Inland Empire Waterkeeper</title>

                <link href="_css/styles.css" rel="stylesheet" type="text/css" />

                <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

                <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

                <style type="text/css">

                body,td,th {

                    color: #333333;

                    font-family: Verdana, Geneva, sans-serif;

                    font-size: 12px;

                }

                body {

                    background-color: #FFFFFF;

                    color: #D6D6D6;

                    background-image: url(_images/background_teal.png);

                    background-repeat: repeat-x;

                    margin: auto;

                    margin-left: 0px;

                    margin-top: 0px;

                    margin-right: 0px;

                    margin-bottom: 0px;

                }

                h1 {

                    font-size: 28px;

                    color: #666666;

                }

                h2 {

                    font-size: 26px;

                    color: #666666;

                }

                h3 {

                    font-size: 24px;

                    color: #666666;

                }

                h4 {

                    font-size: 22px;

                    color: #666666;

                }

                h5 {

                    font-size: 20px;

                    color: #666666;

                }

                h6 {

                    font-size: 18px;

                    color: #666666;

                }

                </style>

                </head>

                 

                <body>

                <div class="container">

                  <div class="header"><img src="_images/banner.jpg" width="933" height="300" /></div>

                  <div class="menubar">

                    <ul id="MenuBar1" class="MenuBarHorizontal">

                      <li><a href="#" class="MenuBarItemSubmenu">About Us</a>

                        <ul>

                          <li><a href="organization.html" class="MenuBarItemSubmenu">Our Org.</a>

                            <ul>

                              <li><a href="mission.html">Our Mission</a></li>

                              <li><a href="history.html">Our History</a></li>

                              <li><a href="community.html">Our Community</a></li>

                            </ul>

                          </li>

                          <li><a href="team.html" class="MenuBarItemSubmenu">Our Team</a>

                            <ul>

                              <li><a href="staff.html">Staff</a></li>

                              <li><a href="supporters.html">Supporters</a></li>

                              <li><a href="advisoryboard.html">Advisory Board</a></li>

                            </ul>

                          </li>

                          <li><a href="coastkeeper.html">Coastkeeper</a></li>

                        </ul>

                      </li>

                      <li><a href="#" class="MenuBarItemSubmenu">What We Do</a>

                        <ul>

                          <li><a href="programs.html" class="MenuBarItemSubmenu">Programs</a>

                            <ul>

                              <li><a href="advocacy.html">Advocacy</a></li>

                              <li><a href="education.html">Education</a></li>

                              <li><a href="research.html">Research</a></li>

                              <li><a href="restoration.html">Restoration</a></li>

                              <li><a href="enforcement.html">Enforcement</a></li>

                            </ul>

                          </li>

                          <li><a href="prokects.html">Projects</a></li>

                          <li><a href="datareports.html">Data &amp; Reports</a></li>

                        </ul>

                      </li>

                      <li><a href="#" class="MenuBarItemSubmenu">Get Involved</a>

                        <ul>

                          <li><a href="volunteer.html">Volunteer</a></li>

                          <li><a href="employment.html">Employment</a></li>

                          <li><a href="events.html">Events &amp; Meetings</a></li>

                          <li><a href="donate.html">Donate</a></li>

                        </ul>

                      </li>

                      <li><a href="#" class="MenuBarItemSubmenu">News Room</a>

                        <ul>

                          <li><a href="pressrelease.html">In the News and Press Releases</a></li>

                          <li><a href="legislation.html">Legislative Updates</a></li>

                          <li><a href="waternews.html">Water in the News</a></li>

                        </ul>

                      </li>

                      <li><a href="#" class="MenuBarItemSubmenu">Resources</a>

                        <ul>

                          <li><a href="#" class="MenuBarItemSubmenu">Information</a>

                            <ul>

                              <li><a href="watershed.html">Our Watershed</a></li>

                              <li><a href="reportpollution.html">Report Pollution</a></li>

                            </ul>

                          </li>

                          <li><a href="photos.html">Photo Gallery</a></li>

                        </ul>

                      </li>

                      <li><a href="contact.html">Contact Us</a></li>

                    </ul>

                  </div>

                  <div class="body">

                  

                  

                    <div class="emptyspacecontent">

                    <h4><strong style="text-align:  justify;"><br />

                    </strong></h4>

                </div>

                 

                      <div class="emptyspace4"></div>

                  </div>

                   

                 

                <div class="footer"><img src="_images/footer_transparent.png" width="933" height="100" alt="Inland Empire Waterkeeper" /></div>

                </div>

                 

                <script type="text/javascript">

                var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                </script>

                </body>

                </html>

                • 5. Re: Menu Bar
                  Ben Pleysier CommunityMVP

                  This is what I get using the markup and style rules that you have supplied

                  _Capture.jpg

                  As you can see, the menu bar has plenty of space to house all of the items without resorting to a new line. It looks like the problem lies elsewhere, something that you have not supplied to us.

                   

                  To stop this dallying around, upload the site and supply a link.

                   

                  Gramps

                  • 6. Re: Menu Bar
                    Ivy54 Community Member

                    Altruistic Gramps,  I'll have to get back to you in about a week.  I'm in the middle of an internship and can't upload the site until it's finished.  If I still have the same problems then, I'll post again when I have a link.  Thanks anyway.  - M

                    • 7. Re: Menu Bar
                      Zabeth69 CommunityMVP

                      Nonsense. Buy yourself some cheap server space (Google "web hosts") and upload the site before it's done. It does not need to be in its final form or final server space. You can have an answer or at least valuable suggestions from us immediately, and you will learn more, faster...

                       

                      Beth

                      • 8. Re: Menu Bar
                        Ivy54 Community Member

                        I hate to ask this again but before I really dwelve into my project, I was wondering if anyone might have an answer to this question.   When I'm working on my html file in dreamweaver, the menu bar extends to the next line.  Here is a photo of what it looks like:  asq.jpgSee how "Contact Us" is on the next line and not in-line with the rest of the menu items?  When I preview it in Firefox or other, it's okay, it shows all on the same line.  I just don't understand why it's doing this in Dreamweaver.  Does anyone happen to know why or what I can do about this?  Thanks ahead of time.

                        • 9. Re: Menu Bar
                          Nancy O. CommunityMVP

                          DW Design View is not 100% reliable.  Use Live View.

                           

                           

                          Nancy O.

                          • 10. Re: Menu Bar
                            Ivy54 Community Member

                            Thanks, that helps!