Skip navigation
lenvirthus
lenvirthus
Currently Being Moderated

Help with Navbar Menu

May 25, 2012 4:24 AM

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=dreamweaverforumexample133794480 8.jpg

 

 

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

 

Kind Regards!

 

- Joshua.

816 Views   7 Replies   Latest reply: lenvirthus, May 25, 2012 8:35 AM
 
Replies
  • lenvirthus
    Currently Being Moderated
    1. lenvirthus,
    May 25, 2012 4:44 AM   in reply to lenvirthus
    Report

    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.

     
    |
    Mark as:
  • adninjastrator
    Currently Being Moderated
    2. adninjastrator,
    May 25, 2012 6:20 AM   in reply to lenvirthus
    Report

    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

     
    |
    Mark as:
  • lenvirthus
    Currently Being Moderated
    3. lenvirthus,
    May 25, 2012 6:59 AM   in reply to adninjastrator
    Report

    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/imag es/Clarkefield%20Festival%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.)

     
    |
    Mark as:
  • adninjastrator
    Currently Being Moderated
    4. adninjastrator,
    May 25, 2012 7:24 AM   in reply to lenvirthus
    Report

    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

     
    |
    Mark as:
  • lenvirthus
    Currently Being Moderated
    5. lenvirthus,
    May 25, 2012 7:35 AM   in reply to adninjastrator
    Report

    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/imag es/Clarkefield%20Festival%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.

     
    |
    Mark as:
  • adninjastrator
    Currently Being Moderated
    6. adninjastrator,
    May 25, 2012 8:14 AM   in reply to lenvirthus
    Report

    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

     
    |
    Mark as:
  • lenvirthus
    Currently Being Moderated
    7. lenvirthus,
    May 25, 2012 8:35 AM   in reply to adninjastrator
    Report

    No problem!

     

    Enjoy your meeting!

     

     

    Kindest Regards!

     

    - Joshua.

     
    |
    Mark as:
Actions

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