7 Replies Latest reply: May 25, 2012 8:35 AM by lenvirthus RSS

    Help with Navbar Menu

    lenvirthus Community Member

      Hey guys,

       

      I have been on these forums before and you're all a fantastic and intelligent bunch of people.

       

      Yet, I have this Uni' assignment due in a couple of days and I'm quite worried about getting it done

      all in time.

       

      I am currently facing some problems with the navmenu.

       

      I have positioned it where I want it, etc...such as the correct width and height. Yet,

      once I have done that I am not sure how to place the various button.gif's I have made to create my desired look.

       

      I am wanting 5 different "Button gifs'" in that Navbar section.

       

      I can't select "Background-Repeat: Repeat" because It simply creates one continuous "button.gif" without segregating the pieces Individually.

       

      Also, If I want to create 5 different nav buttons...should I simply create 5 different DIV Tags?

       

      Example being;  (HTML Example:) Div class="navbutton1"  --- (CSS Example:) .navbutton1 {                                                                                                        width: 40px

                                                                                                            height:10px

                                                                                                            }

                       

      and then Div class="navbutton2", and Vice-Versa.

                                                                                                           

       

       

      Here is a quick mock-up to represent how I want the buttons to be laid out:

      http://www.filedump.net/index.php?pic=dreamweaverforumexample1337944808.jpg

       

       

      I am so sorry for the rushed message, I am quite desperate.

       

      Kind Regards!

       

      - Joshua.

        • 1. Re: Help with Navbar Menu
          lenvirthus Community Member

          To clarify things a tidbit more, The navbar element I have currently made is

          .nav{

                  width: 679px;

                  height: 78px;

                  position:fixed;

                  margin-left: auto;

                  margin-right: auto;

              }

           

          I am yet to insert any of those Button.Gif's mentioned above. So it's a vacant space that needs to be filled.

          • 2. Re: Help with Navbar Menu
            adninjastrator Community Member

            Yes, you need a separate container (<div>) for each button. Place those containers inside you main navbar, style as needed... float left, margin to separate elements, padding to give some workspace inside each element. Then you can stick whatever you want inside each of those separate <div>s.

            So set that up and see how it works. Then if there are problems, post a link to the actual page or at least post the code for the entire page.

            Best wishes,

            Adninjastrator

            • 3. Re: Help with Navbar Menu
              lenvirthus Community Member

              Hey Adninjastrator,

               

              Thanks heaps for your help! I'm definitely understanding it a-lot more! Though, I still am facing a couple of issues. I'll post my code below.

               

              <!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>Untitled Document</title>

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

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

              </head>

               

              <body>

              <div class="wrapper">

              <div class="header">

              </div>

               

              <div class="main">

              <div class="nav">

              </div>

              <div class="contact"></div>

              <div class="foundation"></div>

              <div class="photos"></div>

              <div class="bands"></div>

              <div class="home"></div>

              <div class="contact"></div>

              </div>

               

              <div class="content">

              </div>

               

               

               

               

              </body>

              </html>

               

              When ever I try to include the other <Divs> I made into the NAV <Div>, things just turn out very awry. I'll also post my CSS Code below:

               

              @charset "UTF-8";

              /* CSS Document */

               

              body{

                  margin:0;

                  padding:0;

                  background-image: url(file:///H|/EXTRA%20RMIT%20FILES/Clarkefield%20Website%20Site/images/Clarkefield%20Fes tival%20Background.jpg)

              }

               

              .wrapper{

                  width: 827px;

                  height: 627px;

                  margin-left: auto;

                  margin-right: auto;

              }

               

               

              .header{

                  width: 827px;

                  height: 579px;

                  margin-left: auto;

                  margin-right: auto;

                  background-image:url(../images/Clarkefield%20Header.jpg);

                  background-repeat:no-repeat;

                  background-position:center;

              }

               

              .main{

                  clear: both;

                  width: 827px;

                  height: 627px;

                  margin-left:auto;

                  margin-right:auto;

                  background-color: #225b6f;

                  padding-bottom: 20px;

              }

               

               

               

                  .nav{

                      width: 679px;

                      height: 78px;

                      position:fixed;

                      margin-left: auto;

                      margin-right: auto;

                  }

                 

                  .home {

                      float: left;

                      margin: 10px;

                      background-image:url(../images/Button.gif);

                      background-repeat:no-repeat;

                  }

                 

                  .bands {

                      float: left;

                      margin: 10px;

                      background-image:url(../images/Button.gif);

                      background-repeat:no-repeat;

                  }

                 

                  .photos {

                      float: left;

                      margin: 10px;

                      background-image:url(../images/Button.gif);

                      background-repeat:no-repeat;

                  }

                 

                  .foundation {

                      float: left;

                      margin: 10px;

                      background-image:url(../images/Button.gif);

                      background-repeat:no-repeat;

                  }

                 

                  .contact {

                      float: left;

                      margin: 10px;

                      background-image:url(../images/Button.gif);

                      background-repeat:no-repeat;

                  }    

                 

                 

               

              .content {

                  width: 827px;

                  margin-left: auto;

                  margin-right: auto;

              }

               

              So sorry to bother you with all of this, Thank you SO! Much!...(Note; I am very new to Coding,etc.)

              • 4. Re: Help with Navbar Menu
                adninjastrator Community Member

                For starters, your menu containers are not inside the nav container <div>.... they all follow nav and are outside it.

                Then at the very bottom "wrapper" is not closed.... need to add </div>.

                Fix those and then take another look.

                Best wishes,

                Adninjastrator

                • 5. Re: Help with Navbar Menu
                  lenvirthus Community Member

                  Hey Adninjastrator,

                   

                  I've done a few tweakings...I fixed what you told me to, here are the results:

                   

                  <!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>Untitled Document</title>

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

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

                  </head>

                   

                  <body>

                  <div class="wrapper">

                  <div class="header">

                  </div>

                  </div>

                   

                   

                  <div class="nav">

                  <div class="contact">

                  <div class="foundation">

                  <div class="photos">

                  <div class="bands">

                  <div class="home">

                  </div>

                  </div>

                  </div>

                  </div>

                  </div>

                  </div>

                   

                  <div class="content">

                  </div>

                   

                   

                   

                   

                  </body>

                  </html>

                   

                   

                  and the CSS:

                   

                  @charset "UTF-8";

                  /* CSS Document */

                   

                  body{

                      margin:0;

                      padding:0;

                      background-image: url(file:///H|/EXTRA%20RMIT%20FILES/Clarkefield%20Website%20Site/images/Clarkefield%20Fes tival%20Background.jpg)

                  }

                   

                  .wrapper{

                      width: 827px;

                      margin-left: auto;

                      margin-right: auto;

                  }

                   

                   

                  .header{

                      width: 827px;

                      height: 579px;

                      margin-left: auto;

                      margin-right: auto;

                      background-image:url(../images/Clarkefield%20Header.jpg);

                      background-repeat:no-repeat;

                      background-position:center;

                  }

                   

                   

                   

                      .nav{

                          width: 679px;

                          height: 78px;

                         

                          margin-left: auto;

                          margin-right: auto;

                      }

                     

                      .home {

                          float: left;

                          margin: auto;

                          background-image:url(../images/Button.gif);

                          background-repeat:no-repeat;

                      }

                     

                      .bands {

                          float: left;

                          margin: auto;

                          background-image:url(../images/Button.gif);

                          background-repeat:no-repeat;

                      }

                     

                      .photos {

                          float: left;

                          margin: auto;

                          background-image:url(../images/Button.gif);

                          background-repeat:no-repeat;

                      }

                     

                      .foundation {

                          float: left;

                          margin: auto;

                          background-image:url(../images/Button.gif);

                          background-repeat:no-repeat;

                      }

                     

                      .contact {

                          float: left;

                          margin: auto;

                          background-image:url(../images/Button.gif);

                          background-repeat:no-repeat;

                      }    

                     

                     

                   

                  .content {

                      width: 827px;

                      margin-left: auto;

                      margin-right: auto;

                      height: 627px;

                      background-color: #225b6f;

                      padding-bottom: 20px;

                     

                  }

                   

                  The buttons are still not showing up...:S...Am I not spacing it right...

                   

                  Once again, thank you immensly, Oh...If I am asking too many questions...please tell me so!

                   

                  Many Thanks,

                   

                  - Joshua.

                  • 6. Re: Help with Navbar Menu
                    adninjastrator Community Member

                    I didn't take a look at the CSS right now, I'm off to a meeting, but here is a better HTML layout:

                    <body>

                    <div class="wrapper">

                      <div class="header">
                     
                      </div>

                        <div class="nav">
                       
                          <div class="contact"></div>
                         
                          <div class="foundation"></div>
                         
                          <div class="photos"></div>
                         
                          <div class="bands"></div>
                         
                          <div class="home"></div>
                       
                        </div>

                    <div class="content">

                    </div>

                    </div>

                    </body>

                    </html>

                    If you use indents when coding it's easier to tell what is inside which elements... intent code whenever you place one element inside another.

                    Try that.

                    Best wishes,

                    Adninjastrator

                    • 7. Re: Help with Navbar Menu
                      lenvirthus Community Member

                      No problem!

                       

                      Enjoy your meeting!

                       

                       

                      Kindest Regards!

                       

                      - Joshua.