| Autor | Zpráva | ||
|---|---|---|---|
| Argonisius Profil |
#1 · Zasláno: 4. 2. 2011, 21:02:23
Dobrý den,
mám nastylované menu uvedené níže. Bohužel mi nefunguje pevná šířka "li" elementů - jednoduché položky v menu jsou stále široké podle textu. Jak mám tento kód upravit, aby byly "li" elementy široké 200px a vysoké 18px? css: ul#top-menu {
margin:0px;
}
ul#top-menu li {
display:inline;
width:200px;
height:18px;
}
ul#top-menu li a {
color:#ffffff;
text-decoration:none;
}
ul#top-menu li:hover {
background-image:url("img/menu.png")
}
ul#top-menu li:hover a {
color:#ad2700;
}<ul id="top-menu" class="menu"> <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-60"><a href="http://localhost/wordpress/?page_id=40">menu1</a></li> <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-59"><a href="http://localhost/wordpress/?page_id=42">menu2</a></li> </li> </ul> |
||
| brouzdalek Profil * |
#2 · Zasláno: 4. 2. 2011, 21:06:44
Nejsem si jisty, ale nevim, do jake miry lze toto upravit. Je potreba si zrejme uvedeomit, co je odstavcovy element a co radkovy. <li> ma predpokladam omezene moznosti, oproti <div>.
|
||
| Medvídek Profil |
#3 · Zasláno: 4. 2. 2011, 21:08:22
Argonisius:
Zkus mu dát display:block; |
||
| panther Profil |
#4 · Zasláno: 4. 2. 2011, 21:15:19 · Upravil/a: panther
brouzdalek:
nesmysl. Blokový div se, co se rozměrů týče, chová stejně, jako blokové <li>. A používat sadu <div>ů na menu. Nee.
Medvídek: chce je vedle sebe, display: block nepomůže.
Argonisius: hledáš float: left.
Malé doporučení na závěr: - seznam má výchozí levé odsazení, některé prohlížeče levý margin, jiné levý padding. Nuluješ jen margin, vynuluj i padding - li:hover nebude fungovat ve starších IE, změnu pozadí dej na odkaz (který by mj. měl být též blokový, ale byla klikatelná položka v celé šíři) - li:hover a jsi viděl kde? Proč ne li a:hover? Důvod stejný jako o řádek výše
|
||
| Bubák Profil |
#5 · Zasláno: 4. 2. 2011, 21:43:04
brouzdalek:
„<li> ma predpokladam omezene moznosti, oproti <div>.“ Předpokládáš špatně, <li> a <div> má aprosto stejné možnosti: li {display: block;} div {display: list-item; list-style-type: decimal; margin-left: 40px;} Medvídek: „Zkus mu dát display:block;“ Já bych mu zkusil nedávat display: inline; Argonisius: Sice display:block; odstraní odrážky, ale je to matoucí, doporučuji výstižnější deklaraci list-style: none; Ostatní už napsal panther. panther: „li:hover a jsi viděl kde?“ "Optimalizace pro IE6" není in, v módě je házet mu špatným kódem klacky pod nohy ;-) Bacha, smajlík. |
||
| Argonisius Profil |
#6 · Zasláno: 5. 2. 2011, 09:14:13
Díky za odpovědi, pro úplnost udávám funkční řešení.
ul#top-menu {
margin:0px;
padding:0px;
list-style:none;
}
ul#top-menu li {
float:left;
width:115px;
height:18px;
}
ul#top-menu li a {
color:#ffffff;
text-decoration:none;
display:block;
}
ul#top-menu li a:hover {
color:#ad2700;
background-image:url("img/menu.png");
} |
||
| Bubák Profil |
#7 · Zasláno: 5. 2. 2011, 10:28:35
Je to dobré, ještě bych to kapku upravil:
ul#top-menu {
margin:0px;
padding:0px;
list-style:none;
}
ul#top-menu li {
float:left;
width:115px;
height:18px;
}
ul#top-menu li a {
color:#ffffff;
text-decoration:none;
display:block;
width::100%;
background: url("img/menu.png") 500% 500% no-repeat;
}
ul#top-menu li a:hover {
color:#ad2700;
background: url("img/menu.png");
}Řádek 15 zapíná HasLayout odkazů v IE6, nevím, zda je to nutné i pro IE7, ale tahle deklarace jinak ničemu neuškodí. Pak tam "blbnu" s pozadím, nechám ho předem načíst, ale má takovou background-position, že ho není vidět. Při hoveru "zneužívám" chování sdružené CSS vlastnosti background, nastavuji jen pozadí. Ostatní, nedeklarované hodnoty pozadí nabudou výchozích hodnot. Tenhle zápis je úspornější (odhaduji o 4 řádky) a pro začátečníka pravděpodobně zpočátku nepochopitelný. Tím, že se obrázek načte dopředu, se dosáhne jeho rychlejšího zobrazení u návštěvníku, kteří nemají obrázek nakešovaný, třeba proto že jsou na stránce poprvé, nebo po dlouhé době. Markantně to je vidět v případě internetového připojení s delší odezvou. |
||
| Argonisius Profil |
#8 · Zasláno: 5. 2. 2011, 11:29:15
Díky, Bubáku. Ty tvoje úpravy vyřešily i problém, kterého jsem si dříve nevšiml - při najetí myší na menu se to v IE8,9 chovalo opravdu divně.
|
||
|
Časová prodleva: 15 let
|
|||
0