CSS Tabbed Navigation Menu - 2 of 2

[riq1211]

How do you add a dropdown menu to the tabbed menu bar

[BadBoyJr69]

it doesn't work, update this video

[HowToDeveloper]

Your tutorials are always great but please help me out in this problem.Yes I'm a noob at CSS but I know all other programming languages.That's my problem:At Firefox it worked perfectly but at google chrome there weren't any rounded corners.How can I fix the problem ?

[DreamWeaverTutorial]

@HowToDeveloper Hi, for firefox its the -moz prefix but for chrome and safari it is -webkit you have to declare both seperately. Now that CSS3 has become more popular you can just declare the border-radius on its own without the -moz or -webkit prefixes in front. the prefixes are needed for older browsers now. I hope that makes sense. heres what i mean:

border-radius-top-left: 5px; <-- generic

-moz-border-radius-topleft: 5px; <-- specific

-webkit-border-top-left-radius­:5px; <--specific

[HowToDeveloper]

@DreamWeaverTutorial Thank you for the quick answer ! You really helped me out ;)

[p7edn1]

Hi James,

Would this work in ebay as I know their a pain in the ass for not allowing any javascript or php

[DreamWeaverTutorial]

@p7edn1 yes it should work ok as its just css and html

[Rydxii]

-moz-border-radius--topleft:15­px; -moz-border-radius--topright:1­5px;

the code doesnt work :( it sayd unsupported property...i watched the whole tutorial just to know about curved tabs :( plz help...

also tell me the alternative for text-shadow....its also not supported :(

[DreamWeaverTutorial]

@Rydxii hi, go to my site, search for the article tutorial of the same name, copy and paste the code you see there into your CSS document.

[chiller4life1000]

thanks for your help i m a beginner at the moment and will start learning php soon just at html and css at the moment

thanks once again for your help

[chiller4life1000]

hi veri gud tutorial but instead of making 5 pages can a person make it in 1 page with html and css or do we have to use javascript for that

thanks for your help.

[DreamWeaverTutorial]

@chiller4life1000 You can use a php 'include' to put the menu on every page dynamically. there should be a tutorial on youtube for that I'm sure. Generally, for dreamweaver you would just create a template and then roll pages from that template. But, a PHP include is a great way to insert a menu.

[Divyanshuthegame]

YOu ROCK!!!!

[anilr84]

thank you...

[LordNeb]

Hellooo, Really liked the guide. works very well. However i'm getting a cross browser issue myself. works fine on safari, chrome. but on the latest IE the padding between the line and the buttons is slightly different. quite a pain! would you have any ideas on how to get around that one? Many thanks.

[LordNeb]

AHH Ignroe my comment. i was trying to use embedded fonts. they didnt work so im using web safe fonts instead. it looks fantastic! Thank you so much for the guide. so very helpful.

[ajdocs]

Brilliant videos mate, I have learnt so much.  Keep them coming!! Cheers

[gippodave]

hiii can you post the code for this in the discripton please

[DreamWeaverTutorial]

@gippodave The code for all the tutorials is on the website

[afzal1786]

Good tutorial. But heavy use on CSS accessing the DOM elements.

Also, need better explanation on cross-browser issues.

[DreamWeaverTutorial]

@afzal1786 Thanks expert.

[sarremabo]

THANK YOU THANK YOU THANK YOU!!!!!!!

it' s the VERY VERY GOOD tutorial!!!!!

THANK THANK........

[chumox]

:S :S :S :S :S :S!! but your creating 5 diferents pages with the property "onlink" on every one so wheres the dynamic way to have 5 menus :S

[DreamWeaverTutorial]

@chumox learn better English. then ask the question again and then say please.

[davidcrandallmusic]

Yeah, everything is great, but your tutorial here AND your tutorial on your website don't include how to get the effect on IE. Would be a great tutorial, but a lot of people still use IE...why leave them out on the experience?

[DreamWeaverTutorial]

@davidcrandallmusic an update is coming. you can achieve the effect in IE9 by using just border-radius but you cannot just short code so must specify each corner so border-radius: 25px 25px 0px 0px; if you want achieve the same in IE8 and IE7 then you can download and install CSS3pie dot com

[broismeurdad]

Thank you thank you thank you for this tutorial. We all have to start somewhere! Will be watching your others. (easy to digest, easy to follow, great work)

[HouseofKannadigas]

James, u are really an awesome teacher. I like the way u explain. BTW, can u teach us how to create a JavaScript dropdown menu? I mean what if i wanna add a timer to dropdown menu? I want the drop downs to disappear smoothly like an opacity.

[aKiC100]

Hi, great tutorial, just one quick question. My properties tab is blank.. help please?

ty :)

[DreamWeaverTutorial]

@aKiC100 im guessing you mean the properties panel. every change you make in dreamweaver the properties panel goes blank until you refresh the page by either pressing F5 or clicking on the refresh button in the right side panel.

[aKiC100]

@DreamWeaverTutorial

Thank you :)

[mrfreeguitarlessons1]

I can't see the ID field in the properties section. The only fields I'm seeing are "format", "font", "style", "size".. Please help. I'm using Adobe Dreamweaver CS3

[DreamWeaverTutorial]

@mrfreeguitarlessons1 in the properties panel on the far left there is a button for html and a button for css, click on the html button

[mrfreeguitarlessons1]

@DreamWeaverTutorial - There's no buttons on the left of the 'Format' and 'Font' fields which are the farthest on the left of the panel. No worries. I'll figure this out. Anyway, kudos for this great tutorial. =)

[mrfreeguitarlessons1]

I can't see the ID field in the properties section. The only fields I'm seeing are "format", "font", "style", "size".. Please help.

[PekDraine]

Well, it all is great exept one thing, In the end when you set it align center, you do it with, margin left and top. wich means it will just be in the middle for you and your computer, becouse you style it after your view ??

Regards

Ps, great tutorial !

[dashby1969]

Great tutorial!

Thanks.

[Akshayphadke]

doesnt work on IE fail tutorial

[DreamWeaverTutorial]

@Akshayphadke It does work in IE, you just suck at web design

[jardonali123]

@DreamWeaverTutorial It works after adding many metadata tags and what not.. Had to struggle to find all that you need to make it work... and that too it works only from IE 9. Then comes the struggle to find the pixel difference in IE and mozilla. Finally i chose to move to background images.. Bah! I should have done it the first place.. :(

[DreamWeaverTutorial]

@jardonali123 hi, it works in all browsers. If it didn't then you may have made a mistake in the code. Firefox has an issue that I reported with the 1 pixel difference. Its a simple fix

line-height:23px; on the

#navbar #holder ul li a

[bujzz]

Thank you so much for all your help with my project! You are amazing!!!

[bujzz]

Can the rounded corners be applied to a Vertical Spry Tabbed Panel in Dreamweaver?

Thank you!

[Marchonon]

DreamWeaverTutorial most of the people are using FF or Chrome so it works and noone cares about old and chunky IE6,7,8 and even 9 is crap , microsoft has to be shame about their cappy browser

[DreamWeaverTutorial]

@Adnan3035 That's funny because im looking at it right now in IE6 and it looks fine. i also checked it in ie7 ie8 and ie9 and it still works. The only thing that does not work is rounded corners as one would expect from microsoft who have only implemented it into ie9. thats still not a problem as you can download css3 pie to add retro styling to the older IE browsers. suggest you check your coding before you leave silly comments that it doesn't work.

[truemetalist89]

PART1?

[sonicskilz]

It's strange to get this excited about coding, but this menu is gorgeous! And I learned a lot following along. Thank you James.

-Sam

[HamiDjoukou]

Floating List items with display: block affects win XP: Internet Explorer 6.0

Menu is not displayed correctly! menu items positions diagonal over the screen.

[MrRalleuc]

can you help me it doenst work in ie

[LurkerDanny]

To get this centered , would you just change the padding to whatever pixel count ?

[TheSexyCeleb]

Your tutorial is amazing! best i have ever seen. It would be cool if you could make tutorials about javascript and php.

[kleinespelvids]

This is a nice tutorial indeed but I have a question still: is there any way to make a CSS based tab-menu without having to retype the code in each html file? Like is is possible to use a template without going into to much trouble? Because with this example, if you want to change something to the menu, you'd have to go in every page and do it, right? :s

[durrrmind]

Congratulation for the tutorial,it was great ! Thank you ! :)

[akshivanvi]

Loved the video...thank you very much...but neither -webkit-border- nor -moz-border- working on my computer... i am using dreamweaver cs5...PLease help

[teponche]

Hola desde colombia.

Muchas gracias por el tutorial, con este tutorial me aclaras muchas dudas.

Tengo una pregunta: No me funcionan las esquinas redondas que podria ser, por que lo escribo de la misma forma en la que tu lo escribes Gracias

[hoser3699]

Awesome!

[ceresxx99]

Thank you !! you are instructions are clear and to the point. However, after I created the links I do not get a tabmenu.html, only the tabmenu.css. I am using Dreamweaver CS5 and is nothing in my file folder with the name of: tabmenu.html. Could you please help?

Thank you

[bluelizard81]

These are the best instructions I've seen for making a tabbed menu using css! All the other tutorials I found either don't work in ie or involve javascript!

Thank you so much!!

[daveg1510]

great tutorial !!

[DreamWeaverTutorial]

@daveg1510 thank you :)

[kpwebdezigns]

All I can say is AWESOME!!!!!!! Gr8t Tutorial

[DreamWeaverTutorial]

@kpwebdezigns thanks for your comments

[Dexon25]

tnx man this is very nice

[sednamoon]

Very professional presentation. Thank you very much.