Topic: Cell Backgrounds Pages that link to <a href="https://ozoneasylum.com/backlink?for=21414" title="Pages that link to Topic: Cell Backgrounds" rel="nofollow" >Topic: Cell Backgrounds\

 
Author Thread
templar654
Bipolar (III) Inmate

From: Aiur, in the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-17-2004 07:38 Edit Quote

Does anyone know of a good tutorial to change cell backgrounds on hover. Everytime I try to do it all that changes is the background of the text??

... e'sssaa 'de templar'e ...

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 04-17-2004 08:26 Edit Quote

td a:hover {background-color: #FFFFFF; display: block;}

It's the display: block that's important here...it converts the anchor so that it's activation area covers the entirety of it's containing element.

Justice 4 Pat Richard

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 04-17-2004 08:56 Edit Quote

or if you use a standard compliant browser ( understand : neither a 4th generation browser nor IE ) you can simply use

td:hover { background-color:#fff; }

templar654
Bipolar (III) Inmate

From: Aiur, in the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-17-2004 21:22 Edit Quote

Ok I got the cell background right but another problem came up. Now when I hover over the cell the text inside shifts upwards, WHAT DO I DO WHAT DO I DO!!!!

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 04-18-2004 02:25 Edit Quote

check that all your padding, margins, and borders are identical (or equivalent in total) in both the normal and hover states.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 04-18-2004 12:08 Edit Quote

What do you do? Don't YELL. It's not going ot make it any easier or any more usrgent for us to look at the problem.

Justice 4 Pat Richard

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-19-2004 08:07 Edit Quote

hee hee sorry about that but ummm it still don't work just check my css is it ok?

.box a:link {
height: 21px;
width: 21px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #151515;
border-right-color: #151515;
border-bottom-color: #151515;
border-left-color: #151515;
background-image: url(assets/images/bg2.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
text-decoration: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
}
.box a:hover {
height: 21px;
width: 21px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999999;
background-color: #151515;
display:block;
text-align: center;
vertical-align: middle;
}

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 04-19-2004 14:07 Edit Quote

You know, it would help if we also had the HTML blurb that is f***ed up, and if you mentionned in which browsers you've tested your code and where it works or not. Anyhow you should check the specifications of CSS.

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-19-2004 18:21 Edit Quote

Never mind fixed it. But I have a nother question. I don't know whether this comes as CSS or JavaScript but how do you get custom tool tips you know like you hover over a link and you get a small description or something like that something like the ones you see on the Windows|Mac Interfaces??



(Edited by templar654 on 04-19-2004 09:24)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 04-19-2004 18:43 Edit Quote

See the title attribute in the definition of the A tag in HTML3.2

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 04-19-2004 21:31 Edit Quote

Yep. Basically:

code:
<a href="blah.html" title="This text will appear in a tooltip.">

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-20-2004 08:50 Edit Quote

No no I know how to do that but how do you get custom tooltips? I'm beginning to think this is more javascript than css.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 04-20-2004 10:50 Edit Quote

Explain further or show examples of what you mean by a 'custom tooltip' and we may be able to help you

Justice 4 Pat Richard

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-20-2004 12:52 Edit Quote

custom in the sense that I may be able to put stuff like images or tables in the tooltips. If you've been to Infinite-Fire's website(previous version) you must have seen it, it's was on almost every page.

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

IP logged posted posted 04-20-2004 17:36 Edit Quote

*yeech* It may also be beneficial for you to learn short-hand CSS. For instance, your code above can be compressed into the following:

code:
.box a:link, .box a:hover {
height: 21px;
width: 21px;
border-width: 2px 1px 0px 1px;
border: solid #151515;
background-image: url(assets/images/bg2.gif);
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
}

.box a:hover {
background-image: none;
background-color: #151515;
display: block;
}



"Nothin' like a pro-stabbin' from a pro." -Weadah

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 04-21-2004 05:06 Edit Quote

It also might help if you actually said thank you once in a while... I've seen a number of your threads where people have helped you with your problems, and not once have you said "Thanks." Call me old fashioned, but I think it's nice to express gratitude.

___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | Keeper of the Juicy Bits

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 04-21-2004 16:42 Edit Quote

That, and don't assume that everyone knows the sites that you know. I personally have never heard of this 'Infinite-Fire' in my life, so maybe if you could hunt up an example or two?

Thanks

Justice 4 Pat Richard

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 04-22-2004 07:25 Edit Quote

I assume this is what he means by custom tooltips: Pure CSS tooltips.

templar654
Bipolar (III) Inmate

From: Aiur, the Tarsonian Galaxy
Insane since: Apr 2004

IP logged posted posted 04-23-2004 08:31 Edit Quote

No never mind, made it thanx anyway. I found that page too ozphactor



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu