Results 1 to 2 of 2

Thread: Navigations Menu

  1. #1
    Join Date
    Dec 2009
    Posts
    2

    Smile Navigations Menu

    Hey everybody,
    I'm working on a horizontal navigation menu. They are images, and I'm having troubles working with the CSS and how <div> tags work. Idk if I should start a list : <ul> or just have them next to each other.

    I want them to be centered on the top of the screen. Then of the right and left, have the background gradient of the actual menu so that it takes up the whole page. (using percentages and also repeat-x)

    If anyone one can help then please do so.

    Stavo

  2. #2
    Join Date
    Aug 2009
    Location
    Texas
    Posts
    193
    Try this (all IDs, px values, links, etc. are example values. Replace with your own.)

    HTML:
    HTML Code:
    <div id="header">
      <ul id="navbar">
        <li id="button1"><a href="page1.html"><span>Link 1</span></a></li>
        <li id="button2"><a href="page2.html"><span>Link 2</span></a></li>
        <li id="button3"><a href="page3.html"><span>Link 3</span></a></li>
      </ul>
    </div>
    The div tag will contain the navigation bar and let you add the background gradient that you wanted. The ul tag will contain the buttons. Each li tag represents a button. The a tag is what the button links to. Inside each a tag, we put the name of the button. However, since we want an image to show instead of text, we put it inside of a span tag so that we can hide it with CSS.

    CSS:
    Code:
    /* NAVBAR */
    div#header {
        width: 100%;
        height: 50px;
        background: url(gradient.jpg) repeat-x;
    }
    ul#navbar {
        list-style-type: none;
        margin: 0 auto;
    }
    ul#globalnav li {
        display: inline;
        margin-left: 0;
    }
    ul#globalnav li a {
        width: 100px;
        height: 50px;
        float: left;
    }
    ul#globalnav li a span { display: none; }
    /* BUTTONS */
    li#button1 a { background-image: url(button1.jpg); }
    li#button2 a { background-image: url(button2.jpg); }
    li#button3 a { background-image: url(button3.jpg); }
    The header div has a width of 100% so it will expand with the window. We give it a height (in this case 50 pixels) and a background, which repeats on the x axis.

    The navbar ul has a list-style-type of none so that it will not display bullets. We give it a margin of 0 auto so that it will not have a top and bottom margin, but will be horizontally centered.

    We display each list item as inline so it will display in a row. We give it a margin-left of 0 so it doesn't indent.

    We give the a tags a width and a height (in this case 100 by 50) and float them to the left so that it knows how to position them.

    Then we display the span tags as none so it will not show the text.

    Finally, we tell each link to display a certain image.

    Hope this helps.
    Last edited by zachsformacs95; 28 Feb 2010 at 07:09 PM.

Similar Threads

  1. Dropdown menu with css and javascript...?
    By AllanH in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 14 May 2009, 03:59 AM
  2. CSS Drop down menu in IE problem..
    By mylah in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 24 Mar 2009, 09:41 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •