Overwriting Images with text using CSS

**Dimitriy** · 10-06-2005 08:36 PM

Ok basicly I have a bunch of buttons and pictures and I want to overlap them with text. Anyways the purpose is that when people access my site they will be able to access it on dailup with out loading a bunch of images. Hope that made sense.

Ohhh here is the site that I would it work for. Use this link.
Mysite

Also any suggestions that you might recommend. NOTICE the site is in very early development everything was done by hand so its not the snazziest around.

**occastles** · 10-07-2005 11:19 AM

I think the best way to do this would be with CSS. Just specify a background image for that class, then assign that class to the menu item(s), so each menu item will have that image as their background.

Or you could specify an image as the background for that table cell... but the CSS works better.

**Dimitriy** · 10-07-2005 03:08 PM

I have never used CSS before. Could some one provide a site that has that information? Please dont send me major tutorials on CSS a to z but just for this example. I will sometime get on it but not with this project. I used HTML and WYSIWYG editors plenty of times along with some php and javascript. Thanks in advanced.

**occastles** · 10-07-2005 04:30 PM

Here's a sample site: http://www.investmentpropertysolutions.net/

This goes in the <head>:
<link rel="stylesheet" type="text/css" href="/styles.css" />

This is the styles.css file (you can the file anything.css)
<style type="text/css">

</style>

And here's a href tag:
<a href="/a_for_rent.mv" class="iMenu">Your text here</a>

the great thing about this is if you want to change what the links look like, you just change the one file and all links on your whole website for that class change. You can do these CSS for form button, form boxes, fonts, lists... just about any HTML tag.

**frobn** · 10-07-2005 05:45 PM

Originally Posted by Dimitriy

Ok basicly I have a bunch of buttons and pictures and I want to overlap them with text. Anyways the purpose is that when people access my site they will be able to access it on dailup with out loading a bunch of images. Hope that made sense.

Ohhh here is the site that I would it work for. Use this link.
Mysite

Also any suggestions that you might recommend. NOTICE the site is in very early development everything was done by hand so its not the snazziest around.

There are several sites that have css menu makers, here is the best one in my opinion listamatic/list-a-matic

**Dimitriy** · 10-07-2005 07:01 PM

Thanks for all the responses. I am sorry that I still dont understand. Ok I am using NVU, and opensource WYSIWYG editor. Anyways here is what I want to know.

Ok I this piece of code:

Code:

                  <td
 style="background-color: rgb(130, 168, 204); width: 166px;">
                  <div style="text-align: center;"><a
 href="index1024x768.html"><span
 style="text-decoration: underline;"></span></a><a
 href="index1024x768.html"><span
 style="text-decoration: underline;"><img
 style="border: 0px solid ; width: 166px; height: 23px;" alt=""
 src="Images/1024/buttons/button_home_off.png"
 srcover="Images/1024/buttons/button_home_on.png"></span></a><br>
                  <a href="index1024x768.html"><img
 style="border: 0px solid ; width: 106px; height: 131px;" alt=""
 src="Images/1024/agent.jpg"></a><a
 href="index1024x768.html"><span
 style="text-decoration: underline;"></span></a></div>
                  </td>

Ok where would I stick this code? In the img tag or the cell tag??? And do I need another file on my server, this CSS file? Remember I simply want to overwrite images with plain text.

Occastles: I noticed that when I went to the site you mentioned and it rendered incorrectly in Firefox. I tested it in IE6 but I would like Firefox users to be able to use it to.

Any more advice??? I am open to opinions. Please look at my site to understand what I am trying to achieve. My site

Thanks in advance.

Real Estate Webmasters

Learn More:

Thread: Overwriting Images with text using CSS

Thread Tools

Display

Overwriting Images with text using CSS

Re: Overwriting Images with text using CSS

Re: Overwriting Images with text using CSS

Re: Overwriting Images with text using CSS

Re: Overwriting Images with text using CSS

Re: Overwriting Images with text using CSS

Posting Permissions

Real Estate Webmasters

Contact Information

Request a Quote

Website Solutions

Realtor Community

Testimonials