Autor Zpráva
jso
Profil *
zajímalo by mne, jen by se dalo toto nejefektivněji nakódovat



na obrázku je aktuálně navštívená položka Historie, tedy položka má pozadí bílou a zároveň je pod ní červený proužek. Při hoveru nad danou položkou by se změnilo pouze pozadí položky (bílé), ne proužku.

Nejsem kodér, děkuji za pomoc.
Joker
Profil
jso:
background + border a :hover ...nepřijde mi to složité
jso
Profil *
Joker
backgroundem udělám tu žlutou čáru, ale co s tím bílým prostorem? Předpokládám, že spodní žlutá bude border-bottom.
don jebot
Profil
border-top a bottom zlha hover border-top biely bottom zlty thats alll
jso
Profil *
don jebot
když je to v seznamu, ano?

kostra je takto:
                <ul>
                  <li><a href="historie.html" title="Historie">ÚVOD</a></li>
                  <li><a href="historie.html" title="Historie">HISTORIE</a></li>
                  <li><a href="akce.html" title="Akce">AKCE</a></li>
                  <li><a href="clenstvi.html" title="Členství">ČLENSTVÍ</a></li>
                  <li><a href="sponzori.html" title="Sponzoři">SPONZOŘI</a></li>
                </ul>
Str4wberry
Profil
Také můžeš dolní čáru udělat z borderu-bottom <li> a horní backgroundem <a>, ale dole to nebude klikat. Pokud to je problém, tak se mi zdá, že se nejjednodušší řešení bez obrázku neobejde. Ještě mě napadají dvě (ošklivá) bez obrázku a jedno s outlinem.
Chamurappi
Profil
Reaguji na jsa:
Horní pruh by také mohl být border na <li> a to vnitřní <a> by na něj šlo vyšoupnout.
jso
Profil *
Str4wberry
právě bych byl rád, kdyby bylo klikací vše, tedy od "žluté" po "žlutou".
jso
Profil *
Tak nakonec po zvážení pro a proti jsem to udělal dle Str4wberry. Díky Ti!
don jebot
Profil
jj lenze hover na li v IE6 nefunguje ... si to mohol normalne spravit iba na odkaz a ziadni problem by si v tom nemal
....
jso
Profil *
don jebot
standardními prostředky ne. Proto jsem poprosil o radu, jak by to kdo řešil. To bylo smyslem tématu. Vždycky to člověk nějak udělá, mě zajímalo, jak by to kdo dělal. Str4wberry a Chamurappi mi jsou dost velkou zárukou, že to je jedno z nejlepších řešení, bez obrázků atp.
Chamurappi
Profil
Reaguji na dona jebota:
jj lenze hover na li v IE6 nefunguje
To tu ani nikdo nenavrhuje, ne? Zejména u menu mi připadá nevhodné dávat :hover na <li>, protože pak člověk očekává, že půjde prokliknout i ta část položky, která není odkazem.
Bubák
Profil
Taková s prominutím hloupost musí jít bez obrázků napříč prohlížeči:
<style>
#menu	{
	width: 600px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu li	{
	float: left;
}
#menu a	{
	display: block;
	width: 120px;
	padding: 30px 0;
	border-bottom: 10px solid #fc3;
	background: #ffc;
	text-align: center;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
}
#menu a:hover	{
	border-color: red;
	background: #ff9;
	text-align: center;
}
#menu span	{
	display: block;
	padding: 2px 0;
	background: #ff0;
}#menu a:hover span	{
	background: #ffb;
}
</style>

<ul id=menu>
	<li><a href="historie.html" title="Historie"><span>Úvod</span></a></li>
	<li><a href="historie.html" title="Historie"><span>Historie</span></a></li>
	<li><a href="akce.html" title="Akce"><span>Akce</span></a></li>
	<li><a href="clenstvi.html" title="Členství"><span>Členství</span></a></li>
	<li><a href="sponzori.html" title="Sponzoři"><span>Sponzoři</span></a></li>
</ul>

Ukázku jsem obarvil odlišně, ale barvy je možné jednoduše změnit, nebo vynechat. Při použití obrázku bych se obešel bez SPANů.
jso
Profil *
Bubák
Ano, však lze ;) Ale velice děkuji za tvůj čas. Safra, měl jsem napsat, že jsem to již včera udělal. Moje chyba, za kterou se ti omlouvám. A jak říká Chamurappi, „To tu ani nikdo nenavrhuje“.
Carl114
Profil
Na stránce PunctuatingReality je použito stejné menu. Můžeš se tam podívat a třeba se přiučit ... ;)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: