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.
vlajka_en.JPG a vlajka_en.jpg není totéž. Zkontroluj si velikost písmen (předpokládám, že máš ten obrázek v podsložce /pic - jak píšeš ve zdrojáku). Záleží taky na tom, kde je umístěný (relativně) ten CSS k tomu obrázku. Někdy "zázračně" pomůže Ctrl+F5.
Velikost pismen v nazvu obrazku a v nazvu odkazu v css jsou stejne. Soubory HTML a CSS jsou umisteny ve slozce STRANKA, kde je podslozka pic a v ni je ta vlajka. To CTRL+F5 delam porad, s faktem ze obcas F5 nestaci jsem uz obeznamen :).
Ani z-index nepomuze. HTML kod mam v tagu <table> tak jestli neco neblbe o cem nevim v tomto tagu.
A toto Funguje?:
To jsem mel puvodne a funguje. Ale chtel bych vlajku pouzit pres CSS, aby kod v HTML byl prehlednejsi/kratsi.
CSS kod:
...
...
HTML kod:
...
...
Koukam, ze CSS je beze zmeny.
S tim tagem SPAN to ani nehne, obrazek se nenacte vubec, vidim akorat prazdno.
Zacinam mit pocit, ze tag <A> nefunguje s obrazkem v CSS tak dokonale jak jsem myslel a chtel.
Moje chyba, pridej tam display: block jak rika Kráťa. Ja to pred tim nezkousel zdali to funguje
. Ty uvozovky tam mohou a nemusi byt, me to funguje i bez uvozovek.
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.