| Autor | Zpráva | ||
|---|---|---|---|
| Joan Profil |
#1 · Zasláno: 23. 2. 2010, 01:21:32 · Upravil/a: Joan
Opět jsem si na stránky vyrobila obrázek s vepsaným textem, který není hladký čtyřúhelník, ale má na okrajích průhledná místa a chtěla jsem, aby byl text čitelný za všech okolností, tj. jak bez obrázků, tak bez CSS a i bez obou zároveň. S nadějí jsem sáhla po tomto návodu, ale bohužel zklamal, protože tento trik počítá s obrázkem, který má po celé ploše neprůhledné pozadí. Můj obrázek vypadá takto (šachovnice je průhledné pozadí):
pod tlapkami okolo je průhledno a zástupný text nepěkně vykukoval ven. I podařilo se mi nakonec vymyslet (= nečetla jsem, neviděla jsem, nikdo mi neporadil) řešení, na které určitě už někdo někdy taky přišel, ale třeba zde někomu pomůže (ať taky trochu vrátím dluh, kdy ochotní lidé radili mně). Trik z výše uvedeného návodu kromě zcela neprůhledného obrázku počítá se SPANem, kterému se nastaví obrázkové pozadí. Smůla je v tom, že SPAN i vnější DIV jsou spolu svázány (SPAN je uvnitř DIVu), tak se mi nepodařilo zastrčit text až pod neprůhlednou část obrázku. Já jsem upravila kód tak, že jsem přidala ještě jeden obalový DIV a "rozsadila" jsem DIV a SPAN od sebe, aby nebyly vázány jeden na druhého. Jinými slovy obalovému DIVu jsem nastavila position: relative; vnitřnímu DIVu position: absolute; a SPANu rovněž position: absolute; Tím pádem bylo možno "odpinknout" zástupný text až pod neprůhlednou část obrázku, aby vůbec nevyčníval pod tlapkami. Všechny tři použité prvky mají nastavenu totožnou velikost, tj. rozměry obrázku. Já jsem obrázek potřebovala přifařit k řadě plovoucích obrázků, proto mám v kódu i float: right; ale pro funkčnost zdaleka není nutné. Kód je docela jednoduchý: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#basen {width: 260px; height: 276px; position: relative; font-size: 0.85em; float: right;}
#verse {white-space: pre; padding: 0; position: absolute; left: 15px; top: 15px; width: 260px; height: 276px; overflow: hidden;}
#basen span {margin: 0; padding: 0; display: block; position: absolute; right: 10px; top: 0; width: 260px; height: 276px; z-index: 1; background: url(verse.gif) no-repeat;}
</style>
</head>
<body>
<div id="basen">
<div id="verse">Člověče, jenž postojíš
a vybereš si psíka,
co v boudě osamocen
pláče a naříká:
pejsek k Tobě vzhlížet bude
obdivně a rád,
s ním teprve poznáš význam
slova "kamarád".
Dobrý skutek stát Tě bude
koupě misky, granulek,
avšak vděčnost a psí láska
zůstane na věků věk...</div><span></span></div>
</body>
</html>No a tady si můžete vyzkoušet, že ani vypnutí obrázků, ani vypnutí CSS či dokonce obojího zároveň nenabourá čitelnost hlavního textu básničky :-)) |
||
|
Časová prodleva: 18 dní
|
|||
| Chamurappi Profil |
#2 · Zasláno: 12. 3. 2010, 23:50:04
Reaguji na Joana:
„tento trik počítá s obrázkem, který má po celé ploše neprůhledné pozadí“ Problém ale je, že pokud v obrázku jsou průhledná místa, bývají tam z dobrého důvodu — že není známo, co přesně pod ním bude. Ví-li tvůrce stránky přesně, jak pozadí vypadá, může ho (téměř vždy) dát rovnou do toho jednoho obrázku, čímž z něj učiní neprůhledný, a trik není potřeba. |
||
|
Časová prodleva: 14 let
|
|||
0