Making A Simple Menu With CSS and HTML

Discussion in 'Member Articles & Tutorials' started by NBK*Twitch, May 20, 2010.

  1. NBK*Twitch

    NBK*Twitch Regular Member

    Joined:
    Dec 17, 2009
    Messages:
    235
    Likes Received:
    0
    Things you will need -

    1. Text Editor - Notepad++ Is what I will be using.
    2. Basic HTML and CSS Knowledge
    3. A test website or forum with a premade page.
    4. A image editing program - I will be using gimp 2.6.

    Step 1
    Open your image editor and back a simple background. I will be making a simple web 2.0 looking one.

    I suggest making the width the same width as your container. In my case it is 940px. The height is up to you. I always use 28px or 30px.

    Now just make the image and come back here after you are done.

    My Image - http://img692.imageshack.us/img692/1196/navbarf.png

    Step 2
    Okay time to get the html set up.

    Now this is where you should have a basic page already set up. If you do not I suggest you make one real quick then come back. Or wait for my css step and copy that template.

    Okay I have a basic page set up.

    Here the code for it -

    Code:
    <head>
    <title> blah</title>
    <link rel=stylesheet herf="basics.css" title="css">
    </head>
    <body>
    <div class="container=">
    </div>
    <div class="navbar">
    </div>
    </body>
    
    Okay now with that you will have a very basic page set up. It will have a container and a navbar at the top. Nothing special.

    Step 3

    Now for the css so those of you waiting for my stylesheet here you go -.

    Code:
    
    
    body {
    color: #FFFFFF; 
    background-color: #1b1b1b;
    }
    
    
         .container {
         background: #555;
         margin: auto auto; 
         align: center;  
         height: 900px;  
    }
    
         .navbar{
         background: #fff;
         color: #000;
         text-align: center;
         margin: auto 0;
         display: inline;  
    }
         .navbar ul{
         background: #fff;
         padding: 4px;
         line-style: none; 
    }
         .navbar li{
         background: #fff;
         line-style: none;
         display: inline;  
         padding-left: 5px;
         padding-right: 5px;
    }
    
    Okay now you are probably going okay thanks,but what does that mean. I am glad you asked I am going to tell you.

    The body is just that the body of your site. I put background-color: #1b1b1b to make it a dark grey background.

    The container is what will be holding everything. I put margin: auto auto; So it would be in the center.

    The height is the how tall the page will be.(900px;)

    The navbar class is for,the nav bar.

    I have it where the text will be in the middle,use the color white for the background, have black font,and display inline.

    The ul class is what the links will be in and the li is to hold the link. I will discuss that part in the next step.

    Step 4

    Okay Now time to make the menu appear.

    Code:
    <head>
    <title> blah</title>
    <link rel=stylesheet herf="basics.css" title="css">
    </head>
    <body>
    <div class="container=">
    </div>
    <div class="navbar">
    <ul>
    <li> Link </li>
    <li> Link </li>
    <li> Link </li>
    </ul>
    </div>
    </body>
    
    Okay now with the above you should have your menu showing up with a 5px spacing between the links.

    See the ul makes the list itself. So I styled it to have no line style and to have some padding. This will make it near the middle of the div.

    The li is displayed inline. With no style for the line either. Then I put the padding on left and right to give it that 5px space.

    So there you have a very simple menu. I hope you enjoyed this tutorial.

    If you need further assistance with this tutorial please post below.

    If you would like pictures please say so and I will get some up.


    Edited: To update a few things and fix it up.
     
  2. Corza

    Corza Regular Member

    Joined:
    Mar 27, 2010
    Messages:
    75
    Likes Received:
    0
    nice man this could help me improve my css and html all at once
     
  3. About Lee

    About Lee Regular Member

    Joined:
    Apr 9, 2010
    Messages:
    104
    Likes Received:
    1
    One thing ive never had time to make is a menu bar. But im willing to try this one out. Thanks!
     
  4. dynastygal

    dynastygal Regular Member

    Joined:
    Jun 21, 2009
    Messages:
    61
    Likes Received:
    0
    Do you have a preview of what this looks like?
     
  5. NBK*Twitch

    NBK*Twitch Regular Member

    Joined:
    Dec 17, 2009
    Messages:
    235
    Likes Received:
    0
    Ahh I fixed a problem . I had it calling id's instead of classes. I also added a height to the container so you could see it.

    Anyways here is a pic - http://i47.tinypic.com/30xd3z5.png

    If you use my code the above link should be what you see. If not post your code here I will fix and explain.
     
  6. Demon_skeith

    Demon_skeith Regular Member

    Joined:
    Feb 10, 2010
    Messages:
    203
    Likes Received:
    4
    nice tutorial, know how to make a drop down menu? (I've always been looking for a code for that.)
     
  7. NBK*Twitch

    NBK*Twitch Regular Member

    Joined:
    Dec 17, 2009
    Messages:
    235
    Likes Received:
    0
    ^A drop down menu takes a small javascript .

    Give me a day or two and I will make the next tutorial be for that.
     
  8. roughcut

    roughcut Regular Member

    Joined:
    Dec 29, 2009
    Messages:
    14
    Likes Received:
    0
    Doesn't neccesarily need to be a javascript man. Can all be done in XHTML and CSS too...
     
  9. NBK*Twitch

    NBK*Twitch Regular Member

    Joined:
    Dec 17, 2009
    Messages:
    235
    Likes Received:
    0
    Really? I have never seen a full dropdown menu with only xhtml and css. Maybe you should make a tutorial =p.
     
  10. Sakura

    Sakura Regular Member

    Joined:
    Jun 4, 2010
    Messages:
    262
    Likes Received:
    45
    Nice tutorial NBK*twitch! This will really help out people who don't know HTML/CSS.
     
  11. amandasmithe

    amandasmithe Regular Member

    Joined:
    Aug 22, 2011
    Messages:
    1
    Likes Received:
    0
    Really i am impressed from this post....the person who created this post is a genious and knows how to keep the readers connected..thanks for sharing this with us.i found it informative and interesting. Looking forward for more updates..
     
  12. Syncro

    Syncro Regular Member

    Joined:
    Sep 20, 2011
    Messages:
    22
    Likes Received:
    0
    Good example. Thanks!
     
Similar Threads
Loading...

Share This Page