Skip navigation
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




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: 8.jpg



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


Kind Regards!


- Joshua.

  • Currently Being Moderated
    May 25, 2012 6:20 AM   in reply to lenvirthus

    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,


    Mark as:
  • Currently Being Moderated
    May 25, 2012 7:24 AM   in reply to lenvirthus

    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,


    Mark as:
  • Currently Being Moderated
    May 25, 2012 8:14 AM   in reply to lenvirthus

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


    <div class="wrapper">

      <div class="header">

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

    <div class="content">





    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,


    Mark as:

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