Autor Zpráva
Argonisius
Profil
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 *
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
Argonisius:
Zkus mu dát display:block;
panther
Profil
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
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
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
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
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ě.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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