Autor Zpráva
dalik
Profil
Zdravím,
mám tento kus kódu

<div id="menu">
    <ul class="menuitem">
    <li class="page_item page-item-2 current_page_ancestor current_page_parent"><a href="xxx">xxx</a>
    <li class="page_item page-item-12 current_page_item"><a href="xxx">xxx</a></li>
</li>
<li class="page_item page-item-8"><a href="xxx">xxx</a>
    <li class="page_item page-item-14"><a href="xxx">xxx</a></li>
</li>
<li class="page_item page-item-10"><a href="xxx">xxx</a></li>
    </ul>
   </div><!--menu-->

a tohle css

#menu .page_item {background:url(images/menubg.png) repeat-x;height:35px;width:198px;padding-left:20px;}
#menu .current_page_item {background:url(images/menubg-hover.png) repeat-x; width:198px;height:35px;}
#menu ul li li {background:url(images/children.jpg) repeat-x; width:198px;height:35px;}

Chtěl bych, aby <li> vnořené v <li> (viz. toto <li class="page_item page-item-8"><a href="xxx">xxx</a>
<li class="page_item page-item-14"><a href="xxx">xxx</a></li>
</li>) mělo jiný BG image. Tak jak to mám to nefunguje, ukazuje to pouze obrázek z menubg.png. Třídy nelze přidávat, jede to na automatických tagách z WP.
Předem díky za radu.
Trejpa
Profil
dalik:
Elementy LI nelze vnořovat. De jure to zakazuje specifikace HTML, de facto se ale zobrazení řídí stejnou specifikací stanovující nepovinnost ukončovací značky elementu LI. Takže kód:

<ul>
 <li>
  <li>text</li>
 </li>
</ul>

musí prohlížeče zobrazit jako:

<ul>
 <li></li> (doplní se samo)
 <li>text</li>
 </li> (přebývá a ignoruje se)
</ul>

protože následující značka <li> automaticky ukončí předchozí element LI. Element LI se může vyskytnout jen v některém ze seznamů. Chceš-li seznamy vnořit, použij i vnitřnímu seznamu uvození v nadřazené položce, například elementem UL. Takhle je to správně:

<ul>
 <li>položka prvního seznamu
  <ul>
   <li>položka vnořeného seznamu</li>
  </ul>
 </li>
</ul>

Ukončovací značky </li> můžeš vynechat.


Jak funguje HTML
margin
Profil *
Žádný vnořený LI nevidím, pouze nadbytečný uzavírací tag </li> na osmém řádku.
Zřejmě se pokoušíš o toto:
<li class="page_item page-item-8"><a href="xxx">xxx</a> 
 <ul> 
 <li class="page_item page-item-14"><a href="xxx">xxx</a></li> 
 </ul> 
</li>

Ukončovací značka </li> je nepovinná, proto u tebe (na šestém řádku) k žádnému zanoření seznamu nedojde.
dalik
Profil
Aha.

Takhle to, ale bohužel WP dělá. Původně to bylo takto:

<ul>
    <li>
     <ul>
    <li>text</li>
     </ul>
   </li>
</ul>

Ten ul zanořený v li jsem smazal, protože to dělalo neplechu.

Jak to tedy udělat, aby se mi zobrazovalo to pozadí, tak jak jsem psal výše?
Trejpa
Profil
dalik:
Takhle to, ale bohužel WP dělá. Původně to bylo takto:
To je dobře.

Ten ul zanořený v li jsem smazal, protože to dělalo neplechu.
Vyřeš neplechu. Určitě ji to způsobuje nějaká zděděná vlastnost po předchozím seznamu.

Jak to tedy udělat, aby se mi zobrazovalo to pozadí, tak jak jsem psal výše?
V HTML nelze dosáhnout zanoření elementu LI.
dalik
Profil
Když tam tedy hodím ten seznam ul, tak to udělá toto
http://www-kodovani.cz/menu/

a já potřebuji aby to udělalo toto akorát ta sub položka má mít jiné pozadí:
http://www-kodovani.cz/menu2/

Mohl by mi tedy někdo poradit jak to předělat v css, jelikož v html to nemůžu vůbec měnit?
Aleš Tichava
Profil
dalik:

edit: K tomuto menu

Zkuste si v tom prvnim menu dosadit tenhle stylopis:

#menu {margin-top:20px;float:left;}
#menu ul {list-style:none; margin: 0; padding: 0; width:218px;}
#menu li a {font-size:15px;color:#505050;font-weight:bold;font-family:'cambria' ,sans-serif;
text-decoration:none;display:block; height: 2.1875em; line-height: 2.1875em; padding-left: 20px;}
#menu .page_item {background:url(images/menubg.png) repeat-x;}
#menu .current_page_item {background:url(images/menubg-hover.png) repeat-x;}
#menu .menuitem li ul .page_item {background:url(images/children.jpg) repeat-x;}
dalik
Profil
Paráda funguje, mockrát díky.

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: