[Maciek_Semik]

Hey I’m new in web design and I wanted to learn how to make flip buttons or otherwise a button like “HOME” which is the color blue for example, and when my cursors goes over it, it turns orange. Can somebody please teach me how to do this but so that both the text and the full button turn a different color when scrolled over and so it can be functional as well.

Thanks all,

[pgo]

http://wellstyled.com/css-nopreload-rollovers.html

[Maciek_Semik]

Sorry but that doesnt help me at all. isnt there a simple code that you can use?. See, i would like a simple flip button like the one in this Hosting site http://www.fortunecity.com/ .its just a normal box with text and when your cursor gose over it, it turns orange. Can someone teach me how to make one like the ones in http://www.fortunecity.com/ ?

Thanks

[pgo]

Just search for CSS rollovers. It's quite simple, but you'll have to learn something about what you're doing instead of just copying/pasting.

Anyway, there's a bunch of menus at http://css.maxdesign.com.au (click on Listamatic).

[Maciek_Semik]

Thanks pgo. I tried google-ing other stuff and i couldnt find anything but now i have something to look for. Thanks alot!!

if anyone has any other tips for me then please post.

[sjd]

As pgo said.

As an example, surround your links with a div so you can reference them from the css (in this example you could of course give the list an id instead of using a div), then use the hover pseudo class to change the background when the mouse hovers over them.

<div id="menu">
 <ul>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
 </ul>
</div>

#menu a {
color: red;
background: green;
}
#menu a:hover {
color: green;
background: red;
}

[Maciek_Semik]

I am confused with everything. Would someone be kind enough to post a step-by-step process to making a rollover. it would be really helpful, because all the stuff on the internet is confusing. Love you people. Thanks.

http://css.maxdesign.com.au/listamatic/horizontal02.htm

Ok, here is a site with a rollover and code. what do i do to make it functional on a site in dreamweaver. ???

[rootcomputing]

Not bashing nor am I saying that this stuff is easy. But if theres one thing I do know is that you can not go wrong with google. Now I know some people hate it (Can't seem to figure out why) but as far as web design goes theres a lot to learn. And there is a lot of online resourses.

If you want to go with a hard copy. Go to a book store, barnes and nobels and pick up these books in a series called "In Easy Steps" I think there is one in css, but I know there is one in html. Pick them up, they are only like 10 dollars a piece. If youre serious about doing web design I would get used to reading. Like one of the other guys said before you need to learn, can't always rely on that copy and paste function.

I am no experienced web designer, but I do know that nothing comes over night and I have been playing around with web design for like 2-3 years on and off and I still havn't really scratched the surface. Don't be afraid to read and investigate on your own. If you make a mistake remember it and you try again. Words of wisdom and I hope that changes the way you see things a little. Thanks

[pgo]

Originally Posted by sjd

As pgo said.

As an example, surround your links with a div so you can reference them from the css (in this example you could of course give the list an id instead of using a div), then use the hover pseudo class to change the background when the mouse hovers over them.

<div id="menu">
 <ul>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
 </ul>
</div>

#menu a {
color: red;
background: green;
}
#menu a:hover {
color: green;
background: red;
}

No need for the <div> - what's wrong with:

 <ul id="menu">
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
 </ul>

Works the exact same way.

what do i do to make it functional on a site in dreamweaver. ???

Learn a little bit about what you're doing instead of letting a dumb piece of software do it for you?

You can't get away with not knowing how things work. The answer is right above.

[sjd]

Originally Posted by pgo

No need for the <div>

Yep, already said...

Originally Posted by sjd

(in this example you could of course give the list an id instead of using a div)

I suppose I suggested the div because it's a nice standard way of grouping markup - particularly useful when dealing with a CMS that's automatically outputting things like menu lists and doesn't give you control over the list id. You're right though, I should have simplified in this case.

Anyway, Maciek_Semik, learn the basics of (x)html and css before you dive into dreamweaver. Relying on a gui to output markup is dangerous because you're at the mercy of the application. You'll end up not knowing how to build a web site without using the app and you'll be screwed if you're ever in the situation where it can't be used. Once you know (x)html and css then you can use apps like dreamweaver to speed up implementation.

[pgo]

Originally Posted by sjd

Yep, already said...

Sorry, didn't notice. Apologies.

[Maciek_Semik]

All you guys were alot of help!!!!! i found out how all the code works and i cant belive it was soooo simple! I now know how it works and my site has nice CSS rollovers. Thanks and sorry for being such a newbie

[pgo]

No problem.

[Maciek_Semik]

Thanks again