Autor Zpráva
Petra z Votic
Profil
Když mám nadpis h2 udělaný pomocí obrázku na pozadí a chci, aby se mně text pro SEO, který obrázek překrývá zobrazoval i při vypnutých obrázcích v prohlížeči.

inspiroval mě návod na intervalu - pomocí tohoto řešení dosáhneme toho efektu, že se obrázek zobrazí klasicky a kvůli SEO pod něj vložíme jeho ekvivalent v textové podobě. Toto řešení zajistí, že je text viditelný i tehdy, když máme vypnuté obrázky

Problém je, že na webu časem budu mít např. 50 takových rozdílných nadpisů a proto potřebuji kód co nejvíce minimalizovat.

Nevíte někdo a, ještě o lepším řešení
b, jak tento můj zápis ještě nějak zkrátit

PLEASE - řešení nepoužívej obrázky neberu :))

<div class="head"><h2 class="logo"><span></span>Triky a tipy jsou dobrá věc</h2></div>

/* BACKGROUND FOR H2 */
h2 { margin:0; padding:0; }
.head .logo, .head .logo1, .head .logo2 {width: 545px; height: 30px; position: relative; float: left;}
.head span {position: absolute; width: 100%; height: 100%;}
.head .logo span {background: url(../images/h2/1.png) no-repeat;}
.head .logo1 span {background: url(../images/h2/2.png) no-repeat;}
.head .logo2 span {background: url(../images/h2/3.png) no-repeat;}
Timy
Profil
<h2 class="logo"><img src="3.png" alt="Triky a tipy jsou dobrá věc"></h2>

IMHO nejjednodušší možné řešení
habendorf
Profil
Především je tam úplně zbytečný ten obalující div. A za druhé, pokud to je logo, mělo by být klikací. A taky mi není moc jasné, proč tam je ten floating. Já to řeším krapet jinak.
Petra z Votic
Profil
ptám se na toto : http://css.interval.cz/priklady/priklad-60-1.htm

nejedná se o klikací logo (to logo je jen použito z toho kódu na intervalu)
habendorf
Profil
No dobře, a jak zní teda otázka? Já myslel že to chceš zjednodušit, proto ti říkám že ten div tam je navíc. Naopak ti tam chybí overflow:hidden.
Petra z Votic
Profil
habendorf - já fakt nevím jak to bez toho divu navíc udělat - nemohl by jsi mně poslat odkaz někam, kde jsi to dělal nebo poradit jak to udělat

Děkuju
habendorf
Profil
Petra z Votic:

<h2 class="logo"><span id="logo1"></span>Triky a tipy jsou dobrá věc</h2>
<h2 class="logo"><span id="logo2"></span>Triky a tipy jsou dobrá věc</h2>

.logo {width: 545px; height: 30px; overflow:hidden;}
.logo span {position: absolute; display:block; width: 100%; height: 100%;}
#logo1 {background: url(../images/h2/1.png) no-repeat;}
#logo2 {background: url(../images/h2/2.png) no-repeat;}

Třeba.
Tomik
Profil
Pokud se nepletu, tak něco podobného už udělal pixy:
http://wellstyled.com/css-replace-text-by-image.html
Toto téma je uzamčeno. Odpověď nelze zaslat.