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
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
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
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
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
<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
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
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
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
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
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
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
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
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
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
diky za rady
pokusim se to nejak dat do hromady a dam urcite vedet o vysledku
Jake Buchar
Profil
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
Výhrad by bylo tolik, že bys to musel celé předělat.
Jake Buchar
Profil
a mohl byste prosim neco konkretne zminit treba z CSS kodu?
Jake Buchar
Profil
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

Vaše odpověď

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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