...

View Full Version : Navigation Bar Help



doctordew
07-24-2007, 04:34 AM
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.

http://i19.tinypic.com/5zeq4w1.gif

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!

PappaJohn
07-24-2007, 05:29 AM
Well this is not quite a tutorial, but it is a menu much like your pix - should get you started:
Vertical Rollover List (http://css.maxdesign.com.au/listamatic/vertical08.htm)

garydarling
07-24-2007, 07:30 AM
Here is a quick shortcut:

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

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

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

doctordew
07-24-2007, 11:53 PM
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;
}

srule_
07-25-2007, 12:18 AM
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.

doctordew
07-25-2007, 01:57 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum