« 1 2
Autor Zpráva
Petr ZZZ
Profil
jenikkozak:
Nepsal jsem v tomto případě o SEO, ale o přístupnosti (tebou zmíněná drobečková navigace v bublině zdejších odkazů je dobrým příkladem vhodného použití atributu title=""). Že si lidé pletou nadpis stránky s texty v bublinách, to je možné (také jsem si před nějakými třemi roky musel rozdíl mezi tagem a atributem ujasnit; tehdy šlo o style, princip je ovšem stejný :-).

„Každopádně bych to viděl na výuku v řádu desítek minut než měsíců.“
Zkus si vzpomenout, jaká doba uplynula od okamžiku, kdy ses poprvé setkal s HTML a CSS, do okamžiku, kdys začal ovládat alespoň základy. Mám potíže uvěřit, že se to vejde do několika dnů, neřkuli do desítek minut.

„Dvojí zalomení řádku...“
Já tam vidím jedno zalomení, ale to je jedno, neřeš to.
Stalker
Profil
Děkuji za diskuzi, která se tady rozběhla. Snažil jsem se vyjít, z Marginových rad, ale ne vše jsem pochopil.

V prvé řadě, bych tedy horní navigační menu zkusil ještě jednou předělat pomocí <ul> a <li>. Pak bych se vrhl na levé sloupcovité menu, u kterého to ale vidím na možné problémy.

Pod schedule budou ještě dva, tři odkazy a každý z nich bude mít toto pozadí. Proto musí mít každé "tlacitko.jpg" svůj DIV, ne? V případě, že bych chtěl do budoucna přidat další tlačítko, jen připíšu nový DIV a nastyluju mu pozadí, nebo se to dělá jinak? (Také mi to nepřijde, jako nejvhodnější způsob)

Navíc mám určitě v plánu udělat jak horní navigaci, tak boční navigaci v php pomocí include, ale mám trochu obavy, že u bočního menu to bude právě skrz pozadí trochu problém. (ale to asi budu řešit, až se k tomu dostanu)
jenikkozak
Profil
Stalker:
Proto musí mít každé "tlacitko.jpg" svůj DIV, ne?
Nemusí. Obrázek na pozadí nastav přímo odkazům.
Připravuješ asi takovýto kód:
<ul id="menu">
  <li><a href="schedule.html">Shedule</li>
  <li><a href="neco-jineho.html">Něco jiného</li>
  <li><a href="neco-jineho.html">Něco jiného</li>
</ul>
Obrázek na pozadí těchto všech položek přidáš následujícím zápisem v CSS:
#menu a{display:block; background-image:url("tlacitko.jpg"); height:40px; width:286px}
Selektor #menu a aplikuje styl na všechny odkazy (<a>) v prvku, který má id="menu"

Pokud si pak v budoucnu řekneš, že chceš přidat další odkaz, jen přidáš do seznamu další položku <li> a odkaz <a>. S CSS nebudeš vůbec muset manipulovat.
Stalker
Profil
jenikkozak:
Takhle jsem nad tím nikdy nepřemýšlel. Vždy jsem si myslel, že pozadí můžu definovat pouze divům, přitom jsou mnohdy zbytečné. Jak na to ale koukám, jak bych nastyloval přímo text odkazu, například "Schedule" (tzn. abych ho na to pozadí tlačítka umístil přesně na místo, které chci)?

Když například tomuto: #menu a{display:block; background-image:url("tlacitko.jpg"); height:40px; width:286px} přidám např. značku padding, tak budu hýbat i s tím backgroundem. Nebo snad to pozadí je pevně umístěné a hýbal bych jen s tím textem?
jenikkozak
Profil
Stalker:
Pokud neuvedeš pozici obrázku na pozadí (stejně jako já), umístí se obrázek automaticky do levého horního rohu. Pokud přidáš vnitřní okraj (padding), obrázek se neposune, jen se změní pozice textu. Pro přesnější umístění obrázků na pozadí ti může pomoci, pokud si dočasně zobrazíš u prvku rámeček, pak uvidíš kraje prvků a případně směr, jakým s nimi máš pomocí okrajů manipulovat.

Jak na to ale koukám, jak bych nastyloval přímo text odkazu, například "Schedule" (tzn. abych ho na to pozadí tlačítka umístil přesně na místo, které chci)?
Lepší je si to menu představit jako sloupeček obdélníků (než jako několik řádků textu). Zjistíš si, jak je velký obrázek na pozadí, a podle toho uděláš velký obdélníček. Texty pak zarovnáš pomocí centrování - v ose X se používá vlastnost text-align, na centrování v ose Y se používá takový fígl, že obdélníku nastavíš stejný rozměr ve výšce (height) i výšce řádku (line-height)
Stalker
Profil
jenikkozak:
To zní dost rozumně :) Pěkně si to vysvětlil. Díky za radu, mám nad čím přemýšlet a co zkoušet :)
« 1 2

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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