CSS Tutorial 5 - Navigation Bar using only CSS

[mutumbakenya]

good job chap!with just CSS its a good job

[PearSquirrel]

I would probably use an unordered list instead of all of these divs. It would be more recognizable by search engines and it's considered better practiced, not to mention more organized. It's a similar concept, just replacing the parent div with a 'ul' or 'menu', and the child divs with 'li'. The same css would be used, with the addition of using 'list-style-type:none;' for the li's. Great tutorial!

[mutumbakenya]

@PearSquirrel but you notice there remains a section on the far left without the hover.as in the hover does not extend to the far left of the navbar div

[PearSquirrel]

@mutumbakenya That's why you would put padding in the ul.

padding-left: 30px;

[XXTeamCORE]

I love you. no homo btw :D

[FilCanJay]

Thanks, you're brilliant.

[17ronaldoo]

thank you man...this helped me a lot.you are very good :)

[Gamergods50]

for those wanting the bar to fit any monitor size type at .navbar at width:auto;

[TheOnlooker2010]

Why waste time on watching tutorials. when you can have the experts

handle your needs, you can call them at 1.877.312.7575

[sem785]

@thornwebdesign What if i want my navbar about 30 pixels down, how would I do that?

[sem785]

@thornwebdesign nvm :D

[mutumbakenya]

@sem785 in the navbar in CSS add margin-top:30px;

[wrongenvelope]

This worked amazingly well! I just started learning CSS yesterday and I was able to follow along with this exercise and end up with a nav bar that looked very similar to the one you created (although I had slightly different gradient images). Thank you!

[j4ck3t]

Hard to find tutorial, couldn't find a more practical example then this :)

helped me do that last bit of work on a site :P thanks !

[OnbekendeOudeMan]

0:35 "Which is gonna be our external starship"

I heard that correctly?

[tikohost]

Great tutorial thanks for this video it really helped alot... Thanks...

[wojteklol]

Great, Thanks :)

[TheHackerEyes]

very nice bud,good job :)

[1RickRude]

Would I be able to use PHP while using Visual Studio

[TheVideoVector]

How could I center this navbar?

[Mindsore]

@TheVideoVector Try putting your navbar div's inbetween center tags I think , or use margin: auto; in the navbar css.

[WTFp0s]

I never learned CSS/HTML i just knew it

[Pgeen]

Thanks so much for your great tutorials. I'm finally beginning to understand CSS!

[thenewkolkata]

good and great videos

[idokinel]

Can we get the images?

[shadowwares]

Thanks for the tutorial. It's a very good tutorial.

[tidgney]

Hey I have been watching your videos with great success they are really very good. I'm wondering with this though, I have developed a similar navigation bar through your tutorial however the roll over only covers a small part of the button and does not fill the entire button, do you have any idea why? Any help is appreciated, cheers :).

[tidgney]

@tidgney Nevermind, found out that it was just the repeat-x function causing it confusion as I did notice it was only repeating along the X axis, leaving it blank allows it to repeat for the entire shape :).

[softwarez4free]

What happens when you click on the button ? does the image changes back to the original one or it remains hover ?

[chriscooke109]

You explain things very well, thankyou for the video.

[chriscooke109]

This is a very well explaine video, thanks.

[silentcuteb0y14]

This is great Thanks Man

[fdmipgo]

Thank you for sharing.

[yoda302055]

That looks So COOL!

[AmandaCelestine2011]

How do you move the nav bar if you want to insert an image above it?

[MudOilnGears]

Hello, great tutorial!

[CiRCUiTtr0jAn]

Lovely explained tutorial. I knew how to make navbars with a:hove etc, but I still learned something. Thanks mate.

[ryebread761]

Useless video doesn't work.

[thornwebdesign]

@ryebread761 Thanks for the feedback.....Great Comment.....

[ryebread761]

@thornwebdesign Well I may have done something wrong...

[louie540x]

@thornwebdesign

Lmao, I don't know why that was so funny (you replying to useless video comment).

[diacron]

@ryebread761 or you're an idiot...

[ryebread761]

@diacron Or you didn't have to comment.

[diacron]

@ryebread761 You're right...I've inadvertently insulted idiots.

[thornwebdesign]

@diacron Once again thanks for the feedback...be it good or bad....My next tutorial will be useful......"How to listen and follow a Youtube Video Tutorial from start to finish (and watching twice if need be,etc)".....

[diacron]

@thornwebdesign Thank YOU, sir...the tutorial worked perfectly and so does my nav bar. Yes, and please make a tutorial on how to use the PAUSE button. Keep up the good work!

[TheChewyWun]

@ryebread761 works fine for me. Instead of making a sarcastic comment about it not working, maybe you should say why it doesn't work, what's happening? error messages? you know, something to indicate the nature of the issue you're having.

[nightfuries21]

@ryebread761 You just dunno how to follow instructions ^_^

[creeek3]

very clear, very good. Liked the before and afters. Always helpful.

Done  few web pages, but YEARS ago using frames! :)

So just learning about CSS.

[sadnessinmylife]

LOVED IT!!!! THANKS MAN!!! I WAS LOOOKING FOR THIS FOR SOO LONG!!!! THANKS!~!!!!~~!!

[Antzvideoz]

Thanks David, this was a great tutorial and helped me a lot.

Subscribed :)

[Repeater09Games]

thanks a ton i pretty much knew how to this but you made all the css stuff make more sense thanks!

[RUSquad]

One question: How could i put these navigationbar or the buttons all in the middle?

[greenday439]

Great tutorial!!!

[Agrajag68]

Being new to web design I've been looking for a non-javascript way to do this. Fantastic tutorial, thanks a lot.

Cheers

[altisw5]

I tried .button a:active for active links(buttons), but couldn't get it right.

Any ideas?

Thanks.

[altisw5]

Was going to love the full tutorial:

The nav-bar at 10sec shows icons and "Free Tutorial" on the right.

But still thank you. Very helpful tutorial.

Regards,

[cphoenix66]

thank you for this video, made my life a lot easier!!!!

[Arjun007ize]

Nice one, Subscribed.

[thecreativedonkey]

Thanks so much for posting this. It was very easy to understand. I bought 2 books and the code I typed from each never ended up doing what your 10 minute demonstration helped me accomplish.

[ladyfromlondon]

Lovely, easy to understand and very informative.

Thank you very much for the video!

[SneakyFerretz]

thank you so much!

:D lovely tutorial, simple and easy to understand and very effective! good job!

[samcadde]

Wonderful tutorial easy to follow. It helped me what I wanted.

Thanks

[aikin175]

erm...how do i actually link those buttons? pls help :(

[prashiyer]

Great tutorial. Very easy to understand.

[Johnnywoods10]

Great Tutorial!

[ngirlvip]

Please,help me:

when i write the command float: left; nothing happens! I cant put the links side by side on navbar,please,helpme =(

[wellgolly]

I just changed:

.navbar{

width:1000px;

TO

.navbar{

min-width:780px;

max-width:1000px;

adjust to your needs and it should work.

[whitewitch9999]

David, A million thanks to you - I've been trying to do this for months without success.

You make it totally logical and easy, thanks again! NJdesigner

[ARISPREVEZA]

very helpfull! I subscribed to your channel!!!

cheers from Greece

[Spyder638]

Can you expand on this tutorial to show us how to make the same thing, but it auto-expands/contracts depending on the size of the window, as well as the 5 buttons inside? Thanks a lot for the tutorials they're very helpful!

[hellview96x]

great tutorial ! very helpful thx !

[mangoprojects]

thanks for all the work for putting these five css tutorials. Thank you. - behind vfx

[willseyboy]

how can you stretch them across the whole of the nav bar equally?

[ahamd304]

firefox dosent support the navbar_grad .jpg i this tutorial wt i should i do??

[thornwebdesign]

Just to say I am English and very proud to be English too.....

I live in Germany and have done for 10 years......

[lilblake90]

@thornwebdesign what city?

[sadnessinmylife]

@lilblake90 Kitchener, Ontario, Canada

[theylive23]

Good English accent for a German, LOL

[wbmkk]

First video I have seen of yours and very impressed I have been.

Even something as simple as being able to see the code you write is a very big plus factor .. so many Youtube videos have blurred text.

Just one question..

Don't most people use unordered lists for navigation, as opposed to extra divs.

I like to work through your code, using Notepad and it does work all right, but I just thought at first, this was an unusual way.

Regards from the UK

[knight024]

You're right, this method isn't very "clean" when making a large scale website.

[djpuente]

GREAT tutorials!!! I really could listen to you all the time lol. To be serious i really needed these videos for my business project to create a website with CSS. So THX

[sowhatisthequestion]

Why is your Domain German?

[ChowdhuryNurul]

Hi David,

A wonderful demonstration. I am a total newbie to web designing and very curious about learning it.

I have seen many other videos but your style of teaching is the best. Thanks for that and hope to learn more from you. I am going to subscribe to your channel and in the hope to see more videos on website creation and CSS layouts.

I have to go and watch the previous 4 lessons also.

[TheKilleck]

Great tutorial, very helpful!

Been trying to work with a similar image to create edges on each of the elements in the nav bar to make them seem like real tabs (as seen in older archives). Any chance you could make a follow up to this showing how to do this?

[controllerbrain]

excellent excellent vid.

[lexvonsumayo]

this is amazing! thanks mate!

[TheSweets04]

great vid, very helpful, thanks very much

[zardin696]

This is such a quick and informative video, I was up to speed in no time!!!

[fishcomputer33]

Very helpful! great tut!