Autor Zpráva
Kukinac
Profil *
ahoj,
potřebuji poradit jak nastavit/napsat v menu, aby po kliknutí na nějakou sekci zůstala označená? (může být stejným obrázkem jako pro hover)
ul.menu {
    color: black;                      
    background: white;
    font-family: sans-serif;
}                                              
ul.menu    {                                        
    width: 880px;
    margin: 0 auto; /* kdo nechce centrovane menu, vynecha */
    padding: 0;
    background: #FFE682;
}
ul.menu li    {
    float: left;
    list-style: none;
    height: 30px;
    line-height: 30px; /* vertikalni centrovani, stejne height a line-height */
}
ul.menu a    {
    display: block;
    width: 125px;
    height: 100%;
    background: url(menu1.png) no-repeat left #bbc;
    text-align: center;
    font-size: 1.15em;
    font-family: Times New Roman;                     
    text-decoration: none;
    color: #000;
}
ul.menu a:hover, ul a:active, ul a:focus    {
    background: url(menu1.png) no-repeat right #eed;
    color: #4d3e00
}
.cistic {
    clear: both;
    height: 1px;                  
    overflow: hidden;
    margin-top: -1px;
}
předem děkuji
Trejpa
Profil
Kukinac:
V každé HTML stránce musíš aktivní položku menu nějak odlišit, třeba třídou.

<ul class=menu>
  <li><a href=1.html>První</a>
  <li class=aktivni><a href=2.html>Druhá</a>
  <li><a href=3.html>Třetí</a>
</ul>

Potom ji bude jednoduché ve stylech zaměřit a ostylovat.

.menu .aktivni a { background-position: right; }
.menu .aktivni a:hover { /* něco jiného */ }

V kaskádových stylech nic jako „aby po kliknutí na nějakou sekci zůstala označená“ není. Dalo by se to trochu krkolomně nasimulovat JavaScriptem, který by porovnával aktuální adresu stránky s napsaným seznamem stránek a podle něho by konkrétní položce menu přidal třídu pro jiný vzhled. Ale tak to z dobrých důvodů nikdo nedělá.
Kukinac
Profil *
Trejpa díky, na "hlavním" menu mi to pěkně funguje. Ale na této stránce (levé boční menu) www.rancmp.wz.cz/bridlicna2011.html mi to nějak nejde, kde mám chybu?
Tohle mám v css pro to boční menu:
ul.menu-fotogalerie li {
                display: inline-block; }
         
            ul.menu-fotogalerie a {
                width: 150px;
                height: 30px;
                background: url(button.png) 0 0 no-repeat;
                display: block;
                text-align: center;
                text-decoration: none;
                color: #333;
                line-height: 2;
                font-weight: bold;
                font-size: 90%; }
                         
           
            ul.menu-fotogalerie a:hover {
                background: url(button.png) 0 -30px no-repeat;
                
            }
            ul.menu-fotogalerie .aktivni a { background-position: down; }

V kaskádových stylech nic jako „aby po kliknutí na nějakou sekci zůstala označená“ není. Dalo by se to trochu krkolomně nasimulovat JavaScriptem, který by porovnával aktuální adresu stránky s napsaným seznamem stránek a podle něho by konkrétní položce menu přidal třídu pro jiný vzhled. Ale tak to z dobrých důvodů nikdo nedělá.
Jasně, já to chtěl jen popsat :)
Trejpa
Profil
Kukinac:
kde mám chybu?
1. Třeba na stránce Naše kravičky nemáš v seznamu odkazů položky seznamu. Seznam musí obsahovat položky seznamu <li>, teprve v nich může být odkaz nebo obsah.
2. Nemáš tu položku nijak označenu. Použij třídu u aktivní položky, ostatní položky seznamu nechej bez třídy.
3. Na stránce Břidličná máš jen jednu položku, má sice správně nastavenu třídu aktivni, ale jednak je u špatného odkazu a ve stylech pro ni nic nastaveno stejně není. Třeba takto, pokud chceš měnit ten odkaz v položce (až si je všude doplníš) ul.menu-fotogalerie .aktivni a { background-position: 0 -30px; }
Kukinac
Profil *
Trejpa:
1. Třeba na stránce Naše kravičky nemáš v seznamu odkazů položky seznamu. Seznam musí obsahovat položky seznamu <li>, teprve v nich může být odkaz nebo obsah.
2. Nemáš tu položku nijak označenu. Použij třídu u aktivní položky, ostatní položky seznamu nechej bez třídy.

Tohle já vím...Píšu to v PSPadu a když jsem tam napsal <li> tam mi to tam hodilo tečku před ten odkaz (jako ve Wordu "odrážky") a tak jsem to zase smazal...zjistil jsem, že se to ale v prohlížeči zobrazuje správně, stejně to ale nefunguje.

3. Na stránce Břidličná máš jen jednu položku, má sice správně nastavenu třídu aktivni, ale jednak je u špatného odkazu a ve stylech pro ni nic nastaveno stejně není. Třeba takto, pokud chceš měnit ten odkaz v položce (až si je všude doplníš) ul.menu-fotogalerie .aktivni a { background-position: 0 -30px; }

Taky vím, že je u špatného odkazu...jenže to tam bylo jen abych si všiml až to bude fungovat..jestli mi rozumíš...zatím jsem neřešil, kde to bude, dokud tu nepojede jak má.
Teď už je to správně...<li> tam je třída je také u správného odkazu...ale "od tebe" jsem tam dopsal jen 0 -30px ....Stejně to ale nefunguje...


Jéééééj :DDDD
tak už mi to funguje :D našel jsem chybu:
Odkazoval jsem na špatný styl.css ...taká blbá chyba ;)
ale i tak díky :))
margin
Profil *
Kukinac:
když jsem tam napsal <li> tam mi to tam hodilo tečku před ten odkaz (jako ve Wordu "odrážky")
To je normální, LI jje položka seznamu a před ní se zobrazí odrážka. Změny vzhledu se nedělají zprasením HTML, ale pomocí CSS, více List-style, odrážek se jde zbavit deklarací:
list-style: none; případně ukecanější deklarací list-style-type: none;

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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