| Autor | Zpráva | ||
|---|---|---|---|
| Kukinac Profil * |
#1 · Zasláno: 8. 4. 2013, 10:00:48
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;
} |
||
| Trejpa Profil |
#2 · Zasláno: 8. 4. 2013, 10:15:43
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á. |
||
|
Časová prodleva: 3 dny
|
|||
| Kukinac Profil * |
#3 · Zasláno: 11. 4. 2013, 09:46:31
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 |
#4 · Zasláno: 11. 4. 2013, 11:56:47
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 * |
#5 · Zasláno: 11. 4. 2013, 16:21:28 · Upravil/a: Kukinac
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 * |
#6 · Zasláno: 11. 4. 2013, 16:53:04
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;
|
||
|
Časová prodleva: 11 let
|
|||
0