CSS Roll Over Buttons

All Forums >> [Web Development] >> Cascading Style Sheets

Message

CelticDragon -> CSS Roll Over Buttons (9/28/2004 4:18:05)
Hey guys, I'm getting to grips with CSS quite nicely now.... One or two questions though: Is it possible to declare the height of a table cell/row in the td command? I've tried with basic Height: 10px; but it didn't seem to work..... Also, more importantly as I'm still using tables because I prefer them(!), I have some code that I have figured out for my navigation buttons but for some reason once the page has been visited, it only shows button 3, never button 2 (Button1: Light blue, Button2: Dark Blue, Button3: Purple)..... How do I get button 2 to show on a hover even when the page has been visited? Thanking you! STUPID EDIT: Would help if I showed my code, wouldn't it? [:)][&:] a:link.button { width: 118px; height: 28px; text-decoration: none; background-image: url('images/button1.gif'); background-repeat: no-repeat; color: #FFFFFF; font-size:12px; font-weight:bold; font-family: Arial, Verdana, Helvetica, sans-serif; text-align: left; vertical-align:middle; padding: 6px; margin-left: 2px; } A:hover.button { width: 118px; height: 28px; text-decoration: none; background-image: url('images/button2.gif'); background-repeat: no-repeat; color: #FFFFFF; font-size:12px; font-weight:bold; font-family: Arial, Verdana, Helvetica, sans-serif; text-align: left; vertical-align:middle; padding: 6px; margin-left: 2px; } A:visited.button { width: 118px; height: 28px; text-decoration: none; background-image: url('images/button3.gif'); background-repeat: no-repeat; color: #FFFFFF; font-size:12px; font-weight:bold; font-family: Arial, Verdana, Helvetica, sans-serif; text-align: left; vertical-align:middle; padding: 6px; margin-left: 2px; }

abbeyvet -> RE: CSS Roll Over Buttons (9/28/2004 5:02:20)
There is a much easier way to make buttons than this, using simple lists. Try it out - even if it seems a little confusing at first, it really does make it quick and easy once you get the hang of it: http://css.maxdesign.com.au/listamatic/

Giomanach -> RE: CSS Roll Over Buttons (9/28/2004 5:47:43)

Try altering this, I used the following CSS here

.nav a.home{
	background-image: url(images/nav_home.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 83px;
	padding-right: 5px;
	padding-bottom: -10px;
}

.nav a:hover.home{
	background-image: url(images/nav_homeH.gif);
	background-position: center center;
}

.nav a.profile{
	background-image: url(images/nav_profile.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 83px;
	padding-right: 5px;
	padding-bottom: -10px;
}

.nav a:hover.profile{
	background-image: url(images/nav_profileH.gif);
	background-position: center center;
}

.nav a.services{
	background-image: url(images/nav_services.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 110px;
	padding-right: 5px;
	padding-bottom: -10px;
}

.nav a:hover.services{
	background-image: url(images/nav_servicesH.gif);
	background-position: center center;
}

.nav a.support{
	background-image: url(images/nav_support.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 95px;
	padding-right: 5px;
	padding-bottom: -10px;
}

.nav a:hover.support{
	background-image: url(images/nav_supportH.gif);
	background-position: center center;
}

.nav a.portfolio{
	background-image: url(images/nav_portfolio.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 115px;
	padding-right: 5px;
	padding-bottom: -10px;
}

.nav a:hover.portfolio{
	background-image: url(images/nav_portfolioH.gif);
	background-position: center center;
}

.nav a.contact{
	background-image: url(images/nav_contact.gif);
	background-repeat: no-repeat;
	background-position: center center;
	padding-left: 100px;
	padding-right: 20px;
	padding-bottom: -10px;
}

.nav a:hover.contact{
	background-image: url(images/nav_contactH.gif);
	background-position: center center;
}

But as Katherine says, their are easier ways

Donkey -> RE: CSS Roll Over Buttons (9/28/2004 6:13:25)
Dan There is a repeated spelling error in your code "paading-right"

Giomanach -> RE: CSS Roll Over Buttons (9/28/2004 6:35:44)
Didn't notice, Thanks Peter

CelticDragon -> RE: CSS Roll Over Buttons (9/28/2004 7:31:55)
Hey Dan, I think I have that figured, but I like the idea of people being able to see where they've been with the different color link, it's just that it gets boring then when they go to hover over it again.... Is there a line of code I'm missing to make it repeat the hover?

Giomanach -> RE: CSS Roll Over Buttons (9/28/2004 7:42:46)
YOur links should be in the following order: a:link a:visited a:hover a:active a:focus Just alter the order of them in your stylesheet and it should work fine Dan

CelticDragon -> RE: CSS Roll Over Buttons (9/28/2004 7:48:16)
quote: ORIGINAL: Giomanach YOur links should be in the following order: a:link I know this one a:visited I know this one too a:hover Have that one a:active What does this one do? Which should it be the same as? a:focus What does this one do? Which should it be the same as? Just alter the order of them in your stylesheet and it should work fine Dan

Giomanach -> RE: CSS Roll Over Buttons (9/28/2004 7:52:01)
Did you alter the order to what I gave? active - if the link returns a page, it will be displayed as active. Using this is a simple, and easy visual way of finding dead links. focus - What happens when you click on the link, sorta like the onFocus command in JS, but it only controls colors background etc, not browser behaviour You need to have the heirarchy of CSS link formatting in the order given. The last two are not a requirement, just ensure that you have them in link, hover, visited order to ensure the hover always works. I'm confusing you aren't I?

CelticDragon -> RE: CSS Roll Over Buttons (9/28/2004 8:05:46)
Woo hoo!!! I get it, cheers Dan!

c1sissy -> RE: CSS Roll Over Buttons (9/28/2004 11:05:02)
Hi CD, Here is a link for you that you should read that will help you out a bit understanding the links. http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements I would suggest going through their whole site. The information in there is terrific. And I believe that the focus part of the link elements is actually for forms. Its not specifically for linking pages. There is an explaination here on this http://www.frontpagewebmaster.com/fb.asp?m=221056 I hope this helps you out with this one CD. have a great one!

Page: [1]

0.0625