HTML/CSS - odkaz s obrazkem
Ahoj, muzete mi prosim poradit. Rad bych udelal na strankach vlajku s odkazem, v css jsem nadefinoval obrazek vlajky+rozmery a v html odkaz na stranku a ID do css s obrazkem vlajky. Bohuzel vidim pouze bili obdelnik, obrazek z css se nezobrazuje. Jde to vubec takto pouzit?
CSS kod:
...
#lang_en { background-image: url(pic/vlajka_en.JPG); width:42px; height:22px; }
...
HTML kod:
...
<a href="http: //www. neco. cz/index_en.html" id="lang_en"></a>
...
Dekuji.
Neznate nekdo nejakou vychitavku jak jednoduse a kratce vytvorit odkaz s obrazkem aniz bych natvrdo nadefinoval obrazek v HTML?
V tom CSS to nefunguje jenom me nebo i vam?
Nikdy jsem nestudoval čím to je, ale někdy mi funguje
#lang_en { background-image: url(pic/vlajka_en.JPG); width:42px; height:22px; }
jindy s apostrofy
#lang_en { background-image: url('pic/vlajka_en.JPG'); width:42px; height:22px; }
nebo s uvozovkami
#lang_en { background-image: url("pic/vlajka_en.JPG"); width:42px; height:22px; }
Kdyby spolehlivě nefungovalo pozadí čehokoli (v tvém případě odkazu), nešlo by dělat třeba tohle
menu.html
Tam to mám zrovna s uvozovkama
CSS
.menici {background: url("images/pod_odkaz.gif") 0 0 no-repeat;}
HTML
<a class="menici" href="hol_ovcak.html" title="holandský ovčák">HOLANDSKÝ OVČÁK</a>
Možná by ti pomohlo "display: block"
#lang_en { background-image: url("pic/vlajka_en.JPG"); width:42px; height:22px; display: block;}
Vzdavam to, ani jedno nejde, i v kombinaci(block/uvozovky/class/id). Koukal jsem na tvuj kod, ty mas css nadefinovany v HTML. Asi to nejde jinak nez nadefinovat primo v HTML, coz jsem nechtel.
Dekuji vsem za snahu. Budu muset se vratit v puvodnimu, funkcnimu - nadefinovany primo v HTML <a href...><img scr="vlajka"... /></a>
A funguje ti tohle? kdyztak, si to muzes stanout 9905-zip-zip a zkusit zdali to funguje. A CSS musi fungovat i v externim souboru, kdyby nefungovalo, tak by samotne CSS samo o sobe ztracelo smysl.
CSS:
#lang_en { background-image: url(pic/vlajka_en.JPG); width:42px; height:22px; display: block}
-------------------------------------------------- ---------------------------------------------
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<a href="index_en.html">
<span id="lang_en">
</span></a>
</body>
</html>
Moje chyba. Ten bily obdelnik, o kterem jem psal vyse, a ktery vidim po pouziti tagu SPAN je ve skutecnosti cast vlajky. Zjistil jsem to po pouziti tveho kodu, kde po otevreni html souboru je videt cast fotografie.
Skoda jenom, ze obrazek se nezmensi na rozmery nastavene v css, ale to je uz jedno, bohate staci zmenseny obrazek.
Dekuji vsem!!!
Rozmery obrazku nikdy nezmensuj pres web, je to totalni blbost! Pro zmenseni pouzij program, treba: resampler2010.php.
Rozmery obrazku se nastavuji jenom proto, aby stranka pri nacitani "neskakala".
Keď doplníš display: block (alebo inline-block), tak to funguje:
Bez toho display: block sa to zobrazuje inline a inline elementom nevieš nastaviť šírku a výšku. A keďže v tom elemente nemáš žiaden text, tak má nulovú šírku a nič sa ti nezobrazí.
Ďalšia možnosť ak nechceš použiť inline-block, je nastaviť padding na polovičné rozmery obrázka a dať nulový line-height a font-size. Ale to je už taký hack pre zastaralé prehliadače.
Ale jde. Tohle je přímo v tom souboru proto, protože jsem ho dělal po letech zcela samostatně.
Řešení je nasnadě, milý Watsone: Místo #lang_en napiš #lang-en. Jak prosté!
V CSS1 bolo síce potrebné escapovať podčiarnik, ale to je historická záležitosť spred vyše 10 rokov a problém to neodstráni. IE vtedy na špecifikáciu dlabal, takže tam podčiarniky vždy fungovali. Ostatné prehliadače mali s podčiarnikmi problém a to taký, že ich nepodporovali vôbec (ani keď boli escapované).
V súčasnosti je jedno, či sa použije podčiarnik alebo mínus. Osobne preferujem v CSS znak mínus.
Asi mám taky v PC nějakého skřítka. Teď jsem to zkoušel znovu, a to podtržítko to bere... Tak nevím.
Ten skřítek se jmenuje "Ctrl+F5"
Ne, ne. To není on, toho znám - to bude spíše jeho brácha.