User Name
Password
AppleNova Forums » Genius Bar »

CSS : substituting images for text


Register Members List Calendar Search FAQ Posting Guidelines
CSS : substituting images for text
Thread Tools
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2005-04-05, 22:57

Okay, I've come a looong way since the last time I posted questions about CSS for you guys. Here's something that I'm taking to dreamland with me to puzzle over with my subconscious mind:

If I make the following paragraph:

Code:
<p class="example"><a href="http://www.applenova.com">Apple Nova</a></p>
I know that I can make a class style that renders that paragraph as a block element and that I can give that block element a background image. However, if I want that background image to work as a substitute for the text (a graphic image of the AN logo instead of the text "Apple Nova") that my success is going to be hit or miss, relying on using transparent text or spottily implemented opacity tags.

What I'm wondering is, can I instead use an ALT tag to accomplish what I'm after? I just want to make sure that I can make some alternate stylesheets for my site that are plain vanilla, graphics-sparse pages.

So, if I do THIS:

Code:
<p class="example"><a alt="Apple Nova" href="http://www.applenova.com"></a></p>
Then make my p.example style a block element with a background image for my graphics-rich stylesheet and yet make it (p.example) normal text in another stylesheet?

The answer is one experiment away, but I thought I'd post it here for discussion before I hit the sack.

Any instructional dialogue would be nice. Humming is good too.

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Gargoyle
http://ga.rgoyle.com
 
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
 
2005-04-06, 03:23

If I have understood you correctly, the following will hopefully lead you to where you want to be:-

Code:
<style> p.fancy { // Set the background image background: url(etc,blah,blah); } p.fancy b { // Hide the <b> tag. display: none; } p.simple b { font-weight: normal; } </style> <p class="fancy"> <b>Some Text</b> </p> <p class="simple"> <b>Some Text</b> </p>
In these examples you can replace the <b> tag with whatever you want. Even a "span.someclass" might be neater.

I have deliberately not used a link, because if you hide the contents of the link, then what will the user click on?

OK, I have given up keeping this sig up to date. Lets just say I'm the guy that installs every latest version as soon as its available!
  quote
ast3r3x
25 chars of wasted space.
 
Join Date: May 2004
Send a message via AIM to ast3r3x  
2005-04-06, 06:50

I'm so confused...I spend 5 minutes reading over it last night trying to figure out what he wanted to do.

I assumed he wanted formatted text to display if he didn't have the picture.

-or-

He wanted a picture to show, but have transparent text over top of it so it was the proper width/height to display the image.


Of course I was so confused that I am sure that is not it.
  quote
drewprops
Space Pirate
 
Join Date: May 2004
Location: Atlanta
 
2005-04-06, 07:13

Ha!
You're right, I should never write things when I'm half-asleep (which would of course reduce my writing output by 90%).

Gargoyle seems to have understood what I want to do very nicely, I can't wait to try it out! Ast3r3x, it was your FIRST impression that I'm after; I'd like to have my CSS degrade from displaying pretty buttons to straight-up text.

I'm not ready to show my site to the world yet but I'm PMming you guys to show you what I've been up to for the last few months (read: for the last YEAR)...

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
OSX Questions: Fonts & Desktop Images Track_40 Genius Bar 3 2005-02-05 12:47
CSS question. Wickers Genius Bar 33 2005-01-04 16:49
Inline Images HOM Feedback 18 2004-05-18 17:13


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 13:49.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova