Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    147
    Thanks
    5
    Thanked 3 Times in 2 Posts

    Navigation Bar Help

    Ok so I've searched a few sites for a while for somebody to make me a layout, but I'd almost rather do it myself. It will take me a long time, but in the end I think the experience will be worth it. That means lots of semi-nooby questions will be coming here from me, hopefully I can get some help within the same day.

    Where to start, where to start. I decided to get a feel for the room that will be left I would like to start with the Navigation bar/menu. I am wondering how one would go about making one, not just copy and pasting anothers work. This is an idea on how I would invision it looking.



    Now can anybody point me in the right direction of where to look for a tutorial on how to make something like this in css. Any help given will be greatly appreciated!

  • #2
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    Well this is not quite a tutorial, but it is a menu much like your pix - should get you started:
    Vertical Rollover List

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Here is a quick shortcut:

    http://www.cssplay.co.uk/menus/menu_...html#/articles

    And here is something more along the lines of a tutorial:

    http://www.cssplay.co.uk/menus/tutorial.html

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    147
    Thanks
    5
    Thanked 3 Times in 2 Posts
    Thanks Gary, I got it how I like it, just now the bars are adjusting themselves based upon the amount of text in them. Before when I was playing around with it they all stayed as big as the biggest. They are all one word. Any idea what I do to the code to get the images to be of a set size? Also what would I do so that it allows text to go to the right? There's some code for like "float right" or something, but I'm not exactly sure how I'd get that to work to get my content to do that.

    ul#navlist
    {
    margin: 0 0 0 5px;
    padding: 0;
    width: 12.5%;
    }

    #navlist li
    {
    list-style-type: none;
    background-color: #32cd32;
    color: #daa520;
    border: .2em solid #000000;
    font-weight: 600;
    text-align: center;
    padding: .3em;
    margin-bottom: .1em;
    }

    #navlist li a
    {
    color: #ffffff;
    text-decoration: none;
    display: block;
    }

    #navlist li a:hover
    {
    background-color: #ffffff;
    color: #32cd32;
    }
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    adding a width to your #navlist li should solve your problem of the size comforming to the size of the text.


    adding "text-align:right" to #navlist li will make everything in the menue apprear on the right.

    i suggest you go to www.w3schools.com and do there tutorials on html and css. It will only take you a few hours but it will save you hours of waiting for responses later on.
    Last edited by srule_; 07-25-2007 at 12:22 AM.

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    147
    Thanks
    5
    Thanked 3 Times in 2 Posts
    Quote Originally Posted by srule_ View Post
    i suggest you go to www.w3schools.com and do there tutorials on html and css. It will only take you a few hours but it will save you hours of waiting for responses later on.
    I never step by step took the css one there. I got the html stuff down pretty good from that site. The css tutorial is kind of... bad. I have been using that to try to solve my problems. I found about 4 or 5 different ways I though I could do it but when I applied them to my doccument they didn't work. I tried a columns code, a float-right code, a float-left, and a few others. I'll take your advice and go through it and take it the next time I'm up for some CSS. I just came on now to check for a response. Anyways I'll try what you told me, and take that tutorial.
    Quote Originally Posted by rmedek View Post
    Doctordew, as soon as they come out with the opposite of an infraction, I am going to give you a million of them. You are my new favorite person on the forum.


  •  

    Posting Permissions

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