[HD] Dreamweaver CS4: CSS Pixy Style Rollovers

[avocadomilk2010]

amazing. ur a great teacher.

[MarcinEurope]

5 stars

[MarcinEurope]

thank you very much ur amazing!

[caweren222]

or you could simply go to the CSS code and type

.menubutton:hover{

background-image:url(x/xxxx.jp­eg);

}

Takes 2 seconds.

[mime225]

Clever!

[wizzofwater101]

Very hot...Thank you!! Really helped. :) All of the other ones I've seen were really complicated :/

[TrueLoveDesign]

Great Video Thank you.

[dyquen85]

Hey I followed everything and i tested it on firefox and everything looks great but in safari it still has that basic setup with the nav bar links, how come its not previewing correctly in safari?

[upfull0ne]

@dyquen85 you may just be experiencing a lag in the time it takes your server to update the css file.

[mastajaaku]

can any body show how to make a search engine like on this site .filespie.com

[hihaatje]

@mastajaaku haha good luck ;) if i were you id go to google and ask them for a custom search.

[mri2c]

I think I love you!!!!!

[Nanotech009]

How can you post a video longer than 10 minutes?

[Nanotech009]

What screen video capture software are you using? I want to make a video for youtube. Thanks Tutvid, great stuff! Please someone shout out a good screen capture software for videos. Much appreciated.

[Skyrodude]

whats the name of the song (in the beginning)?

THANKS`1

[brainslay3r]

You sound exactly like one of the radio show hosts in my area.

[MrRommiRome]

DUDE!!!! U HAVE ALL THE FUCKIN ANSWERS!!!! I DIDNT EVEN LIKE DREAMWEAVER BCUZ IT WAS TO HARD BUT JUST WATCHING 3 OF UR VIDEOS I LEARN ALMOST EVERYTHING I THINK I NEED TO KNOW ABOUT CSS!!!!!

[mastajaaku]

hi there can you tell me witch is better to use to layout my pages a div tag or tables?

[privatepavel]

@mastajaaku

learn css and use div tags rather than tables...pages load faster and are better looking

safe

[MrSmartsoftware]

thanks for sharing. This is really very helpful video.

keep going......

[pwnage1407]

booo - using jpegs for the website!

[iXzerty]

I´ve been looking for this for such a long time, thank you véry much!

[toshow1022]

so with dreamweaver you can make websites?

[ClaudiusCallas]

Hey. Thanks for your excellent tuts.

Could you make another one explaining how to take care of the top and bottom - without including CSS3?

[rougeson]

by the way man,what if  i want the rollover menus to be centered not in the left,is it possible.

[rougeson]

nice man.you did very well and clear...

[mcf2670]

Good information, but you talk too fast...not a great follow along learning tool

[SFDSea]

@mcf2670

There is a Pause button for that. His tutorials are the best I have seen.

[zoodeckian5]

I was impressed by your instructional skills on this tutorial. The problem is I was unable to achieve the final result after watching this video multiple times! I am using DW cs4. The nav bar looks good in design view but when I switch to live view it just displays the links in word form with no background image and no effect. Flash player 10 is installed. Am I missing a plugin or program of somekind? Do I need fireworks for this to work? Thanks for any help on this.

[jimbobg65]

@zoodeckian5 I have the same problem, yet it still works when previewing in the browser or when uploaded to the web. It's to do with the links to the images. They need to have a dot-slash "./" in the links if you're using relative links for it to work in preview mode, or sometimes dot-dot-slash "../" depending on which directory your images are in compared to the page you're working on. Bearing in mind though, this can cause problems for other things.

[02javis]

Nathaniel ...to zoom in photoshop.. go to edit menu -preference - general- zoom with scroll wheel.

really its fun and faster that way.

thanks for your great tutorials.

[mistertween]

SUPERDUPER!!

[K0st3kK]

haha thanks! :D I love you mate

[kandesnb]

This tutorial is awesome! You just saved my website!

[Daphne607]

I tried following the tutorial and everything seemed to work great except the rollover affect. I used Dreamweaver mx 2004 and Photoshop CS, would this still work?

[aaronjaggan]

awesome!~

[snatchmaster19]

Awesome job!

[hillmajo]

great step by step tutorial!

[gregorygroupnet]

tutvid, I think I got your point.

[TymarDragon]

great tutorial, really helped me get my head around things.. fast and easy.. Thankyou.

[stablina]

Great tutorial......thanks man

[TheWebsonic]

Fantastic man. You nailed it.

[ReLoadXxXxX]

keep it up ,

o0ohdtutorialso0o.

see my channel im struggling for subs

[denno021]

Mate, you talk so quick, but yet I still understood every part of it. And the best part was that you weren't fumbling over your words. Great tutorial. Definitely subscribing. Very evident you know what you're talking about. Great work again :)

[realguitarshredder]

I am trying to use the eyedropper tool but its not capturing the colors, any color for that matter.. Its set to point sample and when I click on a color on the screen it just gives a dot and a number, but it does not add to the gradient color. PLease help

[narayanadas]

hi brother my name is nahuel im from argentina, the video was cool! i saw it about 5 times! haha is good.

thanke you

pd:_ the botons prev tutorial and next tutorial are baddd they don`t let me see good!

haha

[VegaOmega23]

Very nice buddy, I'm going to do this for my buttons tonight.

[Johnnys100]

Thanks man, great tutorial.

[anco250]

well, thanks so much man...

[ImusicRadio]

PLEASE HELP. Iam trying to use the lay out table or the lay out cell. but i can not. i have cs4 trail. Is it because I dont have the full virsion? thanks for the great video.

[lennyguitar03]

what is that background on his mac? its really cool

[CompAssist]

thanks! i was wondering how you do this.

[vutoanit]

Thanks Man

[neightn]

i think i already posted this, but I have a dreamweaver question. its in a video on youtube. please type "neightn dreamweaver" in the search to see my question about dreamweaver. thank you

[tnic469]

Dang man, I really like your teaching style and knowledge; very animated!

[ProjectMagik]

Lmao You either do the trial, buy it for like 500$ or get a cracked version

[sakawaworld]

does photoshop come with dream weaver bcos am trying to buy dream weaver and where can i get it for cheap

[inhailracing]

Great tutorial your videos have taught me Dreamweaver better than I could have imagined! One question about block settings in this video, is there a way to center the blocks every time I try to adjust this I only get a stacked middle buttons. any thoughts?

[radubriel]

dreamweaver cs4 full licence. Who wants?__

[TheSpiker1]

do you have the Dreamweaver Cs4 Licence

[ChudzUK]

It seems alot more work that just creating to 2 images and using a javascript to change the rollover image? whats the benefit of doing it this way?

[asskickingdick]

less images to upload

[oscarsanders07]

u + dreamweaver = ultra-super-nerd!!! irotflmfaob!!! how did u find a way to make even THIS boring huh?????

[NEIK91]

shut the fuck up

[jgarcia3228]

Very well done...

[lampiew]

Great video. Thanks

[mixz2000]

Great tutorial, thanks! I would also like to give one tip about removing a default property that I thought was incredibly disturbing if used together with these great rollovers. When you click on a rollover link you will very often get a nasty dotted outline around the clicked image. Put this code into your layout css and the problem should be solved:

{ -moz-outline: none;

}

[mixz2000]

Oh sorry I missed a bit:

#wrapper #navigation a:focus { -moz-outline: none;

}

[salamosabrossa]

cool stuff

[ZoyzCoUk]

Super cool stuff with easy guidance.. Thank you mate!!

[pinayvibes]

omg this is way better than making a button base image and a roll over image... two birds with one stone.

unless your using an uncommon font that needs to be saved as an image for a button.

[youtoooobed]

This is a great video, thank you.

[titalminarisa]

Nice work. keep it up. mean time come for social media marketing for esteembpo**com

[HazyFilms]

so that's a rollover?

I thought it was when you roll the mouse over a link and then a list of other links appear down it.

like if I put my mouse over ABOUT and then a list appears that says WEBSITE or MYSELF

?

[zainil0]

no, what you just described is a drop down menu.

[antzzz111]

great vid

[ReddsMorris]

As always a good job

[alydhiends]

Thank you very much! 5/5 :)

[hypez181]

You should use css sprites. They are more effective and allow more control.

[gallomex13]

awesome!!! thanks!

[jonsuther]

Great job!

Any tuts coming about integrating some kind of CMS for clients to change information?

[digitalmorphine]

It's the same method used on Youtube, by the way.

[067077]

another awesome tutorial again, as usual :)

[tirathmistry]

Awesome tutorial video tutvid

Very useful & 5 star tutorial video

Thanks so much for your kind effort for always making Detail & Useful tutorial videos from us

Your all video tutorials are awesome & Valuable for us

You are Genus

You are Like a Big assets for Youtube & us

We feel Glad that we are subscriber of your awesome tutvid Channal

Keep Up Good Work tutvid

Thanks With Lots of Love & lots of Blessing

God Bless you :-)

[particleproductions1]

Thanks for the video, you rock!!!

[ned316]

how do i SEND MY PICTURE for the contest?...

[lorik1641]

ned316, Look on the Tutvid website.

[sudansh]

nice tutorial..

bt how did you manage to upload vid with more than 10min duration :O

[crazycrisco]

If your account type is Guru or Director you can upload videos I think up to an hour or maybe more.

[ZookanProductions]

That rule was scrapped since the partner program came into play, it's because he is a partner.

[samerhadionline]

Only people with a directors account that was opened in 2006 or before can upload videos longer than 10 minutes.

[joejc07]

PARTNER....

[LZfootball9]

it has something to do with being a youtube partner and being a member of youtube before a certain time...sorry to be so vauge but its something along those lines

[StumpyMcN0Legs]

because he is a partner thats how

[andrewwk6]

you rock! I didn't know how to do this by css, I did that once but just the traditional way... this way saves so much time! thanks!

[WizardShroom]

Great video!

[babi735]

nice

[TehDreamWalkeR]

Thank you

[AdobeTutorialMan]

Great Tutorial

[UnrealNate]

Ive been looking for something like this

[NapoLoso]

thanks for another great vid, really helps a lot.

[GarabatoxTut]

Nice Video!

[vVTriggaVv]

Nice

[ZombieCrusherLive]

first

[stars4ever]

third actually

[futurehollywood22]

yah

[lilandy1]

first :D