css div image information for search engines - css

Question

I have a website and in the main page a I have a div with an image where with a very nice design says "contact us by calling 1 800 blabla..". so I was thinking if the only place where the phone number of my company, is on a div with an image background, how the search engines are going to recognize or find my company's number,
so my question is basically how can I add information to this div which is :
<div id="phone"></div>
and any other div that i need to put information for robots and stuff

Answer 1

It's pretty easy using an image replacement technique.
<div id="phone"><span>11-1111-1111</span></div>
And the CSS.
(change your phone div to be whatever you need it to be, but you'll need to define a width and overflow: hidden to hide the text.
#phone
{
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
}
#phone span
{
position: absolute;
left: -999em;
}
Alternatively, without using extra markup (I read somewhere that google disapproved of using text-indent in this way which is why I didn't use this first, but I can't find the source for that).
<div id="phone">11-1111-1111</div>
And the CSS.
#phone
{
width: 200px;
height: 100px;
overflow: hidden;
text-indent: -999em;
}
Additionally: http://css-tricks.com/css-image-replacement/ looks like a fairly decent resource.

Answer 2

You might want to look into hCard microformat specification and create an HTML code something like this:
<div class="call-us vcard">
<span class="tel">
<span class="type">business</span>
<span class="value">+1.800.blabla</span>
</span>
</div>
Where the call-us classname formats the div by setting its dimensions, visually hiding the span.tel tag and adding the image as a background. Search engines would recognize that this is a contact card (note the vcard classname), and they would correctly parse the phone number.

Answer 3

You have to use this approach
#ContactInformation {/* your image and restof padding */}
#ContactInformation h2 { display: none; visibility: hidden; }
<div id="ContactInformation">
<h2>Phone:</h2>
<label>1 800 blah blah</label>
</div>
Actually Search Engines See and check h2 tag and it's value but your user wont see the h2 text.