|
| |
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
 |
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;
}
_____________________________
I Lost My Stuff - If you lost it, someone found it!
|
|
|
|
abbeyvet
Posts: 5095
From: Kilkenny Ireland
Status: offline
|
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/
_____________________________
Katherine
:: InKK Design :: InKK Domains
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
< Message edited by Giomanach -- 9/28/2004 6:35:25 >
_____________________________
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
RE: CSS Roll Over Buttons - 9/28/2004 6:35:44
Didn't notice, Thanks Peter
_____________________________
| |
|
|
|
CelticDragon
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
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?
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 227
Joined: 11/14/2003
From: Dublin, Ireland
Status: offline
|
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
_____________________________
I Lost My Stuff - If you lost it, someone found it!
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
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?
_____________________________
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
