Navigation Bar

[Smuj56]

Hey folks.

need some quick Advice on navigation bars.
i make web designs in photoshop and put them into dreamweaver then make Divs ect ect..

my question is, do you make navagation bars in photoshop and then slice them up, and if yes how do you make a navigation bar go into a already made template with a div space ready for it to be put in ?
if no do you make them in flash ?

iv tried looking on google and watching videos but not much help.

Thanks for your help peeps

[Corrosive]

If you are making navigation in HTML the semantic way of doing it is to use an unordered list of links. There are loads of examples at; Listamatic: one list, many options - Using CSS and a simple list to create radically different list options. If you want to use images/rollovers for menus then check out the CSS Sprite Technique; A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death.

Flash for menus is OK as long as you offer an HTML alternative for non-flash devices such as iPads.

Hope that helps.

[Smuj56]

Hey Corrosive thanks for your time, I had a look at the list info. and i understand it.

so how would i take an image of a nav bar i make on photoshop and put it into the list items the way it is on photoshop if that makes sence, ( yes im a rookie :P )

i made a quick nav image so say i sliced this into parts ... if you can help me understand how i put this into lists for a navigation that would be a great help.



thanks for your help

Adam

[Corrosive]

Before I dive into this, how much do you understand about CSS?

[Smuj56]

Im Fairly new to CSS as my college tutor dosnt teach it just now.

[Corrosive]

... my college tutor dosnt teach it just now.

<rant>Excuse me? Where did they dig him up from? 1996?? That is disgraceful!</rant>

Anyhoo, you'll probably have to do some background reading as well (oh and maybe change college courses).

The way I'd tackle that menu is to create an unordered list in HTML;

<ul id=nav>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact Me</li>
</ul>

Then remove the text from your nav bar image so you are left with just the background. Set that image as the background to the nav id with CSS.

Display the li tags inline so that they line up next to each other (default is display: block;) and then use the link pseudo classes (link, visited, hover, active) to set the link colour text as green and no underline (default is blue and underlined). Then set a rollover colour on hover and active.

Set some margin and padding on the li tags so they space out nicely and you are done.

Before doing much more you need to get a really good grasp of how to use CSS and HTML to create a website. If your school won't teach you then get on W3 and do some reading/playing/learning; W3Schools Online Web Tutorials

Let us know how you progress.

[sweetums]

Alternatively CSS-tricks has a really good video introduction that goes through the basics of html & css in about 30mins: css-tricks.com/video-screencasts/58-html-css-the-very-basics/

[djb]

Or cheat!

CSS Menu Generator

[Smuj56]

Thanks for all your replies.

will take a look at this video for css just now.
and will also look into the unordered list method.

David thanks for your idea haha but i need to understand how to do it, if i ever need a nav bar thats dosnt have to be important i know where to look now ;) cheers haha.

Adam

[Corrosive]

David thanks for your idea haha but i need to understand how to do it

Nice one Adam. That's exactly the right attitude to have if you are going to conquer web design.