Prázdný element <a>

wizard
imho není jediný důvod, aby mu to vadilo, ale tohle nechápu: <a> je definováno s displayem block a ten má pozedí, na kterém je obrázek s textem odkazu. -- když je tam "text odkazu", tak proč v <a> není cíl odkazu? Nebo mi něco uniklo?

wizard
aha, jsem to špatně pochopil. Jsem myslel, že v elementu nic není znamená, že je bez atributů;-)

Ne, nevadí, je to standardní postup. Jen obvykle se tam vkládá alespoň mezera &nbsp;

a jak třeba googlebot přijde na ty stránky, které jsou níž?
Vidí <a href="http://www.nekam.cz"

zápis vypadá zhruba takto: style="background: url("obrazek_s_textem_odkazu.png")
Jestli si nám nedal celý kód kvůli žjednodušení, a děláš CSS rollover, tak to bylo rozebráno, jinak ti stačí dát do odkazu obrázek s atributem alt.

Terazky mě napadla kulišárna, co jsem nikde neviděl, co tak tam šoupnout úplně průlhledný gif s atributem alt? (pozor, to je dotaz, jestli to může k něčemu být, nebo je to blbost) A takhle nic neskrývám, není to "potenciálně penalizovatelná technika" :-)))

wizard: A co ti brání tam něco dát?

wizard: Pokud uděláš image replacement (viz Google), tak ne. Já nevim, že se musí každý zabývat kdejakou prkotinou kvůli SEO, ale že třeba lidi co na ten web přijdou neuviděj navigaci, to už nikomu nevadí.

wizard: Já spíš měla namysli uživatele s nedostupnými obrázky. Googlebot je robot, nedívá se na ostylovaný web, dívá se na zdrojový HTML kód. Tohle pozná zatím jen člověk. Prázdným odkazem se ale připravíš jednak o klíčová slova textu odkazu, jednak je samozřejmě vždycky možné (i když to tak teď zrovna nemusí být), že vyhledávač dá nižší váhu odkazu bez textu nebo ho bude třeba i ignorovat. Prostě tam ten text dej a hotovka :-)

wizard:
protože element <a> má pozadí ne kterém je obrázek s textem. Pokud dám něco mezi <a> </a>, tak to bude vidět, a popere se to s tim pozadim.

Když to uděláš šikovně tak ne. Proto říkám, ať tam něco dáš.

<a href="#">Libovolný text<span></span></a>

a {

position: relative;

	display: block;

	height: 98px;

	width: 311px;

}

span {

	display: block;

	position: absolute;

	left: 0;

	top: 0;

	height: 98px;

	width: 311px;

	background: url("./img/logo.gif") no-repeat left top;

}

Třeba.

Image replacement, řešení, které radí Petra je podle mého názoru nejvýhodnější. Princip je ten, že v divu, je text (může být odkazem). Přesně nad ním je napozicovaný další div, který má background-image. Poprvé jsem o tom četl v Pixyho článku. Přiznám se, že to neumím, a sám to udělat si netroufám. Jeden z problémů je třeba, aby text nepřečuhoval zpod obrázků, protože klasické "overflow: hidden" znepřístupní část textu těm, co si vypli obrázky. <ot> budu se to muset naučit</ot>

Radek Hrabůvka: ale to je víceméně přesně to, co jsem sem dal já. Ty sice mluvíš o divech, já tam mám <a> a <span>, ale jsou display:block, princip je shodný a zápis kratší.

[b]habendorf[/b] Jasně, když jsem použil slovo "princip", nechtěl jsem rozepisovat nic konkrétního, protože jsem to předtím nezkoušel, nechtěl jsem psát bláboly.

Před chvíli jsem to zkoušel, ale abychom měli roleček, musí mít background "a". Pak je text nad obrázkem. Laboroval jsem se z-indexem a neuspěl jsem.
Druhý problém je přečuhující text. Když je obrázek malý a text dlouhý, nevím, co s tím. Overflow nevidím jako ideální řešení.

Radek Hrabůvka: Radku to přece není problém, stačí dodefinovat

a:hover span {
background: url("jiny-obrazek.jpg") no-repeat left top;
}

Z-index netřeba. Ale aby to pochopil i IE, je třeba udělat nějakou akci pro a:hover, jinak to nefunguje.
Nejlépe nějakou neškodnou neutrální, třeba
a:hover {
visibility:visible;
}

Takže celé:
a {
position: relative;
display: block;
height: 98px;
width: 311px;
}
a:hover {
visibility:visible;
}
a span {
display: block;
position: absolute;
left: 0;
top: 0;
height: 98px;
width: 311px;
background: url("./img/logo.gif") no-repeat left top;}
a:hover span {
background: url("./img/logo2.gif") no-repeat left top;}

Co se týče overflow, nic jiného nezbývá. Ale tohle by se stejně použilo někde v menu, kde nejsou odkazy bůhvíjak dlouhé. Kdyby dlouhý byl, nezbývá než malé písmo + overflow.

habendorf Máš tam sice drobnou chybičku, nešoupeš pozadím, ale to si snad každý upraví. Stejně někdo posunuje nahoru, někdo doprava, takže to nelze jen tak skopčit. Doplnit overflow je brnkačka.
Diky, vysvětlils to tak že to chápe taková lama, jako já, hlavně s tou akcí pro IE, na to bych nepřišel.

Radek Hrabůvka: Máš tam sice drobnou chybičku, nešoupeš pozadím, ale to si snad každý upraví.

No popravdě rečeno, já tam mám dva různé obrázky, takže šoupat netřeba. Ale šlo by to i s jedním a se šoupnutím, prostě Pixyho "rychlé rollovery bez preloadu".

habendorf Když jsem neviděl změnu background-position, tak jsem změnu url() přehlídnul :o