How do I make span class text vanish when CSS is applied.

How can I do it so that when I apply the style sheet, the header that is present should styles be switched off, is replaced with an image? (in this case the logo).

I've managed to write the CSS so that the image is applied but my H1 text is still visible over the top.



This is the HTML:

Code: Select all

<h1><span class="textHide">Bridge Garage - Specialist Cars</span></h1>

And this is the CSS:

Code: Select all

#Header H1 {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: url('images/bridge_logo.gif');
    background-repeat: no repeat;
    left: 22px;
    width: 247px;
    height: 82px;
}

Have I made a mistake somewhere and am just not seeing it?

i think it would go like this.

HTML:

HTML: Select all

<div id=header>
<p class="h1"><span class="textHide">Bridge Garage - Specialist Cars</span></p>
</div>

And your CSS would be.

HTML: Select all

#header .h1 {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: url('images/bridge_logo.gif');
    background-repeat: no repeat;
    left: 22px;
    width: 247px;
    height: 82px;
}

I hope and pray this works, lol.

I really dont understand what u want to do !? please describe more in details

__________________

Designing For Communicating

Website : http://www.datisdesign.com
Weblog : http://blog.datisdesign.com

Basically that header you see over the text? I'm trying to set it up so that is ONLY visible should someone turn off the styling on say a handheld or if they just want basic HTML view and that when someone has the CSS enabled, that the logo is visible instead of the header.

Hmm.. that seems to have removed the logo and not the text...

Could a different stylesheet be of any help? I too dont really understand what you want.

http://creativecoding.webforumz.com/...ircher-php.php

Why? I didn't change any of that, lol.. just added a div and class, lol...

display: none;
added to the h1 should do it.

Other folks prefer adding a -9999px to the text and scoot it over rather than try to hide it.

What I think he means is that in firefox you can turn off the default stylesheet by clicking View > Page Style > No Style and instead of an image being displayed, he wants the H1 text.

Either that or he needs to create a stylesheet for mobile devices