| Autor | Zpráva | ||
|---|---|---|---|
| Jake Buchar Profil |
ahoj
koduju menu jednoho designu. kazdy hypertextovy odkaz koduji zvlast protoze kazdy je jinak vertikalne umisten. potreboval bych zjednodusit jednu vec. tady je HTML <ul id="c"> <li class="odkaz"><a href="#"><span><!-- --></span></a></li> </ul> <ul id="d"> <li class="odkaz"><a href="#"><span><!-- --></span></a></li> </ul> tady CSS .odkaz {display:inline;}
.odkaz a, .odkaz span {display:block;
height:49px;
width:125px;}
.odkaz a {
color:#000;
position:relative;
line-height:49px;}
.odkaz span {position:absolute;
top:7px;
left:30px;
cursor:pointer;}
.odkaz a span {background:url('o-nas.png') 0 0 no-repeat;}
.odkaz a:hover span {background-position: 0 -49px;}
.odkaz a:hover {text-decoration:none;}jedna se mi o to ze v html kodu mam definovany class="odkaz" jak si muzete vsimnout tak v css kodu mam pro tento class definovane celkem hodne veci.vsechny tyto veci jsou spolecne pro kazdy odkaz az na tuto: .odkaz a span {background:url('o-nas.png') 0 0 no-repeat;}u kazdeho odkazu se meni tento obrazek. jelikoz se mi nehce pro kazdy odkaz psat zvlast class chtel jsem se zeptat jestli by mi nekdo neporadil nejake zjednoduseni nebo by mi nekdo neporadil jak tu vec poresit jinak. pokud byste potrebovali neco lepe vysvetlit staci sem napsat. Dekuji Moderátor Chamurappi: Vkládej prosím kódy mezi značky [pre] a [/pre] a ne jako obrázek! Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
|
||
| Chamurappi Profil |
#2 · Zasláno: 1. 1. 2010, 20:18:42
Reaguji na Jake Buchara:
Asi nerozumím zadání. Chceš-li nějak zaměřit odkazy bez toho, abys jim dával třídu, můžeš je zaměřit podle třídy či ID rodiče — ale to zjevně víš, když už zaměřuješ <a> v <li class="odkaz">. „kazdy hypertextovy odkaz koduji zvlast protoze kazdy je jinak vertikalne umisten“ To je zdůvodnění k tomu, že je každý odkaz ve vlastním <ul>? Seznamy odkazů se většinou kódují jako seznamy odkazů, nikoliv jako řada jednopoložkových seznamů. Asi by se hodila živá ukázka toho, co máš, nebo alespoň obrázek znázorňující, jak by to mělo vypadat. Proč dáváš do <span>ů komentáře? Jsou tam naprosto zbytečné. Nedáš-li pod <span>y alternativní texty, bude menu nepřístupné. |
||
| Jake Buchar Profil |
#3 · Zasláno: 1. 1. 2010, 20:57:18
zde je jen takova ukazka toho webu Odkaz
kazdy ten odkaz je ve zvlastni ul protoze kazdemu tomu odkazu definuji jine pozadi ale to pochopite na te ukazce. jinak komentare davam mezi <span> proto aby to bylo semanticke protoze zadny prvek nemuze byt prazdny aspon to tak tvrdi na tutorials.cz |
||
| Chamurappi Profil |
#4 · Zasláno: 1. 1. 2010, 22:00:33
Reaguji na Jake Buchara:
„kazdy ten odkaz je ve zvlastni ul protoze kazdemu tomu odkazu definuji jine pozadi“ Proč nedáváš pozadí na položky seznamu? Tedy na <li> místo na <ul>? Viděl jsi někdy, jak vypadá kód obyčejného obrázkového menu? „komentare davam mezi <span> proto aby to bylo semanticke protoze zadny prvek nemuze byt prazdny“ Tobě tohle vysvětlení dává nějaký smysl? Sémantika je nauka o významech a HTML komentář význam přeci nijak nedodává. Element s ním je pořád stejně prázdný jako bez něj. „aspon to tak tvrdi na tutorials.cz“ A my jsme Jaa(c)ovi tvrdili, že to je volovina, kterou akorát mate začátečníky… což mu nevadí. Doporučuji vyhýbat se návodům na tutorials.cz. |
||
| Jake Buchar Profil |
#5 · Zasláno: 1. 1. 2010, 22:06:19
Chamurappi:
„Proč nedáváš pozadí na položky seznamu? Tedy na <li> místo na <ul>? Viděl jsi někdy, jak vypadá kód obyčejného obrázkového menu?“ ok dobre ale kam mam pak narvat ten class? |
||
| Molda Profil |
#6 · Zasláno: 1. 1. 2010, 22:22:23 · Upravil/a: Molda
<li class="prvni_trida druha_trida "> <li class="prvni_trida treti_trida"> by mělo fungovat, jestli chápu o co ti jde |
||
| Jake Buchar Profil |
#7 · Zasláno: 1. 1. 2010, 22:36:38
parada presne tohle jsem potreboval
diky a uz jen aby to bylo v tom seznamu jak tu psal Chamurappi. <ul> <li id="pozadiodkazu"></li> <li id="pozadiodkazu1"></li> </ul> toto byl dobry napad dat to do <li> to pozadi abych nemusel delat furt novy seznam tak jak je to na te ukazce. ale objevuje se tu ten problem kam mam dat ten class ktery musi byt pro kazdy <li> rozdilny nebo tam nejak zapasovat tu vyjimku aby class byl pro vsecky <li> stejny s tou vyjimkou ze by kazdy <li> mel ale jiny obrazek odkazu. bud tu mame tedy moznost udelat tolik seznamu jako odkazu a class definovat prvku <li> nebo to nejak zkloubit tak aby byl jen jeden seznam ,pozadi odkazu by se definovalo prvku <li> ale vznika tu problem s tim jak priradit ten rozdilny class kazdemu <li>. pokud byste vedeli jak na tu druhou moznost prosim poradte. |
||
| Railbot Profil |
#8 · Zasláno: 1. 1. 2010, 22:41:52 · Upravil/a: Railbot
Příliš dobře nechápu, co se zde řeší, takže se omlouvám pokud budu úplně vedle. Jestliže potřebuješ každé <li> odlišit, mít nastylované jinak (ať už přímo li nebo obsah), tak ti nezbývá nic jiného, než každému dát jinou třídu. Jinak je rozlišit nelze. Návod ti poskytl už kolega výše s těmi násobnými třídami.
|
||
| Molda Profil |
#9 · Zasláno: 1. 1. 2010, 22:42:02 · Upravil/a: Molda
smaž tenhle řádek
.odkaz a span {background:url('o-nas.png') 0 0 no-repeat;}
a dej tam misto toho
.menu1 {background:url('o-nas.png') 0 0 no-repeat;}
.menu2 {background:url('o-nich.png') 0 0 no-repeat;}
atd. a pak <ul> <li class="odkaz menu1"></li> <li class="odkaz menu2"></li> </ul> v atributu class můžeš těch tříd mít i víc než jednu |
||
| Bubák Profil |
#10 · Zasláno: 1. 1. 2010, 23:53:01
V tomto případě nevidím pro dvě třídy pro <li> důvod. Udělal bych to jednoduše nějak takto:
<style>
.menu li { }
.menu a { }
.menu a:hover { visibility: visible; } /* kvůli IE 6 musíš deklarovat nějaký hover odkazu, pak bude "hoverovat" i vložený span */
.menu odkaz1 a { } /* pravděpodobně nebudeš potřebovat */
.menu odkaz2 a { } /* pravděpodobně nebudeš potřebovat */
.menu odkaz1 a span { }
.menu odkaz2 a span { }
.menu odkaz1 a:hover span { }
.menu odkaz2 a:hover span { }
</style>
<ul class="menu">
<li class="odkaz1"><a href="#">text 1. odkazu<span></span>
<li class="odkaz2"><a href="#">text 2. odkazu<span></span>
</li> |
||
| Molda Profil |
#11 · Zasláno: 2. 1. 2010, 00:08:54
to je sice taky možnost ale ve chvíli kdy budeš těch <li class=""> mít třeba 6 tak podle tebe to bude takhle
.menu li .menu a .menu a:hover .menu odkaz1 a .menu odkaz2 a .menu odkaz1 a span .menu odkaz2 a span .menu odkaz1 a:hover span .menu odkaz2 a:hover span .menu odkaz3 a .menu odkaz4 a .menu odkaz3 a span .menu odkaz4 a span .menu odkaz3 a:hover span .menu odkaz4 a:hover span .menu odkaz5 a .menu odkaz6 a .menu odkaz5 a span .menu odkaz6 a span .menu odkaz5 a:hover span .menu odkaz6 a:hover span a podle mě takhle .odkaz .odkaz a, .odkaz span .odkaz a .odkaz span .odkaz a:hover span .odkaz a:hover .menu1 .menu2 .menu3 .menu4 .menu5 .menu6 což je o polovinu kratší a s každým další <li class=""> ještě kratší teda jestli se nemýlím |
||
| Bubák Profil |
#12 · Zasláno: 2. 1. 2010, 01:31:26
Nikde ve tvé kratší ukázce nevidím, jak máš vyřešeny různé pozadí spanů a jejich hover. Takže by se ti stylopis taky nafouknul.
|
||
| Molda Profil |
#13 · Zasláno: 2. 1. 2010, 02:14:37
styl vyřeším u třídy .odkaz což je 6 řádků protože je pro všechny položky <li> stejný
a pak už se starám jen o
.menu+cislo {background:url('obrazek.png');}
a jestli rozumím tobě tak ty bys přidával pro každou položku <li>
.menu odkaz+cislo a { znovu stejné vlastnosti ktere jsem ja uvedl jen jednou pro třídu .odkaz }
.menu odkaz+cislo a span {background:url('obrázek.png') 0 0 no-repeat;}
.menu odkaz+cislo a:hover span { znovu stejné vlastnosti ktere jsem ja uvedl jen jednou pro třídu .odkaz }
což mě přijde zbytečný, ale na druhou stranu při tomto počtu položek není rozdíl jak to kdo udělá |
||
| Chamurappi Profil |
#14 · Zasláno: 2. 1. 2010, 03:13:24
Reaguji na Moldu:
„ale ve chvíli kdy budeš těch <li class=""> mít třeba 6 tak podle tebe to bude takhle“ Zaměří „.menu li“ a má hotovo. Proč v tom hledáš nějakou vědu? Reaguji na Jake Buchara: „kam mam dat ten class ktery musi byt pro kazdy <li> rozdilny“ K <li>, když musí být u <li>. „nejak zapasovat tu vyjimku aby class byl pro vsecky <li> stejny“ Tak proč nezaměřuješ všechny <li>? Vždyť víš, jak zaměřovat elementy podle jejich názvu, ne? Třídu „odkaz“ pravděpodobně nepotřebuješ. Navíc jeden element může mít třídu i ID zároveň. |
||
| Bubák Profil |
#15 · Zasláno: 2. 1. 2010, 03:19:19
Molda:
„a jestli rozumím tobě tak ty bys přidával pro každou položku <li>“ Nerozumíš, na to mám první řádek ve stylu. „.menu odkaz+cislo a:hover span { znovu stejné vlastnosti ktere jsem ja uvedl jen jednou pro třídu .odkaz }“ A na to mám druhý řádek ve stylu. Abys udělal obrázkové menu s 6×2 (6 položek + hover) obrázky, tak potřebuješ nejmíň 12 CSS pravidel, jinak to nejde. Takže ty bys musel pravidla, která v CSS nemáš, přidávat, já můžu pravidla z ukázky, která bych nepotřeboval, odstranit. Ve výsledku bychom oba měli stejný počet CSS pravidel, ale já se obejdu bez vícenásobných tříd. |
||
| Jake Buchar Profil |
#16 · Zasláno: 2. 1. 2010, 11:17:42
diky za rady
pokusim se to nejak dat do hromady a dam urcite vedet o vysledku |
||
| Jake Buchar Profil |
#17 · Zasláno: 2. 1. 2010, 13:11:46
uz bych to asi mel
tady je Odkaz HTML <ul class="odkaz"> <li class="odkaz1"><a href="#"><span></span></a></li> <li class="odkaz2"><a href="#"><span></span></a></li> </ul> CSS .odkaz {display:inline;}
.odkaz a, .odkaz span {display:block;
}
.odkaz a {
color:#000;
position:relative;
line-height:49px;}
.odkaz a:hover span {background-position: 0 -49px;}
.odkaz a:hover {text-decoration:none;}
.odkaz1 {background:url("odkazy-o_nas.jpg") no-repeat;
width:163px;
height:114px;
float:left;}
.odkaz2 {background:url("odkazy-co_umime.jpg") no-repeat;
width:216px;
height:114px;
float:left;}
.odkaz1 a span {background:url("o-nas.png") 0 0 no-repeat;
height:49px;
width:125px;}
.odkaz2 a span {background:url("co-umime.png") 0 0 no-repeat;
height:46px;
width:200px;}
.odkaz1 span {position:absolute;
top:7px;
left:30px;
cursor:pointer;}
.odkaz2 span {position:absolute;
top:30px;
left:15px;
cursor:pointer;}pokud by jste meli nejake vyhrady s kodem nebo zpusobem zpracovani budu rad za veskere rady. |
||
| Bubák Profil |
#18 · Zasláno: 2. 1. 2010, 15:45:24
Výhrad by bylo tolik, že bys to musel celé předělat.
|
||
| Jake Buchar Profil |
#19 · Zasláno: 2. 1. 2010, 15:57:02
a mohl byste prosim neco konkretne zminit treba z CSS kodu?
|
||
| Jake Buchar Profil |
#20 · Zasláno: 3. 1. 2010, 19:02:06
zkusil jsem to jeste nejak vylepsit
odkaz na stranku : Odkaz HTML <ul class="odkaz"> <li class="odkaz1"><a href="#"><span></span></a></li> <li class="odkaz2"><a href="#"><span></span></a></li> </ul> CSS .odkaz li {list-style-type:none;
display:inline;}
.odkaz a {color:#000;
position:relative;
line-height:49px;}
.odkaz a:hover {visibility:visible;}
.odkaz a:hover span {background-position: 0 -49px;
text-decoration:none;}
.odkaz1 span {background:url("o-nas.png") 0 0 no-repeat;
height:49px;
width:125px;
position:absolute;
top:7px;
left:30px;
cursor:pointer;}
.odkaz2 span {background:url("co-umime.png") 0 0 no-repeat;
height:46px;
width:200px;
position:absolute;
top:30px;
left:15px;
cursor:pointer;}
.odkaz1 a {background:url("odkazy-o_nas.jpg") no-repeat;
width:163px;
height:114px;
float:left;}
.odkaz2 a {background:url("odkazy-co_umime.jpg") no-repeat;
width:216px;
height:114px;
float:left;}prosim kdyby jste meli k tomu nejake pripominky nebo navrh jak udelat neco jinak dejte vedet dekuji |
||
|
Časová prodleva: 14 let
|
|||
0