Create a website navigation bar using CSS

[MBisFrenchy]

Oh man didn't work for me a half hour wasted....

[Ptachip]

>.<

[Philippeorlando]

Very, very good tutorial, thanks a lot. Now how do I get the pages to open within the same frame on a same home page?

Thanks

[NICKmv573]

Is the CSS page just in another text edit page? how do you link the HTML code to the CSS code? just have them in the same folder?

Thanks for the tutorial.

[FOGTALK]

great site fogtalk 96%

[pofpofpass]

wow that was probably the most efficient nav bar tutorial I've seen and I've seen a lot thank you

[Arjun007ize]

Nice one, Subscribed.

[CJTCarter]

Very cool. Nice one. Learnt alot in a short period of time.

[BlakPilar]

Hmm... Interesting. For my navigation bar, I used a table with one row and set the border to zero, centered it, and messed around with the width of each panel. Nice job though!

[WanderxRebirth]

Very professional

[celebzluvergarl]

this tutorial helps me a lot.. thanks!!

[Beemerboy324]

One more thing. Could you not wrap the entire list in its own div so you can move it around and use it elsewhere?

Thanks

[Beemerboy324]

Neat! I used it myself.

G'day and thanks from a Yank.

[isaacfrancis2]

A very good tutorial. Most useful.

[thehowck]

Thanks for this, been looking for this for a while. Thanks again

[thetratex]

Very effective and well paced tutorial. Professionally done! Jason, could you tell what program did you use for your presentation? I would like to prepare one for OmegaT (a foss tent for translators). Thanks a million. Thelma

[PicNetTV]

@thetratex Hi there thanks for watching. I'm using a program called 'Camtasia' to record the screen. The effect where the windows zoom in and out is part of Mac OSX (i.e - You'll need to use Camtasia on a Mac computer). Good luck!

[shakaama]

I cannot stress how important it is to use a background color when working out your website. I spent 2 days trying to "fix" what I thought was a problem.

after 2 days, I got the bright idea to add a background color and was so ashamed to realize that what I was trying to fix was two divs underneath my navigation bar that were completely invisible to me and the navigation bar was perfect.

learn from my mistake. /sigh

[shakaama]

is there any advantage to making it a list? I mean i just did a bunch of links and surrounded them with a div. then i used css to make them look pretty or whatever you call it.

[PicNetTV]

@shakaama The advantages are accessibility related - Text-based browsers, screen readers, non-CSS supporting browser, browsers with CSS turned off and search bots will be able to access your content more easily (as the HTML markup describes it as a list, divs on the other hand are more generic). Whether this is useful or worthwhile is up to you and your website audience.

If you want more info, do a search for 'semantically correct code'. Good luck.

[shakaama]

@PicNetTV hey thank you so much for responding. It was a legitimate question. That's exactly what I needed to know.

I wouldn't call myself a beginner any more, since I'm nearly done coding my entire site by hand, instead of using a wysiwig, which I first used to make it, but I'm teaching myself. I don't know everything LOL not by a long shot.

And thanks for the last tip too.

[asji1000]

dear pic how did u make #header i was making in the notepad with same html is up and down i was writing #header but it not made so how to make plz tell me dear

[asji1000]

dear wht u wrote down i did not watch plz and have you more video u r awesome

[asji1000]

wow brilliant very nice can u help me plzz i made a new page of html but dont know which file will work i saved index.html but it says file not found plz help me dude

[stevenp34]

Good work ; easy to understand.I want to add a search box for pages and profile page how can i do that?

If so please PM me.

[NicholasLeeson]

Hey, thanks for the video.

I see that the names of Link 1, Link 2, Link 3, and Link 4 are in the html code though. If you have multiple pages that use the navigation bar, but then later you decide you want to change the names of Link 1, Link 2, Link 3, and Link 4, do you have to go into each and every single html page and re-write them, or is there a way to work with a single document, where the changing the names on the single document, changes the names for each and every page?

Thanks!

[PicNetTV]

@NicholasLeeson

You can do that using Server Side Includes (SSI). Try Googling it, Good luck!

[NicholasLeeson]

Great. Thanks very much!!

[bnther36]

Do a search for PHP navigation. Basically, you copy the HTML code to a PHP file and then call it from how many pages you want.

[NicholasLeeson]

I will. Thanks for the tip!

[TheTigerTutorials]

@NicholasLeeson

Hey you can include sidebars and other information using PHP.

Make an include file containing the HTML with the links and use the include() method.

For more help I recommend Googling "PHP include file .inc"

[vintageozarks]

Want to add that this vid taught me how to minimize my html and css code. It replaces half a page of each type of code with just a few lines of code. More efficient.

[PicNetTV]

Thanks for the feedback. :)

[vintageozarks]

Excellent teacher of css for beginners; easy to understand with pleasant voice and relaxes the student.