Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups

web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





Pages (2): [1] 2 »   Last Thread  Next Thread
Author
Thread Post New Thread   

Trouble with CSS Rollovers.
 

webguru




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 09:21 AM  
Okay,  In the comps.language.javascript newsgroup, I was convinced to
use CSS Rollovers instead of javascript.  The first rollover went
great.  Although I can't get the text to align vertically in the
middle, It's a much cleaner way to do it and it works okay.

However, my second rollover is not as good.  This one has no text over
the button, and the CSS looks like this:


a.go:link{
background-image: url(images/Home_08.jpg);
text-decoration: none;
height: 30px;
width: 41px; }

a.go:visited {
text-decoration: none;
height: 30px;
width: 41px; }

a.go:active {
text-decoration: none;
height: 30px;
width: 41px; }

a.go:hover{
background-image: url(images/Home_08_over.jpg);
text-decoration: none;
height: 30px;
width: 41px; }


It's pretty much the same one as my first one, but without the extra
text attributes.  My HTML looks like this:


<TD width="41">
<a class="go" href="#">&nbsp;</a>
</TD>


My problem is that when I display my page, nothing shows up in that
cell until I move the mouse over it, and then the rollover image shows
up.  When I move it off the cell -- poof -- no image again. I checked
the filename and everything is correct, but no image is showing when
the cursor is not in the section.

This, of course, is not acceptable.  Can anyone please help me?  Thanks
so much!



Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

webguru




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 09:21 AM  
I finally figured it out.  What I had to do, since there was no text in
the anchor (<A> ) was add the following to my CSS file:

a.logo{
background: url(images/Home_10.jpg) no-repeat;
text-decoration: none;
height: 68px;
width: 135px;
}

Now it shows up even though I don't have any text in the link. :0)  I
hope this helps somebody else struggling with this!



Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Spartanicus




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 09:21 AM  
"webguru" <ralphquarles@hotmail.com> wrote:

><TD width="41">
>   <a class="go" href="#">&nbsp;</a>
></TD>
>
>
>My problem is that when I display my page, nothing shows up in that
>cell until I move the mouse over it

Your problem is that you are abusing tables and CSS. Tables are for
marking up tabular data, and key to proper usage of CSS is that it's
optional, thus your page should work without it.

--
Spartanicus


Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

webguru




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
I don't understand what you mean by abusing tables.  What's optional?
I started with a .PSD graphics, sliced it and saved it for the web.
That produced the table I am using with the images, and I am using CSS
to produce the rollover on the buttons.

Sorry, I am a newbie at this.  Is there a better way to do this?

Thanks,

webguru



Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

webguru




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
Oops, I actually meant I had to add this text.  I grabbed the wrong
class. :0/

a.go{
background: url(images/Home_08.jpg) no-repeat;
text-decoration: none;
height: 30px;
width: 41px;
}



Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Spartanicus




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
"webguru" <ralphquarles@hotmail.com> wrote:

>I don't understand what you mean by abusing tables.

Again: Tables are for marking up tabular data.

>What's optional?

Again: CSS.

>I started with a .PSD graphics, sliced it and saved it for the web.
>That produced the table I am using with the images

Image slicing is sooo 1996, high time for you to catch up with the
times.

>, and I am using CSS

You are ABusing CSS.

>to produce the rollover on the buttons.
>
>Sorry, I am a newbie at this.  Is there a better way to do this?

Better way to do what?

--
Spartanicus


Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Beauregard T. Shagnasty




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
webguru wrote:

> Okay,  In the comps.language.javascript newsgroup, I was convinced to
> use CSS Rollovers instead of javascript.

Good plan.

> a.go:link{
> a.go:visited {
> a.go:active {
> a.go:hover{

Your classes are out of order. "Las Vegas Has Animals."  LVHA ...

--
-bts
-When motorcycling, never follow a pig truck


Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Els




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
Beauregard T. Shagnasty wrote:

> webguru wrote:
> 
>
> Good plan.
> 
>
> Your classes are out of order. "Las Vegas Has Animals."  LVHA ...

<cough> ;-)
Las Vegas Forest Has Animals...

--
Els                     http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -


Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Beauregard T. Shagnasty




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
Els wrote:

> Beauregard T. Shagnasty wrote:
> 
>
> <cough> ;-)
> Las Vegas Forest Has Animals...

But .. but .. there is no forest in Las Vegas!  <cough> <choke>

--
-bts
-When motorcycling, never follow a pig truck


Post Follow-Up to this message ]
Re: Trouble with CSS Rollovers.
 

Beauregard T. Shagnasty




quote this post edit post

IP Loged report this post

Old Post  09-24-05 - 11:20 PM  
Janusz 'Kali' Kaliszczak wrote:

> Beauregard T. Shagnasty wrote:
> 
[Els] 
>
> A heard this:
> "LoVe & HAte" and "LoVe, XXXX, HAte" :)
> Easier to remember :) IMHO :)

And you also have to remember .. is it the third letter of the first
word and second letter of the last word, or do I have that backwards?
LOHT... ? :-)

Most mnemonics use the first letter of each word, though I don't think
there is a real rule governing that...

--
-bts
-Visit the zoo in Las Vegas


Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 06:46 AM. Post New Thread   
Pages (2): [1] 2 »   Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top