| Autor | Zpráva | ||
|---|---|---|---|
| Petra z Votic Profil |
#1 · Zasláno: 12. 1. 2006, 14:42:54 · Upravil/a: Petra z Votic
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 |
#2 · Zasláno: 12. 1. 2006, 14:53:04
<h2 class="logo"><img src="3.png" alt="Triky a tipy jsou dobrá věc"></h2>
IMHO nejjednodušší možné řešení |
||
| habendorf Profil |
#3 · Zasláno: 12. 1. 2006, 14:53:14
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 |
#4 · Zasláno: 12. 1. 2006, 15:01:33
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 |
#5 · Zasláno: 12. 1. 2006, 15:07:17
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 |
#6 · Zasláno: 12. 1. 2006, 20:08:07
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 |
#7 · Zasláno: 12. 1. 2006, 20:28:45
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 |
#8 · Zasláno: 12. 1. 2006, 20:31:58
Pokud se nepletu, tak něco podobného už udělal pixy:
http://wellstyled.com/css-replace-text-by-image.html |
||
|
Časová prodleva: 18 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0